form_tag_helper.rb 42.6 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
      # * <tt>:remote</tt> - If set to true, will allow the Unobtrusive JavaScript drivers to control the
39
      #   submit behavior. By default this behavior is an ajax submit.
40
      # * <tt>:enforce_utf8</tt> - If set to false, a hidden input with name utf8 is not output.
41
      # * Any other key creates standard HTML attributes for the tag.
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_with_body(html_options, capture(&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
      # associated records. <tt>option_tags</tt> is a string containing the option tags for the select box.
      #
      # ==== Options
Y
yui-knk 已提交
83
      # * <tt>:multiple</tt> - If set to true, the selection will allow multiple choices.
84
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
85
      # * <tt>:include_blank</tt> - If set to true, an empty option will be created. If set to a string, the string will be used as the option's content and the value will be empty.
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", options_from_collection_for_select(@people, "id", "name", "1")
94 95
      #   # <select id="people" name="people"><option value="1" selected="selected">David</option></select>
      #
96
      #   select_tag "people", "<option>David</option>".html_safe
97
      #   # => <select id="people" name="people"><option>David</option></select>
98
      #
99
      #   select_tag "count", "<option>1</option><option>2</option><option>3</option><option>4</option>".html_safe
100 101 102
      #   # => <select id="count" name="count"><option>1</option><option>2</option>
      #   #    <option>3</option><option>4</option></select>
      #
A
AvnerCohen 已提交
103
      #   select_tag "colors", "<option>Red</option><option>Green</option><option>Blue</option>".html_safe, multiple: true
104
      #   # => <select id="colors" multiple="multiple" name="colors[]"><option>Red</option>
105 106
      #   #    <option>Green</option><option>Blue</option></select>
      #
107
      #   select_tag "locations", "<option>Home</option><option selected='selected'>Work</option><option>Out</option>".html_safe
108 109 110
      #   # => <select id="locations" name="locations"><option>Home</option><option selected='selected'>Work</option>
      #   #    <option>Out</option></select>
      #
111 112
      #   select_tag "access", "<option>Read</option><option>Write</option>".html_safe, multiple: true, class: 'form_input', id: 'unique_id'
      #   # => <select class="form_input" id="unique_id" multiple="multiple" name="access[]"><option>Read</option>
113 114
      #   #    <option>Write</option></select>
      #
A
AvnerCohen 已提交
115
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: true
116 117
      #   # => <select id="people" name="people"><option value=""></option><option value="1">David</option></select>
      #
118 119 120
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: "All"
      #   # => <select id="people" name="people"><option value="">All</option><option value="1">David</option></select>
      #
A
AvnerCohen 已提交
121
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), prompt: "Select something"
122 123
      #   # => <select id="people" name="people"><option value="">Select something</option><option value="1">David</option></select>
      #
A
AvnerCohen 已提交
124
      #   select_tag "destination", "<option>NYC</option><option>Paris</option><option>Rome</option>".html_safe, disabled: true
125 126
      #   # => <select disabled="disabled" id="destination" name="destination"><option>NYC</option>
      #   #    <option>Paris</option><option>Rome</option></select>
127 128 129 130
      #
      #   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>
131
      def select_tag(name, option_tags = nil, options = {})
132
        option_tags ||= ""
133
        html_name = (options[:multiple] == true && !name.to_s.ends_with?("[]")) ? "#{name}[]" : name
134

135 136
        if options.include?(:include_blank)
          include_blank = options.delete(:include_blank)
R
Rafael Mendonça França 已提交
137

138 139 140
          if include_blank == true
            include_blank = ''
          end
R
Rafael Mendonça França 已提交
141

142
          if include_blank
143
            option_tags = content_tag("option".freeze, include_blank, value: '').safe_concat(option_tags)
144
          end
145
        end
146 147

        if prompt = options.delete(:prompt)
148
          option_tags = content_tag("option".freeze, prompt, value: '').safe_concat(option_tags)
149 150
        end

151
        content_tag "select".freeze, option_tags, { "name" => html_name, "id" => sanitize_to_id(name) }.update(options.stringify_keys)
152 153
      end

154 155
      # Creates a standard text field; use these text fields to input smaller chunks of text like a username
      # or a search query.
156
      #
157
      # ==== Options
158 159 160
      # * <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.
161
      # * <tt>:placeholder</tt> - The text contained in the field by default which is removed when the field receives focus.
162
      # * Any other key creates standard HTML attributes for the tag.
163
      #
164 165 166 167 168 169 170
      # ==== 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 已提交
171
      #   text_field_tag 'search', nil, placeholder: 'Enter search term...'
172 173
      #   # => <input id="search" name="search" placeholder="Enter search term..." type="text" />
      #
A
AvnerCohen 已提交
174
      #   text_field_tag 'request', nil, class: 'special_input'
175 176
      #   # => <input class="special_input" id="request" name="request" type="text" />
      #
A
AvnerCohen 已提交
177
      #   text_field_tag 'address', '', size: 75
178 179
      #   # => <input id="address" name="address" size="75" type="text" value="" />
      #
A
AvnerCohen 已提交
180
      #   text_field_tag 'zip', nil, maxlength: 5
181 182
      #   # => <input id="zip" maxlength="5" name="zip" type="text" />
      #
A
AvnerCohen 已提交
183
      #   text_field_tag 'payment_amount', '$0.00', disabled: true
184 185
      #   # => <input disabled="disabled" id="payment_amount" name="payment_amount" type="text" value="$0.00" />
      #
A
AvnerCohen 已提交
186
      #   text_field_tag 'ip', '0.0.0.0', maxlength: 15, size: 20, class: "ip-input"
187
      #   # => <input class="ip-input" id="ip" maxlength="15" name="ip" size="20" type="text" value="0.0.0.0" />
188
      def text_field_tag(name, value = nil, options = {})
189
        tag :input, { "type" => "text", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys)
190 191
      end

S
Stephen Celis 已提交
192
      # Creates a label element. Accepts a block.
193
      #
194
      # ==== Options
195 196 197 198 199 200 201
      # * Creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   label_tag 'name'
      #   # => <label for="name">Name</label>
      #
      #   label_tag 'name', 'Your name'
202
      #   # => <label for="name">Your name</label>
203
      #
A
AvnerCohen 已提交
204
      #   label_tag 'name', nil, class: 'small_label'
205
      #   # => <label for="name" class="small_label">Name</label>
206
      def label_tag(name = nil, content_or_options = nil, options = nil, &block)
S
Santiago Pastorino 已提交
207 208 209 210 211 212
        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 已提交
213
        options["for"] = sanitize_to_id(name) unless name.blank? || options.has_key?("for")
S
Santiago Pastorino 已提交
214
        content_tag :label, content_or_options || name.to_s.humanize, options, &block
215 216
      end

217 218 219 220 221 222 223 224 225
      # 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" />
226
      #
227 228 229
      #   hidden_field_tag 'token', 'VUBJKB23UIVI1UU1VOBVI@'
      #   # => <input id="token" name="token" type="hidden" value="VUBJKB23UIVI1UU1VOBVI@" />
      #
A
AvnerCohen 已提交
230
      #   hidden_field_tag 'collected_input', '', onchange: "alert('Input collected!')"
231
      #   # => <input id="collected_input" name="collected_input" onchange="alert('Input collected!')"
232
      #   #    type="hidden" value="" />
233
      def hidden_field_tag(name, value = nil, options = {})
234
        text_field_tag(name, value, options.merge(type: :hidden))
235 236
      end

237
      # Creates a file upload field. If you are using file uploads then you will also need
238
      # to set the multipart option for the form tag:
239
      #
A
AvnerCohen 已提交
240
      #   <%= form_tag '/upload', multipart: true do %>
241 242
      #     <label for="file">File to Upload</label> <%= file_field_tag "file" %>
      #     <%= submit_tag %>
P
Pratik Naik 已提交
243
      #   <% end %>
244
      #
245
      # The specified URL will then be passed a File object containing the selected file, or if the field
246
      # was left blank, a StringIO object.
247 248 249 250
      #
      # ==== 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.
251 252
      # * <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.
253 254 255 256 257
      #
      # ==== Examples
      #   file_field_tag 'attachment'
      #   # => <input id="attachment" name="attachment" type="file" />
      #
A
AvnerCohen 已提交
258
      #   file_field_tag 'avatar', class: 'profile_input'
259
      #   # => <input class="profile_input" id="avatar" name="avatar" type="file" />
260
      #
A
AvnerCohen 已提交
261
      #   file_field_tag 'picture', disabled: true
262 263
      #   # => <input disabled="disabled" id="picture" name="picture" type="file" />
      #
A
AvnerCohen 已提交
264
      #   file_field_tag 'resume', value: '~/resume.doc'
265 266
      #   # => <input id="resume" name="resume" type="file" value="~/resume.doc" />
      #
A
AvnerCohen 已提交
267
      #   file_field_tag 'user_pic', accept: 'image/png,image/gif,image/jpeg'
268
      #   # => <input accept="image/png,image/gif,image/jpeg" id="user_pic" name="user_pic" type="file" />
269
      #
A
AvnerCohen 已提交
270
      #   file_field_tag 'file', accept: 'text/html', class: 'upload', value: 'index.html'
271
      #   # => <input accept="text/html" class="upload" id="file" name="file" type="file" value="index.html" />
272
      def file_field_tag(name, options = {})
273
        text_field_tag(name, nil, options.merge(type: :file))
274 275
      end

276
      # Creates a password field, a masked text field that will hide the users input behind a mask character.
277
      #
278 279 280 281 282 283 284 285 286 287 288 289 290
      # ==== 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 已提交
291
      #   password_field_tag 'masked', nil, class: 'masked_input_field'
292 293
      #   # => <input class="masked_input_field" id="masked" name="masked" type="password" />
      #
A
AvnerCohen 已提交
294
      #   password_field_tag 'token', '', size: 15
295 296
      #   # => <input id="token" name="token" size="15" type="password" value="" />
      #
A
AvnerCohen 已提交
297
      #   password_field_tag 'key', nil, maxlength: 16
298 299
      #   # => <input id="key" maxlength="16" name="key" type="password" />
      #
A
AvnerCohen 已提交
300
      #   password_field_tag 'confirm_pass', nil, disabled: true
301 302
      #   # => <input disabled="disabled" id="confirm_pass" name="confirm_pass" type="password" />
      #
A
AvnerCohen 已提交
303
      #   password_field_tag 'pin', '1234', maxlength: 4, size: 6, class: "pin_input"
304
      #   # => <input class="pin_input" id="pin" maxlength="4" name="pin" size="6" type="password" value="1234" />
305
      def password_field_tag(name = "password", value = nil, options = {})
306
        text_field_tag(name, value, options.merge(type: :password))
307 308
      end

309 310 311
      # Creates a text input area; use a textarea for longer text inputs such as blog posts or descriptions.
      #
      # ==== Options
312
      # * <tt>:size</tt> - A string specifying the dimensions (columns by rows) of the textarea (e.g., "25x10").
313 314 315
      # * <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.
316 317
      # * <tt>:escape</tt> - By default, the contents of the text input are HTML escaped.
      #   If you need unescaped contents, set this to false.
318 319 320 321 322 323 324 325
      # * 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>
326
      #
A
AvnerCohen 已提交
327
      #   text_area_tag 'body', nil, rows: 10, cols: 25
328 329
      #   # => <textarea cols="25" id="body" name="body" rows="10"></textarea>
      #
A
AvnerCohen 已提交
330
      #   text_area_tag 'body', nil, size: "25x10"
331 332
      #   # => <textarea name="body" id="body" cols="25" rows="10"></textarea>
      #
A
AvnerCohen 已提交
333
      #   text_area_tag 'description', "Description goes here.", disabled: true
334 335
      #   # => <textarea disabled="disabled" id="description" name="description">Description goes here.</textarea>
      #
A
AvnerCohen 已提交
336
      #   text_area_tag 'comment', nil, class: 'comment_input'
337
      #   # => <textarea class="comment_input" id="comment" name="comment"></textarea>
338
      def text_area_tag(name, content = nil, options = {})
339
        options = options.stringify_keys
340

341 342 343
        if size = options.delete("size")
          options["cols"], options["rows"] = size.split("x") if size.respond_to?(:split)
        end
344

345
        escape = options.delete("escape") { true }
346
        content = ERB::Util.html_escape(content) if escape
347

348
        content_tag :textarea, content.to_s.html_safe, { "name" => name, "id" => sanitize_to_id(name) }.update(options)
349 350
      end

351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366
      # 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 已提交
367
      #   check_box_tag 'tos', 'yes', false, class: 'accept_tos'
368 369
      #   # => <input class="accept_tos" id="tos" name="tos" type="checkbox" value="yes" />
      #
A
AvnerCohen 已提交
370
      #   check_box_tag 'eula', 'accepted', false, disabled: true
371
      #   # => <input disabled="disabled" id="eula" name="eula" type="checkbox" value="accepted" />
372
      def check_box_tag(name, value = "1", checked = false, options = {})
373
        html_options = { "type" => "checkbox", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys)
374
        html_options["checked"] = "checked" if checked
375
        tag :input, html_options
376 377
      end

378
      # Creates a radio button; use groups of radio buttons named the same to allow users to
379 380 381 382 383 384 385 386 387 388 389 390 391
      # 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 已提交
392
      #   radio_button_tag 'time_slot', "3:00 p.m.", false, disabled: true
393 394
      #   # => <input disabled="disabled" id="time_slot_300_pm" name="time_slot" type="radio" value="3:00 p.m." />
      #
A
AvnerCohen 已提交
395
      #   radio_button_tag 'color', "green", true, class: "color_input"
396
      #   # => <input checked="checked" class="color_input" id="color_green" name="color" type="radio" value="green" />
397
      def radio_button_tag(name, value, checked = false, options = {})
398
        html_options = { "type" => "radio", "name" => name, "id" => "#{sanitize_to_id(name)}_#{sanitize_to_id(value)}", "value" => value }.update(options.stringify_keys)
399
        html_options["checked"] = "checked" if checked
400
        tag :input, html_options
401 402
      end

403
      # Creates a submit button with the text <tt>value</tt> as the caption.
404 405
      #
      # ==== Options
406
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
P
Pratik Naik 已提交
407
      # * <tt>:disabled</tt> - If true, the user will not be able to use this input.
408 409
      # * Any other key creates standard HTML options for the tag.
      #
410 411
      # ==== Data attributes
      #
A
AvnerCohen 已提交
412
      # * <tt>confirm: 'question?'</tt> - If present the unobtrusive JavaScript
413 414
      #   drivers will provide a prompt with the question specified. If the user accepts,
      #   the form is processed normally, otherwise no action is taken.
415 416
      # * <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
417 418
      #   provided by the unobtrusive JavaScript driver. To disable this feature for a single submit tag
      #   pass <tt>:data => { disable_with: false }</tt> Defaults to value attribute.
419
      #
420 421
      # ==== Examples
      #   submit_tag
422
      #   # => <input name="commit" data-disable-with="Save changes" type="submit" value="Save changes" />
423 424
      #
      #   submit_tag "Edit this article"
425
      #   # => <input name="commit" data-disable-with="Edit this article" type="submit" value="Edit this article" />
426
      #
A
AvnerCohen 已提交
427
      #   submit_tag "Save edits", disabled: true
428
      #   # => <input disabled="disabled" name="commit" data-disable-with="Save edits" type="submit" value="Save edits" />
429
      #
430 431
      #   submit_tag "Complete sale", data: { disable_with: "Submitting..." }
      #   # => <input name="commit" data-disable-with="Submitting..." type="submit" value="Complete sale" />
432
      #
A
AvnerCohen 已提交
433
      #   submit_tag nil, class: "form_submit"
434 435
      #   # => <input class="form_submit" name="commit" type="submit" />
      #
A
AvnerCohen 已提交
436
      #   submit_tag "Edit", class: "edit_button"
437
      #   # => <input class="edit_button" data-disable-with="Edit" name="commit" type="submit" value="Edit" />
S
Stefan Penner 已提交
438
      #
A
AvnerCohen 已提交
439
      #   submit_tag "Save", data: { confirm: "Are you sure?" }
440
      #   # => <input name='commit' type='submit' value='Save' data-disable-with="Save" data-confirm="Are you sure?" />
S
Stefan Penner 已提交
441
      #
442
      def submit_tag(value = "Save changes", options = {})
443
        options = options.stringify_keys
444
        tag_options = { "type" => "submit", "name" => "commit", "value" => value }.update(options)
445

446 447 448 449 450 451 452 453 454 455 456 457 458
        if ActionView::Base.automatically_disable_submit_tag
          unless tag_options["data-disable-with"] == false || (tag_options["data"] && tag_options["data"][:disable_with] == false)
            disable_with_text = tag_options["data-disable-with"]
            disable_with_text ||= tag_options["data"][:disable_with] if tag_options["data"]
            disable_with_text ||= value.clone
            tag_options.deep_merge!("data" => { "disable_with" => disable_with_text })
          else
            tag_options.delete("data-disable-with")
            tag_options["data"].delete(:disable_with) if tag_options["data"]
          end
        end

        tag :input, tag_options
459
      end
460

R
Rizwan Reza 已提交
461 462 463 464
      # 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,
465 466 467
      # the button tag does allow for richer labels such as images and emphasis,
      # so this helper will also accept a block. By default, it will create
      # a button tag with type `submit`, if type is not given.
R
Rizwan Reza 已提交
468 469
      #
      # ==== Options
470
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
R
Rizwan Reza 已提交
471 472 473 474
      # * <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.
      #
475 476
      # ==== Data attributes
      #
A
AvnerCohen 已提交
477
      # * <tt>confirm: 'question?'</tt> - If present, the
478 479 480
      #   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.
481 482 483 484
      # * <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.
485
      #
R
Rizwan Reza 已提交
486 487
      # ==== Examples
      #   button_tag
488
      #   # => <button name="button" type="submit">Button</button>
R
Rizwan Reza 已提交
489
      #
490 491 492 493 494 495 496 497 498
      #   button_tag 'Reset', type: 'reset'
      #   # => <button name="button" type="reset">Reset</button>
      #
      #   button_tag 'Button', type: 'button'
      #   # => <button name="button" type="button">Button</button>
      #
      #   button_tag 'Reset', type: 'reset', disabled: true
      #   # => <button name="button" type="reset" disabled="disabled">Reset</button>
      #
A
AvnerCohen 已提交
499
      #   button_tag(type: 'button') do
500 501
      #     content_tag(:strong, 'Ask me!')
      #   end
R
Rizwan Reza 已提交
502
      #   # => <button name="button" type="button">
503 504
      #   #     <strong>Ask me!</strong>
      #   #    </button>
R
Rizwan Reza 已提交
505
      #
506 507 508
      #   button_tag "Save", data: { confirm: "Are you sure?" }
      #   # => <button name="button" type="submit" data-confirm="Are you sure?">Save</button>
      #
509
      #   button_tag "Checkout", data: { disable_with: "Please wait..." }
510 511
      #   # => <button data-disable-with="Please wait..." name="button" type="submit">Checkout</button>
      #
512
      def button_tag(content_or_options = nil, options = nil, &block)
513
        if content_or_options.is_a? Hash
514
          options = content_or_options
515 516
        else
          options ||= {}
517 518
        end

519
        options = { 'name' => 'button', 'type' => 'submit' }.merge!(options.stringify_keys)
520 521 522 523 524 525

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

528 529
      # Displays an image which when clicked will submit the form.
      #
530
      # <tt>source</tt> is passed to AssetTagHelper#path_to_image
531 532
      #
      # ==== Options
533
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
534 535 536
      # * <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.
      #
537 538
      # ==== Data attributes
      #
A
AvnerCohen 已提交
539
      # * <tt>confirm: 'question?'</tt> - This will add a JavaScript confirm
540 541 542
      #   prompt with the question specified. If the user accepts, the form is
      #   processed normally, otherwise no action is taken.
      #
543 544
      # ==== Examples
      #   image_submit_tag("login.png")
545
      #   # => <input alt="Login" src="/assets/login.png" type="image" />
546
      #
A
AvnerCohen 已提交
547
      #   image_submit_tag("purchase.png", disabled: true)
548
      #   # => <input alt="Purchase" disabled="disabled" src="/assets/purchase.png" type="image" />
549
      #
550
      #   image_submit_tag("search.png", class: 'search_button', alt: 'Find')
551
      #   # => <input alt="Find" class="search_button" src="/assets/search.png" type="image" />
552
      #
A
AvnerCohen 已提交
553
      #   image_submit_tag("agree.png", disabled: true, class: "agree_disagree_button")
554
      #   # => <input alt="Agree" class="agree_disagree_button" disabled="disabled" src="/assets/agree.png" type="image" />
555
      #
A
AvnerCohen 已提交
556
      #   image_submit_tag("save.png", data: { confirm: "Are you sure?" })
557
      #   # => <input alt="Save" src="/assets/save.png" data-confirm="Are you sure?" type="image" />
558
      def image_submit_tag(source, options = {})
559
        options = options.stringify_keys
560
        tag :input, { "alt" => image_alt(source), "type" => "image", "src" => path_to_image(source) }.update(options)
561
      end
562 563 564 565

      # 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 已提交
566
      # <tt>options</tt> accept the same values as tag.
567
      #
L
lifo 已提交
568
      # ==== Examples
569
      #   <%= field_set_tag do %>
570 571 572 573
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset><p><input id="name" name="name" type="text" /></p></fieldset>
      #
574
      #   <%= field_set_tag 'Your details' do %>
575 576 577
      #     <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 已提交
578
      #
A
AvnerCohen 已提交
579
      #   <%= field_set_tag nil, class: 'format' do %>
A
Andrew Kaspick 已提交
580 581 582 583
      #     <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 已提交
584
        output = tag(:fieldset, options, true)
585
        output.safe_concat(content_tag("legend".freeze, legend)) unless legend.blank?
586
        output.concat(capture(&block)) if block_given?
W
wycats 已提交
587
        output.safe_concat("</fieldset>")
588
      end
589

590 591 592 593
      # Creates a text field of type "color".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
594 595 596 597 598 599 600 601 602 603 604 605 606
      #
      # ==== Examples
      #   color_field_tag 'name'
      #   # => <input id="name" name="name" type="color" />
      #
      #   color_field_tag 'color', '#DEF726'
      #   # => <input id="color" name="color" type="color" value="#DEF726" />
      #
      #   color_field_tag 'color', nil, class: 'special_input'
      #   # => <input class="special_input" id="color" name="color" type="color" />
      #
      #   color_field_tag 'color', '#DEF726', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="color" name="color" type="color" value="#DEF726" />
607
      def color_field_tag(name, value = nil, options = {})
608
        text_field_tag(name, value, options.merge(type: :color))
609 610
      end

611 612 613 614
      # Creates a text field of type "search".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
615 616 617 618 619 620 621 622 623 624 625 626 627
      #
      # ==== Examples
      #   search_field_tag 'name'
      #   # => <input id="name" name="name" type="search" />
      #
      #   search_field_tag 'search', 'Enter your search query here'
      #   # => <input id="search" name="search" type="search" value="Enter your search query here" />
      #
      #   search_field_tag 'search', nil, class: 'special_input'
      #   # => <input class="special_input" id="search" name="search" type="search" />
      #
      #   search_field_tag 'search', 'Enter your search query here', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="search" name="search" type="search" value="Enter your search query here" />
628
      def search_field_tag(name, value = nil, options = {})
629
        text_field_tag(name, value, options.merge(type: :search))
630 631 632 633 634 635
      end

      # Creates a text field of type "tel".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
636 637 638 639 640 641 642 643 644 645 646 647 648
      #
      # ==== Examples
      #   telephone_field_tag 'name'
      #   # => <input id="name" name="name" type="tel" />
      #
      #   telephone_field_tag 'tel', '0123456789'
      #   # => <input id="tel" name="tel" type="tel" value="0123456789" />
      #
      #   telephone_field_tag 'tel', nil, class: 'special_input'
      #   # => <input class="special_input" id="tel" name="tel" type="tel" />
      #
      #   telephone_field_tag 'tel', '0123456789', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="tel" name="tel" type="tel" value="0123456789" />
649
      def telephone_field_tag(name, value = nil, options = {})
650
        text_field_tag(name, value, options.merge(type: :tel))
651 652 653
      end
      alias phone_field_tag telephone_field_tag

654 655 656 657
      # Creates a text field of type "date".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
658 659 660 661 662 663 664 665 666 667 668 669 670
      #
      # ==== Examples
      #   date_field_tag 'name'
      #   # => <input id="name" name="name" type="date" />
      #
      #   date_field_tag 'date', '01/01/2014'
      #   # => <input id="date" name="date" type="date" value="01/01/2014" />
      #
      #   date_field_tag 'date', nil, class: 'special_input'
      #   # => <input class="special_input" id="date" name="date" type="date" />
      #
      #   date_field_tag 'date', '01/01/2014', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="date" name="date" type="date" value="01/01/2014" />
671
      def date_field_tag(name, value = nil, options = {})
672
        text_field_tag(name, value, options.merge(type: :date))
673 674
      end

675 676 677 678 679 680 681 682
      # 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 = {})
683
        text_field_tag(name, value, options.merge(type: :time))
684 685
      end

C
Carlos Galdino 已提交
686 687 688 689 690 691 692 693
      # 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 = {})
694
        text_field_tag(name, value, options.merge(type: :datetime))
C
Carlos Galdino 已提交
695 696 697 698 699 700 701 702 703 704
      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 = {})
705
        text_field_tag(name, value, options.merge(type: 'datetime-local'))
C
Carlos Galdino 已提交
706 707 708 709 710 711 712 713 714 715
      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 = {})
716
        text_field_tag(name, value, options.merge(type: :month))
C
Carlos Galdino 已提交
717 718 719 720 721 722 723 724 725 726
      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 = {})
727
        text_field_tag(name, value, options.merge(type: :week))
C
Carlos Galdino 已提交
728 729
      end

730 731 732 733
      # Creates a text field of type "url".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
734 735 736 737 738 739 740 741 742 743 744 745 746
      #
      # ==== Examples
      #   url_field_tag 'name'
      #   # => <input id="name" name="name" type="url" />
      #
      #   url_field_tag 'url', 'http://rubyonrails.org'
      #   # => <input id="url" name="url" type="url" value="http://rubyonrails.org" />
      #
      #   url_field_tag 'url', nil, class: 'special_input'
      #   # => <input class="special_input" id="url" name="url" type="url" />
      #
      #   url_field_tag 'url', 'http://rubyonrails.org', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="url" name="url" type="url" value="http://rubyonrails.org" />
747
      def url_field_tag(name, value = nil, options = {})
748
        text_field_tag(name, value, options.merge(type: :url))
749 750 751 752 753 754
      end

      # Creates a text field of type "email".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
755 756 757 758 759 760 761 762 763 764 765 766 767
      #
      # ==== Examples
      #   email_field_tag 'name'
      #   # => <input id="name" name="name" type="email" />
      #
      #   email_field_tag 'email', 'email@example.com'
      #   # => <input id="email" name="email" type="email" value="email@example.com" />
      #
      #   email_field_tag 'email', nil, class: 'special_input'
      #   # => <input class="special_input" id="email" name="email" type="email" />
      #
      #   email_field_tag 'email', 'email@example.com', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="email" name="email" type="email" value="email@example.com" />
768
      def email_field_tag(name, value = nil, options = {})
769
        text_field_tag(name, value, options.merge(type: :email))
770 771 772 773 774 775 776 777 778
      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.
779
      # * <tt>:within</tt> - Same as <tt>:in</tt>.
780 781 782 783
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      #
      # ==== Examples
784 785 786 787 788 789 790 791 792 793 794 795 796 797 798
      #   number_field_tag 'quantity'
      #   # => <input id="quantity" name="quantity" type="number" />
      #
      #   number_field_tag 'quantity', '1'
      #   # => <input id="quantity" name="quantity" type="number" value="1" />
      #
      #   number_field_tag 'quantity', nil, class: 'special_input'
      #   # => <input class="special_input" id="quantity" name="quantity" type="number" />
      #
      #   number_field_tag 'quantity', nil, min: 1
      #   # => <input id="quantity" name="quantity" min="1" type="number" />
      #
      #   number_field_tag 'quantity', nil, max: 9
      #   # => <input id="quantity" name="quantity" max="9" type="number" />
      #
A
AvnerCohen 已提交
799
      #   number_field_tag 'quantity', nil, in: 1...10
800
      #   # => <input id="quantity" name="quantity" min="1" max="9" type="number" />
801 802 803 804 805
      #
      #   number_field_tag 'quantity', nil, within: 1...10
      #   # => <input id="quantity" name="quantity" min="1" max="9" type="number" />
      #
      #   number_field_tag 'quantity', nil, min: 1, max: 10
806
      #   # => <input id="quantity" name="quantity" min="1" max="10" type="number" />
807 808
      #
      #   number_field_tag 'quantity', nil, min: 1, max: 10, step: 2
809
      #   # => <input id="quantity" name="quantity" min="1" max="10" step="2" type="number" />
810 811 812
      #
      #   number_field_tag 'quantity', '1', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="quantity" name="quantity" type="number" value="1" />
813 814 815 816 817 818 819 820 821 822 823 824 825 826
      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 = {})
827
        number_field_tag(name, value, options.merge(type: :range))
828
      end
829

830
      # Creates the hidden UTF8 enforcer tag. Override this method in a helper
831
      # to customize the tag.
832
      def utf8_enforcer_tag
833 834 835 836
        # Use raw HTML to ensure the value is written as an HTML entity; it
        # needs to be the right character regardless of which encoding the
        # browser infers.
        '<input name="utf8" type="hidden" value="&#x2713;" />'.html_safe
837 838
      end

839
      private
840
        def html_options_for_form(url_for_options, options)
S
Santiago Pastorino 已提交
841
          options.stringify_keys.tap do |html_options|
842
            html_options["enctype"] = "multipart/form-data" if html_options.delete("multipart")
843
            # The following URL is unescaped, this is just a hash of options, and it is the
R
R.T. Lechow 已提交
844
            # responsibility of the caller to escape all the values.
845
            html_options["action"]  = url_for(url_for_options)
W
wycats 已提交
846
            html_options["accept-charset"] = "UTF-8"
847

848
            html_options["data-remote"] = true if html_options.delete("remote")
849

850 851
            if html_options["data-remote"] &&
               !embed_authenticity_token_in_remote_forms &&
852
               html_options["authenticity_token"].blank?
853 854 855
              # The authenticity token is taken from the meta tag in this case
              html_options["authenticity_token"] = false
            elsif html_options["authenticity_token"] == true
856 857 858
              # 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
859
            end
860 861
          end
        end
862

863
        def extra_tags_for_form(html_options)
864
          authenticity_token = html_options.delete("authenticity_token")
W
wycats 已提交
865 866 867
          method = html_options.delete("method").to_s

          method_tag = case method
868
            when /^get$/i # must be case-insensitive, but can't use downcase as might be nil
869 870 871 872
              html_options["method"] = "get"
              ''
            when /^post$/i, "", nil
              html_options["method"] = "post"
873
              token_tag(authenticity_token)
874 875
            else
              html_options["method"] = "post"
R
Rafael Mendonça França 已提交
876
              method_tag(method) + token_tag(authenticity_token)
877
          end
W
wycats 已提交
878

879 880 881 882 883
          if html_options.delete("enforce_utf8") { true }
            utf8_enforcer_tag + method_tag
          else
            method_tag
          end
884
        end
885

886 887
        def form_tag_html(html_options)
          extra_tags = extra_tags_for_form(html_options)
888
          tag(:form, html_options, true) + extra_tags
889
        end
890

891
        def form_tag_with_body(html_options, content)
892
          output = form_tag_html(html_options)
W
wycats 已提交
893 894
          output << content
          output.safe_concat("</form>")
895
        end
896

897 898
        # see http://www.w3.org/TR/html4/types.html#type-name
        def sanitize_to_id(name)
899
          name.to_s.delete(']').tr('^-a-zA-Z0-9:.', "_")
900
        end
901 902 903
    end
  end
end