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)
S
Sergey Prikhodko 已提交
472 473 474
        options = content_or_options.is_a?(Hash) ? content_or_options : options
        options = button_tag_options_with_defaults(options)
        content_tag :button, content_or_options || 'Button', options, &block
R
Rizwan Reza 已提交
475 476
      end

477 478
      # Displays an image which when clicked will submit the form.
      #
479
      # <tt>source</tt> is passed to AssetTagHelper#path_to_image
480 481
      #
      # ==== Options
482
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
483 484 485
      # * <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.
      #
486 487
      # ==== Data attributes
      #
A
AvnerCohen 已提交
488
      # * <tt>confirm: 'question?'</tt> - This will add a JavaScript confirm
489 490 491
      #   prompt with the question specified. If the user accepts, the form is
      #   processed normally, otherwise no action is taken.
      #
492 493
      # ==== Examples
      #   image_submit_tag("login.png")
494
      #   # => <input alt="Login" src="/images/login.png" type="image" />
495
      #
A
AvnerCohen 已提交
496
      #   image_submit_tag("purchase.png", disabled: true)
497
      #   # => <input alt="Purchase" disabled="disabled" src="/images/purchase.png" type="image" />
498
      #
499 500
      #   image_submit_tag("search.png", class: 'search_button', alt: 'Find')
      #   # => <input alt="Find" class="search_button" src="/images/search.png" type="image" />
501
      #
A
AvnerCohen 已提交
502
      #   image_submit_tag("agree.png", disabled: true, class: "agree_disagree_button")
503
      #   # => <input alt="Agree" class="agree_disagree_button" disabled="disabled" src="/images/agree.png" type="image" />
504
      #
A
AvnerCohen 已提交
505
      #   image_submit_tag("save.png", data: { confirm: "Are you sure?" })
506
      #   # => <input alt="Save" src="/images/save.png" data-confirm="Are you sure?" type="image" />
507
      def image_submit_tag(source, options = {})
508
        options = options.stringify_keys
509
        tag :input, { "alt" => image_alt(source), "type" => "image", "src" => path_to_image(source) }.update(options)
510
      end
511 512 513 514

      # 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 已提交
515
      # <tt>options</tt> accept the same values as tag.
516
      #
L
lifo 已提交
517
      # ==== Examples
518
      #   <%= field_set_tag do %>
519 520 521 522
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset><p><input id="name" name="name" type="text" /></p></fieldset>
      #
523
      #   <%= field_set_tag 'Your details' do %>
524 525 526
      #     <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 已提交
527
      #
A
AvnerCohen 已提交
528
      #   <%= field_set_tag nil, class: 'format' do %>
A
Andrew Kaspick 已提交
529 530 531 532
      #     <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 已提交
533 534
        output = tag(:fieldset, options, true)
        output.safe_concat(content_tag(:legend, legend)) unless legend.blank?
535
        output.concat(capture(&block)) if block_given?
W
wycats 已提交
536
        output.safe_concat("</fieldset>")
537
      end
538

539 540 541 542 543 544 545 546
      # 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

547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563
      # 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

564 565 566 567 568 569 570 571
      # 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

572 573 574 575 576 577 578 579 580 581 582
      # 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 已提交
583 584 585 586 587 588 589 590 591 592 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
      # 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

627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653
      # 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 已提交
654
      #   number_field_tag 'quantity', nil, in: 1...10
655
      #   # => <input id="quantity" name="quantity" min="1" max="9" type="number" />
656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671
      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
672

673
      # Creates the hidden UTF8 enforcer tag. Override this method in a helper
674
      # to customize the tag.
675
      def utf8_enforcer_tag
676
        tag(:input, :type => "hidden", :name => "utf8", :value => "&#x2713;".html_safe)
677 678
      end

679
      private
680
        def html_options_for_form(url_for_options, options)
S
Santiago Pastorino 已提交
681
          options.stringify_keys.tap do |html_options|
682
            html_options["enctype"] = "multipart/form-data" if html_options.delete("multipart")
683
            # The following URL is unescaped, this is just a hash of options, and it is the
R
R.T. Lechow 已提交
684
            # responsibility of the caller to escape all the values.
685
            html_options["action"]  = url_for(url_for_options)
W
wycats 已提交
686
            html_options["accept-charset"] = "UTF-8"
687

688
            html_options["data-remote"] = true if html_options.delete("remote")
689

690 691
            if html_options["data-remote"] &&
               !embed_authenticity_token_in_remote_forms &&
692
               html_options["authenticity_token"].blank?
693 694 695
              # The authenticity token is taken from the meta tag in this case
              html_options["authenticity_token"] = false
            elsif html_options["authenticity_token"] == true
696 697 698
              # 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
699
            end
700 701
          end
        end
702

703
        def extra_tags_for_form(html_options)
704
          authenticity_token = html_options.delete("authenticity_token")
W
wycats 已提交
705 706 707
          method = html_options.delete("method").to_s

          method_tag = case method
708
            when /^get$/i # must be case-insensitive, but can't use downcase as might be nil
709 710 711 712
              html_options["method"] = "get"
              ''
            when /^post$/i, "", nil
              html_options["method"] = "post"
713
              token_tag(authenticity_token)
714 715
            else
              html_options["method"] = "post"
R
Rafael Mendonça França 已提交
716
              method_tag(method) + token_tag(authenticity_token)
717
          end
W
wycats 已提交
718

719 720
          enforce_utf8 = html_options.delete("enforce_utf8") { true }
          tags = (enforce_utf8 ? utf8_enforcer_tag : ''.html_safe) << method_tag
721
          content_tag(:div, tags, :style => 'display:none')
722
        end
723

724 725
        def form_tag_html(html_options)
          extra_tags = extra_tags_for_form(html_options)
726
          tag(:form, html_options, true) + extra_tags
727
        end
728

729 730
        def form_tag_in_block(html_options, &block)
          content = capture(&block)
731
          output = form_tag_html(html_options)
W
wycats 已提交
732 733
          output << content
          output.safe_concat("</form>")
734
        end
735

736 737
        # see http://www.w3.org/TR/html4/types.html#type-name
        def sanitize_to_id(name)
738
          name.to_s.delete(']').gsub(/[^-a-zA-Z0-9:.]/, "_")
739
        end
740

S
Sergey Prikhodko 已提交
741 742
        def button_tag_options_with_defaults(options)
          options = options || {}
743
          options = options.stringify_keys
S
Sergey Prikhodko 已提交
744 745 746

          default_options = { 'name' => 'button', 'type' => 'submit' }
          options.reverse_merge default_options
747
        end
748 749 750
    end
  end
end