form_tag_helper.rb 35.3 KB
Newer Older
1
require 'cgi'
2
require 'action_view/helpers/tag_helper'
3
require 'active_support/core_ext/string/output_safety'
4
require 'active_support/core_ext/module/attribute_accessors'
5 6

module ActionView
7
  # = Action View Form Tag Helpers
8
  module Helpers
9
    # Provides a number of methods for creating form tags that don't rely on an Active Record object assigned to the template like
10
    # FormHelper does. Instead, you provide the names and values manually.
11
    #
12
    # NOTE: The HTML options <tt>disabled</tt>, <tt>readonly</tt>, and <tt>multiple</tt> can all be treated as booleans. So specifying
A
AvnerCohen 已提交
13
    # <tt>disabled: true</tt> will give <tt>disabled="disabled"</tt>.
14
    module FormTagHelper
W
wycats 已提交
15 16 17 18 19
      extend ActiveSupport::Concern

      include UrlHelper
      include TextHelper

20
      mattr_accessor :embed_authenticity_token_in_remote_forms
21
      self.embed_authenticity_token_in_remote_forms = false
22

23
      # Starts a form tag that points the action to an url configured with <tt>url_for_options</tt> just like
24 25
      # ActionController::Base#url_for. The method for the form defaults to POST.
      #
26
      # ==== Options
27
      # * <tt>:multipart</tt> - If set to true, the enctype is set to "multipart/form-data".
P
Pratik Naik 已提交
28
      # * <tt>:method</tt> - The method to use when submitting the form, usually either "get" or "post".
A
Akira Matsuda 已提交
29
      #   If "patch", "put", "delete", or another verb is used, a hidden input with name <tt>_method</tt>
P
Pratik Naik 已提交
30
      #   is added to simulate the verb over post.
31 32
      # * <tt>:authenticity_token</tt> - Authenticity token to use in the form. Use only if you need to
      #   pass custom authenticity token string, or to not add authenticity_token field at all
33 34 35
      #   (by passing <tt>false</tt>).  Remote forms may omit the embedded authenticity token
      #   by setting <tt>config.action_view.embed_authenticity_token_in_remote_forms = false</tt>.
      #   This is helpful when you're fragment-caching the form. Remote forms get the
36
      #   authenticity token from the <tt>meta</tt> tag, so embedding is unnecessary unless you
37
      #   support browsers without JavaScript.
38
      # * A list of parameters to feed to the URL the form will be posted to.
39
      # * <tt>:remote</tt> - If set to true, will allow the Unobtrusive JavaScript drivers to control the
40
      #   submit behavior. By default this behavior is an ajax submit.
41
      # * <tt>:enforce_utf8</tt> - If set to false, a hidden input with name utf8 is not output.
42 43
      #
      # ==== Examples
44
      #   form_tag('/posts')
45 46
      #   # => <form action="/posts" method="post">
      #
A
AvnerCohen 已提交
47
      #   form_tag('/posts/1', method: :put)
48
      #   # => <form action="/posts/1" method="post"> ... <input name="_method" type="hidden" value="put" /> ...
49
      #
A
AvnerCohen 已提交
50
      #   form_tag('/upload', multipart: true)
51
      #   # => <form action="/upload" method="post" enctype="multipart/form-data">
52
      #
A
Akira Matsuda 已提交
53
      #   <%= form_tag('/posts') do -%>
54 55
      #     <div><%= submit_tag 'Save' %></div>
      #   <% end -%>
56
      #   # => <form action="/posts" method="post"><div><input type="submit" name="commit" value="Save" /></div></form>
57
      #
A
AvnerCohen 已提交
58
      #   <%= form_tag('/posts', remote: true) %>
S
Stefan Penner 已提交
59
      #   # => <form action="/posts" method="post" data-remote="true">
60
      #
A
AvnerCohen 已提交
61
      #   form_tag('http://far.away.com/form', authenticity_token: false)
62 63
      #   # form without authenticity token
      #
A
AvnerCohen 已提交
64
      #   form_tag('http://far.away.com/form', authenticity_token: "cf50faa3fe97702ca1ae")
65 66
      #   # form with custom authenticity token
      #
67 68
      def form_tag(url_for_options = {}, options = {}, &block)
        html_options = html_options_for_form(url_for_options, options)
69
        if block_given?
70
          form_tag_in_block(html_options, &block)
71
        else
72
          form_tag_html(html_options)
73
        end
74 75
      end

76 77 78 79
      # Creates a dropdown selection box, or if the <tt>:multiple</tt> option is set to true, a multiple
      # choice selection box.
      #
      # Helpers::FormOptions can be used to create common select boxes such as countries, time zones, or
80 81 82 83 84
      # associated records. <tt>option_tags</tt> is a string containing the option tags for the select box.
      #
      # ==== Options
      # * <tt>:multiple</tt> - If set to true the selection will allow multiple choices.
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
R
Rncrtr 已提交
85
      # * <tt>:include_blank</tt> - If set to true, an empty option will be created.
86
      # * <tt>:prompt</tt> - Create a prompt option with blank value and the text asking user to select something
87
      # * Any other key creates standard HTML attributes for the tag.
88
      #
89
      # ==== Examples
90
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name")
P
Pratik Naik 已提交
91
      #   # <select id="people" name="people"><option value="1">David</option></select>
92
      #
93
      #   select_tag "people", "<option>David</option>".html_safe
94
      #   # => <select id="people" name="people"><option>David</option></select>
95
      #
96
      #   select_tag "count", "<option>1</option><option>2</option><option>3</option><option>4</option>".html_safe
97 98 99
      #   # => <select id="count" name="count"><option>1</option><option>2</option>
      #   #    <option>3</option><option>4</option></select>
      #
A
AvnerCohen 已提交
100
      #   select_tag "colors", "<option>Red</option><option>Green</option><option>Blue</option>".html_safe, multiple: true
101
      #   # => <select id="colors" multiple="multiple" name="colors[]"><option>Red</option>
102 103
      #   #    <option>Green</option><option>Blue</option></select>
      #
104
      #   select_tag "locations", "<option>Home</option><option selected='selected'>Work</option><option>Out</option>".html_safe
105 106 107
      #   # => <select id="locations" name="locations"><option>Home</option><option selected='selected'>Work</option>
      #   #    <option>Out</option></select>
      #
A
AvnerCohen 已提交
108
      #   select_tag "access", "<option>Read</option><option>Write</option>".html_safe, multiple: true, class: 'form_input'
109
      #   # => <select class="form_input" id="access" multiple="multiple" name="access[]"><option>Read</option>
110 111
      #   #    <option>Write</option></select>
      #
A
AvnerCohen 已提交
112
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: true
113 114
      #   # => <select id="people" name="people"><option value=""></option><option value="1">David</option></select>
      #
A
AvnerCohen 已提交
115
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), prompt: "Select something"
116 117
      #   # => <select id="people" name="people"><option value="">Select something</option><option value="1">David</option></select>
      #
A
AvnerCohen 已提交
118
      #   select_tag "destination", "<option>NYC</option><option>Paris</option><option>Rome</option>".html_safe, disabled: true
119 120
      #   # => <select disabled="disabled" id="destination" name="destination"><option>NYC</option>
      #   #    <option>Paris</option><option>Rome</option></select>
121 122 123 124
      #
      #   select_tag "credit_card", options_for_select([ "VISA", "MasterCard" ], "MasterCard")
      #   # => <select id="credit_card" name="credit_card"><option>VISA</option>
      #   #    <option selected="selected">MasterCard</option></select>
125
      def select_tag(name, option_tags = nil, options = {})
126
        option_tags ||= ""
127
        html_name = (options[:multiple] == true && !name.to_s.ends_with?("[]")) ? "#{name}[]" : name
128 129

        if options.delete(:include_blank)
130
          option_tags = content_tag(:option, '', :value => '').safe_concat(option_tags)
131
        end
132 133

        if prompt = options.delete(:prompt)
134
          option_tags = content_tag(:option, prompt, :value => '').safe_concat(option_tags)
135 136
        end

137
        content_tag :select, option_tags, { "name" => html_name, "id" => sanitize_to_id(name) }.update(options.stringify_keys)
138 139
      end

140 141
      # Creates a standard text field; use these text fields to input smaller chunks of text like a username
      # or a search query.
142
      #
143
      # ==== Options
144 145 146
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * <tt>:size</tt> - The number of visible characters that will fit in the input.
      # * <tt>:maxlength</tt> - The maximum number of characters that the browser will allow the user to enter.
147
      # * <tt>:placeholder</tt> - The text contained in the field by default which is removed when the field receives focus.
148
      # * Any other key creates standard HTML attributes for the tag.
149
      #
150 151 152 153 154 155 156
      # ==== Examples
      #   text_field_tag 'name'
      #   # => <input id="name" name="name" type="text" />
      #
      #   text_field_tag 'query', 'Enter your search query here'
      #   # => <input id="query" name="query" type="text" value="Enter your search query here" />
      #
A
AvnerCohen 已提交
157
      #   text_field_tag 'search', nil, placeholder: 'Enter search term...'
158 159
      #   # => <input id="search" name="search" placeholder="Enter search term..." type="text" />
      #
A
AvnerCohen 已提交
160
      #   text_field_tag 'request', nil, class: 'special_input'
161 162
      #   # => <input class="special_input" id="request" name="request" type="text" />
      #
A
AvnerCohen 已提交
163
      #   text_field_tag 'address', '', size: 75
164 165
      #   # => <input id="address" name="address" size="75" type="text" value="" />
      #
A
AvnerCohen 已提交
166
      #   text_field_tag 'zip', nil, maxlength: 5
167 168
      #   # => <input id="zip" maxlength="5" name="zip" type="text" />
      #
A
AvnerCohen 已提交
169
      #   text_field_tag 'payment_amount', '$0.00', disabled: true
170 171
      #   # => <input disabled="disabled" id="payment_amount" name="payment_amount" type="text" value="$0.00" />
      #
A
AvnerCohen 已提交
172
      #   text_field_tag 'ip', '0.0.0.0', maxlength: 15, size: 20, class: "ip-input"
173
      #   # => <input class="ip-input" id="ip" maxlength="15" name="ip" size="20" type="text" value="0.0.0.0" />
174
      def text_field_tag(name, value = nil, options = {})
175
        tag :input, { "type" => "text", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys)
176 177
      end

S
Stephen Celis 已提交
178
      # Creates a label element. Accepts a block.
179
      #
180
      # ==== Options
181 182 183 184 185 186 187
      # * Creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   label_tag 'name'
      #   # => <label for="name">Name</label>
      #
      #   label_tag 'name', 'Your name'
188
      #   # => <label for="name">Your name</label>
189
      #
A
AvnerCohen 已提交
190
      #   label_tag 'name', nil, class: 'small_label'
191
      #   # => <label for="name" class="small_label">Name</label>
192
      def label_tag(name = nil, content_or_options = nil, options = nil, &block)
S
Santiago Pastorino 已提交
193 194 195 196 197 198
        if block_given? && content_or_options.is_a?(Hash)
          options = content_or_options = content_or_options.stringify_keys
        else
          options ||= {}
          options = options.stringify_keys
        end
S
Stephen Celis 已提交
199
        options["for"] = sanitize_to_id(name) unless name.blank? || options.has_key?("for")
S
Santiago Pastorino 已提交
200
        content_tag :label, content_or_options || name.to_s.humanize, options, &block
201 202
      end

203 204 205 206 207 208 209 210 211
      # Creates a hidden form input field used to transmit data that would be lost due to HTTP's statelessness or
      # data that should be hidden from the user.
      #
      # ==== Options
      # * Creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   hidden_field_tag 'tags_list'
      #   # => <input id="tags_list" name="tags_list" type="hidden" />
212
      #
213 214 215
      #   hidden_field_tag 'token', 'VUBJKB23UIVI1UU1VOBVI@'
      #   # => <input id="token" name="token" type="hidden" value="VUBJKB23UIVI1UU1VOBVI@" />
      #
A
AvnerCohen 已提交
216
      #   hidden_field_tag 'collected_input', '', onchange: "alert('Input collected!')"
217
      #   # => <input id="collected_input" name="collected_input" onchange="alert('Input collected!')"
218
      #   #    type="hidden" value="" />
219
      def hidden_field_tag(name, value = nil, options = {})
220
        text_field_tag(name, value, options.stringify_keys.update("type" => "hidden"))
221 222
      end

223
      # Creates a file upload field. If you are using file uploads then you will also need
224
      # to set the multipart option for the form tag:
225
      #
A
AvnerCohen 已提交
226
      #   <%= form_tag '/upload', multipart: true do %>
227 228
      #     <label for="file">File to Upload</label> <%= file_field_tag "file" %>
      #     <%= submit_tag %>
P
Pratik Naik 已提交
229
      #   <% end %>
230
      #
231
      # The specified URL will then be passed a File object containing the selected file, or if the field
232
      # was left blank, a StringIO object.
233 234 235 236
      #
      # ==== Options
      # * Creates standard HTML attributes for the tag.
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
237 238
      # * <tt>:multiple</tt> - If set to true, *in most updated browsers* the user will be allowed to select multiple files.
      # * <tt>:accept</tt> - If set to one or multiple mime-types, the user will be suggested a filter when choosing a file. You still need to set up model validations.
239 240 241 242 243
      #
      # ==== Examples
      #   file_field_tag 'attachment'
      #   # => <input id="attachment" name="attachment" type="file" />
      #
A
AvnerCohen 已提交
244
      #   file_field_tag 'avatar', class: 'profile_input'
245
      #   # => <input class="profile_input" id="avatar" name="avatar" type="file" />
246
      #
A
AvnerCohen 已提交
247
      #   file_field_tag 'picture', disabled: true
248 249
      #   # => <input disabled="disabled" id="picture" name="picture" type="file" />
      #
A
AvnerCohen 已提交
250
      #   file_field_tag 'resume', value: '~/resume.doc'
251 252
      #   # => <input id="resume" name="resume" type="file" value="~/resume.doc" />
      #
A
AvnerCohen 已提交
253
      #   file_field_tag 'user_pic', accept: 'image/png,image/gif,image/jpeg'
254
      #   # => <input accept="image/png,image/gif,image/jpeg" id="user_pic" name="user_pic" type="file" />
255
      #
A
AvnerCohen 已提交
256
      #   file_field_tag 'file', accept: 'text/html', class: 'upload', value: 'index.html'
257
      #   # => <input accept="text/html" class="upload" id="file" name="file" type="file" value="index.html" />
258
      def file_field_tag(name, options = {})
259
        text_field_tag(name, nil, options.update("type" => "file"))
260 261
      end

262
      # Creates a password field, a masked text field that will hide the users input behind a mask character.
263
      #
264 265 266 267 268 269 270 271 272 273 274 275 276
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * <tt>:size</tt> - The number of visible characters that will fit in the input.
      # * <tt>:maxlength</tt> - The maximum number of characters that the browser will allow the user to enter.
      # * Any other key creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   password_field_tag 'pass'
      #   # => <input id="pass" name="pass" type="password" />
      #
      #   password_field_tag 'secret', 'Your secret here'
      #   # => <input id="secret" name="secret" type="password" value="Your secret here" />
      #
A
AvnerCohen 已提交
277
      #   password_field_tag 'masked', nil, class: 'masked_input_field'
278 279
      #   # => <input class="masked_input_field" id="masked" name="masked" type="password" />
      #
A
AvnerCohen 已提交
280
      #   password_field_tag 'token', '', size: 15
281 282
      #   # => <input id="token" name="token" size="15" type="password" value="" />
      #
A
AvnerCohen 已提交
283
      #   password_field_tag 'key', nil, maxlength: 16
284 285
      #   # => <input id="key" maxlength="16" name="key" type="password" />
      #
A
AvnerCohen 已提交
286
      #   password_field_tag 'confirm_pass', nil, disabled: true
287 288
      #   # => <input disabled="disabled" id="confirm_pass" name="confirm_pass" type="password" />
      #
A
AvnerCohen 已提交
289
      #   password_field_tag 'pin', '1234', maxlength: 4, size: 6, class: "pin_input"
290
      #   # => <input class="pin_input" id="pin" maxlength="4" name="pin" size="6" type="password" value="1234" />
291
      def password_field_tag(name = "password", value = nil, options = {})
292
        text_field_tag(name, value, options.update("type" => "password"))
293 294
      end

295 296 297
      # Creates a text input area; use a textarea for longer text inputs such as blog posts or descriptions.
      #
      # ==== Options
298
      # * <tt>:size</tt> - A string specifying the dimensions (columns by rows) of the textarea (e.g., "25x10").
299 300 301
      # * <tt>:rows</tt> - Specify the number of rows in the textarea
      # * <tt>:cols</tt> - Specify the number of columns in the textarea
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
302 303
      # * <tt>:escape</tt> - By default, the contents of the text input are HTML escaped.
      #   If you need unescaped contents, set this to false.
304 305 306 307 308 309 310 311
      # * Any other key creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   text_area_tag 'post'
      #   # => <textarea id="post" name="post"></textarea>
      #
      #   text_area_tag 'bio', @user.bio
      #   # => <textarea id="bio" name="bio">This is my biography.</textarea>
312
      #
A
AvnerCohen 已提交
313
      #   text_area_tag 'body', nil, rows: 10, cols: 25
314 315
      #   # => <textarea cols="25" id="body" name="body" rows="10"></textarea>
      #
A
AvnerCohen 已提交
316
      #   text_area_tag 'body', nil, size: "25x10"
317 318
      #   # => <textarea name="body" id="body" cols="25" rows="10"></textarea>
      #
A
AvnerCohen 已提交
319
      #   text_area_tag 'description', "Description goes here.", disabled: true
320 321
      #   # => <textarea disabled="disabled" id="description" name="description">Description goes here.</textarea>
      #
A
AvnerCohen 已提交
322
      #   text_area_tag 'comment', nil, class: 'comment_input'
323
      #   # => <textarea class="comment_input" id="comment" name="comment"></textarea>
324
      def text_area_tag(name, content = nil, options = {})
325
        options = options.stringify_keys
326

327 328 329
        if size = options.delete("size")
          options["cols"], options["rows"] = size.split("x") if size.respond_to?(:split)
        end
330

331
        escape = options.delete("escape") { true }
332
        content = ERB::Util.html_escape(content) if escape
333

334
        content_tag :textarea, content.to_s.html_safe, { "name" => name, "id" => sanitize_to_id(name) }.update(options)
335 336
      end

337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352
      # Creates a check box form input tag.
      #
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML options for the tag.
      #
      # ==== Examples
      #   check_box_tag 'accept'
      #   # => <input id="accept" name="accept" type="checkbox" value="1" />
      #
      #   check_box_tag 'rock', 'rock music'
      #   # => <input id="rock" name="rock" type="checkbox" value="rock music" />
      #
      #   check_box_tag 'receive_email', 'yes', true
      #   # => <input checked="checked" id="receive_email" name="receive_email" type="checkbox" value="yes" />
      #
A
AvnerCohen 已提交
353
      #   check_box_tag 'tos', 'yes', false, class: 'accept_tos'
354 355
      #   # => <input class="accept_tos" id="tos" name="tos" type="checkbox" value="yes" />
      #
A
AvnerCohen 已提交
356
      #   check_box_tag 'eula', 'accepted', false, disabled: true
357
      #   # => <input disabled="disabled" id="eula" name="eula" type="checkbox" value="accepted" />
358
      def check_box_tag(name, value = "1", checked = false, options = {})
359
        html_options = { "type" => "checkbox", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys)
360
        html_options["checked"] = "checked" if checked
361
        tag :input, html_options
362 363
      end

364
      # Creates a radio button; use groups of radio buttons named the same to allow users to
365 366 367 368 369 370 371 372 373 374 375 376 377
      # select from a group of options.
      #
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML options for the tag.
      #
      # ==== Examples
      #   radio_button_tag 'gender', 'male'
      #   # => <input id="gender_male" name="gender" type="radio" value="male" />
      #
      #   radio_button_tag 'receive_updates', 'no', true
      #   # => <input checked="checked" id="receive_updates_no" name="receive_updates" type="radio" value="no" />
      #
A
AvnerCohen 已提交
378
      #   radio_button_tag 'time_slot', "3:00 p.m.", false, disabled: true
379 380
      #   # => <input disabled="disabled" id="time_slot_300_pm" name="time_slot" type="radio" value="3:00 p.m." />
      #
A
AvnerCohen 已提交
381
      #   radio_button_tag 'color', "green", true, class: "color_input"
382
      #   # => <input checked="checked" class="color_input" id="color_green" name="color" type="radio" value="green" />
383
      def radio_button_tag(name, value, checked = false, options = {})
384
        html_options = { "type" => "radio", "name" => name, "id" => "#{sanitize_to_id(name)}_#{sanitize_to_id(value)}", "value" => value }.update(options.stringify_keys)
385
        html_options["checked"] = "checked" if checked
386
        tag :input, html_options
387 388
      end

389
      # Creates a submit button with the text <tt>value</tt> as the caption.
390 391
      #
      # ==== Options
392
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
P
Pratik Naik 已提交
393
      # * <tt>:disabled</tt> - If true, the user will not be able to use this input.
394 395
      # * Any other key creates standard HTML options for the tag.
      #
396 397
      # ==== Data attributes
      #
A
AvnerCohen 已提交
398
      # * <tt>confirm: 'question?'</tt> - If present the unobtrusive JavaScript
399 400
      #   drivers will provide a prompt with the question specified. If the user accepts,
      #   the form is processed normally, otherwise no action is taken.
401 402 403
      # * <tt>:disable_with</tt> - Value of this parameter will be used as the value for a
      #   disabled version of the submit button when the form is submitted. This feature is
      #   provided by the unobtrusive JavaScript driver.
404
      #
405 406 407 408 409 410 411
      # ==== Examples
      #   submit_tag
      #   # => <input name="commit" type="submit" value="Save changes" />
      #
      #   submit_tag "Edit this article"
      #   # => <input name="commit" type="submit" value="Edit this article" />
      #
A
AvnerCohen 已提交
412
      #   submit_tag "Save edits", disabled: true
413 414
      #   # => <input disabled="disabled" name="commit" type="submit" value="Save edits" />
      #
A
AvnerCohen 已提交
415
      #   submit_tag "Complete sale", data: { disable_with: "Please wait..." }
V
Vijay Dev 已提交
416
      #   # => <input name="commit" data-disable-with="Please wait..." type="submit" value="Complete sale" />
417
      #
A
AvnerCohen 已提交
418
      #   submit_tag nil, class: "form_submit"
419 420
      #   # => <input class="form_submit" name="commit" type="submit" />
      #
A
AvnerCohen 已提交
421
      #   submit_tag "Edit", class: "edit_button"
422
      #   # => <input class="edit_button" name="commit" type="submit" value="Edit" />
S
Stefan Penner 已提交
423
      #
A
AvnerCohen 已提交
424
      #   submit_tag "Save", data: { confirm: "Are you sure?" }
V
Vijay Dev 已提交
425
      #   # => <input name='commit' type='submit' value='Save' data-confirm="Are you sure?" />
S
Stefan Penner 已提交
426
      #
427
      def submit_tag(value = "Save changes", options = {})
428
        options = options.stringify_keys
429

430
        tag :input, { "type" => "submit", "name" => "commit", "value" => value }.update(options)
431
      end
432

R
Rizwan Reza 已提交
433 434 435 436
      # Creates a button element that defines a <tt>submit</tt> button,
      # <tt>reset</tt>button or a generic button which can be used in
      # JavaScript, for example. You can use the button tag as a regular
      # submit tag but it isn't supported in legacy browsers. However,
437 438
      # the button tag allows richer labels such as images and emphasis,
      # so this helper will also accept a block.
R
Rizwan Reza 已提交
439 440
      #
      # ==== Options
441
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
R
Rizwan Reza 已提交
442 443 444 445
      # * <tt>:disabled</tt> - If true, the user will not be able to
      #   use this input.
      # * Any other key creates standard HTML options for the tag.
      #
446 447
      # ==== Data attributes
      #
A
AvnerCohen 已提交
448
      # * <tt>confirm: 'question?'</tt> - If present, the
449 450 451
      #   unobtrusive JavaScript drivers will provide a prompt with
      #   the question specified. If the user accepts, the form is
      #   processed normally, otherwise no action is taken.
452 453 454 455
      # * <tt>:disable_with</tt> - Value of this parameter will be
      #   used as the value for a disabled version of the submit
      #   button when the form is submitted. This feature is provided
      #   by the unobtrusive JavaScript driver.
456
      #
R
Rizwan Reza 已提交
457 458
      # ==== Examples
      #   button_tag
459
      #   # => <button name="button" type="submit">Button</button>
R
Rizwan Reza 已提交
460
      #
A
AvnerCohen 已提交
461
      #   button_tag(type: 'button') do
462 463
      #     content_tag(:strong, 'Ask me!')
      #   end
R
Rizwan Reza 已提交
464
      #   # => <button name="button" type="button">
465 466
      #   #     <strong>Ask me!</strong>
      #   #    </button>
R
Rizwan Reza 已提交
467
      #
468
      #   button_tag "Checkout", data: { disable_with: "Please wait..." }
469 470
      #   # => <button data-disable-with="Please wait..." name="button" type="submit">Checkout</button>
      #
471
      def button_tag(content_or_options = nil, options = nil, &block)
472
        if content_or_options.is_a? Hash
473
          options = content_or_options
474 475
        else
          options ||= {}
476 477
        end

478
        options = { 'name' => 'button', 'type' => 'submit' }.merge!(options.stringify_keys)
479 480 481 482 483 484

        if block_given?
          content_tag :button, options, &block
        else
          content_tag :button, content_or_options || 'Button', options
        end
R
Rizwan Reza 已提交
485 486
      end

487 488
      # Displays an image which when clicked will submit the form.
      #
489
      # <tt>source</tt> is passed to AssetTagHelper#path_to_image
490 491
      #
      # ==== Options
492
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
493 494 495
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML options for the tag.
      #
496 497
      # ==== Data attributes
      #
A
AvnerCohen 已提交
498
      # * <tt>confirm: 'question?'</tt> - This will add a JavaScript confirm
499 500 501
      #   prompt with the question specified. If the user accepts, the form is
      #   processed normally, otherwise no action is taken.
      #
502 503
      # ==== Examples
      #   image_submit_tag("login.png")
504
      #   # => <input alt="Login" src="/images/login.png" type="image" />
505
      #
A
AvnerCohen 已提交
506
      #   image_submit_tag("purchase.png", disabled: true)
507
      #   # => <input alt="Purchase" disabled="disabled" src="/images/purchase.png" type="image" />
508
      #
509 510
      #   image_submit_tag("search.png", class: 'search_button', alt: 'Find')
      #   # => <input alt="Find" class="search_button" src="/images/search.png" type="image" />
511
      #
A
AvnerCohen 已提交
512
      #   image_submit_tag("agree.png", disabled: true, class: "agree_disagree_button")
513
      #   # => <input alt="Agree" class="agree_disagree_button" disabled="disabled" src="/images/agree.png" type="image" />
514
      #
A
AvnerCohen 已提交
515
      #   image_submit_tag("save.png", data: { confirm: "Are you sure?" })
516
      #   # => <input alt="Save" src="/images/save.png" data-confirm="Are you sure?" type="image" />
517
      def image_submit_tag(source, options = {})
518
        options = options.stringify_keys
519
        tag :input, { "alt" => image_alt(source), "type" => "image", "src" => path_to_image(source) }.update(options)
520
      end
521 522 523 524

      # Creates a field set for grouping HTML form elements.
      #
      # <tt>legend</tt> will become the fieldset's title (optional as per W3C).
A
Andrew Kaspick 已提交
525
      # <tt>options</tt> accept the same values as tag.
526
      #
L
lifo 已提交
527
      # ==== Examples
528
      #   <%= field_set_tag do %>
529 530 531 532
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset><p><input id="name" name="name" type="text" /></p></fieldset>
      #
533
      #   <%= field_set_tag 'Your details' do %>
534 535 536
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset><legend>Your details</legend><p><input id="name" name="name" type="text" /></p></fieldset>
A
Andrew Kaspick 已提交
537
      #
A
AvnerCohen 已提交
538
      #   <%= field_set_tag nil, class: 'format' do %>
A
Andrew Kaspick 已提交
539 540 541 542
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset class="format"><p><input id="name" name="name" type="text" /></p></fieldset>
      def field_set_tag(legend = nil, options = nil, &block)
W
wycats 已提交
543 544
        output = tag(:fieldset, options, true)
        output.safe_concat(content_tag(:legend, legend)) unless legend.blank?
545
        output.concat(capture(&block)) if block_given?
W
wycats 已提交
546
        output.safe_concat("</fieldset>")
547
      end
548

549 550 551 552 553 554 555 556
      # Creates a text field of type "color".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
      def color_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "color"))
      end

557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573
      # Creates a text field of type "search".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
      def search_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "search"))
      end

      # Creates a text field of type "tel".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
      def telephone_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "tel"))
      end
      alias phone_field_tag telephone_field_tag

574 575 576 577 578 579 580 581
      # Creates a text field of type "date".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
      def date_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "date"))
      end

582 583 584 585 586 587 588 589 590 591 592
      # Creates a text field of type "time".
      #
      # === Options
      # * <tt>:min</tt> - The minimum acceptable value.
      # * <tt>:max</tt> - The maximum acceptable value.
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      def time_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "time"))
      end

C
Carlos Galdino 已提交
593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636
      # Creates a text field of type "datetime".
      #
      # === Options
      # * <tt>:min</tt> - The minimum acceptable value.
      # * <tt>:max</tt> - The maximum acceptable value.
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      def datetime_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "datetime"))
      end

      # Creates a text field of type "datetime-local".
      #
      # === Options
      # * <tt>:min</tt> - The minimum acceptable value.
      # * <tt>:max</tt> - The maximum acceptable value.
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      def datetime_local_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "datetime-local"))
      end

      # Creates a text field of type "month".
      #
      # === Options
      # * <tt>:min</tt> - The minimum acceptable value.
      # * <tt>:max</tt> - The maximum acceptable value.
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      def month_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "month"))
      end

      # Creates a text field of type "week".
      #
      # === Options
      # * <tt>:min</tt> - The minimum acceptable value.
      # * <tt>:max</tt> - The maximum acceptable value.
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      def week_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "week"))
      end

637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663
      # Creates a text field of type "url".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
      def url_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "url"))
      end

      # Creates a text field of type "email".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
      def email_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "email"))
      end

      # Creates a number field.
      #
      # ==== Options
      # * <tt>:min</tt> - The minimum acceptable value.
      # * <tt>:max</tt> - The maximum acceptable value.
      # * <tt>:in</tt> - A range specifying the <tt>:min</tt> and
      #   <tt>:max</tt> values.
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      #
      # ==== Examples
A
AvnerCohen 已提交
664
      #   number_field_tag 'quantity', nil, in: 1...10
665
      #   # => <input id="quantity" name="quantity" min="1" max="9" type="number" />
666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681
      def number_field_tag(name, value = nil, options = {})
        options = options.stringify_keys
        options["type"] ||= "number"
        if range = options.delete("in") || options.delete("within")
          options.update("min" => range.min, "max" => range.max)
        end
        text_field_tag(name, value, options)
      end

      # Creates a range form element.
      #
      # ==== Options
      # * Accepts the same options as number_field_tag.
      def range_field_tag(name, value = nil, options = {})
        number_field_tag(name, value, options.stringify_keys.update("type" => "range"))
      end
682

683
      # Creates the hidden UTF8 enforcer tag. Override this method in a helper
684
      # to customize the tag.
685
      def utf8_enforcer_tag
686
        tag(:input, :type => "hidden", :name => "utf8", :value => "&#x2713;".html_safe)
687 688
      end

689
      private
690
        def html_options_for_form(url_for_options, options)
S
Santiago Pastorino 已提交
691
          options.stringify_keys.tap do |html_options|
692
            html_options["enctype"] = "multipart/form-data" if html_options.delete("multipart")
693
            # The following URL is unescaped, this is just a hash of options, and it is the
R
R.T. Lechow 已提交
694
            # responsibility of the caller to escape all the values.
695
            html_options["action"]  = url_for(url_for_options)
W
wycats 已提交
696
            html_options["accept-charset"] = "UTF-8"
697

698
            html_options["data-remote"] = true if html_options.delete("remote")
699

700 701
            if html_options["data-remote"] &&
               !embed_authenticity_token_in_remote_forms &&
702
               html_options["authenticity_token"].blank?
703 704 705
              # The authenticity token is taken from the meta tag in this case
              html_options["authenticity_token"] = false
            elsif html_options["authenticity_token"] == true
706 707 708
              # Include the default authenticity_token, which is only generated when its set to nil,
              # but we needed the true value to override the default of no authenticity_token on data-remote.
              html_options["authenticity_token"] = nil
709
            end
710 711
          end
        end
712

713
        def extra_tags_for_form(html_options)
714
          authenticity_token = html_options.delete("authenticity_token")
W
wycats 已提交
715 716 717
          method = html_options.delete("method").to_s

          method_tag = case method
718
            when /^get$/i # must be case-insensitive, but can't use downcase as might be nil
719 720 721 722
              html_options["method"] = "get"
              ''
            when /^post$/i, "", nil
              html_options["method"] = "post"
723
              token_tag(authenticity_token)
724 725
            else
              html_options["method"] = "post"
R
Rafael Mendonça França 已提交
726
              method_tag(method) + token_tag(authenticity_token)
727
          end
W
wycats 已提交
728

729 730
          enforce_utf8 = html_options.delete("enforce_utf8") { true }
          tags = (enforce_utf8 ? utf8_enforcer_tag : ''.html_safe) << method_tag
731
          content_tag(:div, tags, :style => 'display:none')
732
        end
733

734 735
        def form_tag_html(html_options)
          extra_tags = extra_tags_for_form(html_options)
736
          tag(:form, html_options, true) + extra_tags
737
        end
738

739 740
        def form_tag_in_block(html_options, &block)
          content = capture(&block)
741
          output = form_tag_html(html_options)
W
wycats 已提交
742 743
          output << content
          output.safe_concat("</form>")
744
        end
745

746 747
        # see http://www.w3.org/TR/html4/types.html#type-name
        def sanitize_to_id(name)
748
          name.to_s.delete(']').gsub(/[^-a-zA-Z0-9:.]/, "_")
749
        end
750 751 752
    end
  end
end