form_tag_helper.rb 41.2 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 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.
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
      # * <tt>:selected</tt> - Provide a default selected value. It should be of the exact type as the provided options.
88
      # * Any other key creates standard HTML attributes for the tag.
89
      #
90
      # ==== Examples
91
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name")
P
Pratik Naik 已提交
92
      #   # <select id="people" name="people"><option value="1">David</option></select>
93
      #
94 95 96
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), selected: ["1", "David"]
      #   # <select id="people" name="people"><option value="1" selected="selected">David</option></select>
      #
97
      #   select_tag "people", "<option>David</option>".html_safe
98
      #   # => <select id="people" name="people"><option>David</option></select>
99
      #
100
      #   select_tag "count", "<option>1</option><option>2</option><option>3</option><option>4</option>".html_safe
101 102 103
      #   # => <select id="count" name="count"><option>1</option><option>2</option>
      #   #    <option>3</option><option>4</option></select>
      #
A
AvnerCohen 已提交
104
      #   select_tag "colors", "<option>Red</option><option>Green</option><option>Blue</option>".html_safe, multiple: true
105
      #   # => <select id="colors" multiple="multiple" name="colors[]"><option>Red</option>
106 107
      #   #    <option>Green</option><option>Blue</option></select>
      #
108
      #   select_tag "locations", "<option>Home</option><option selected='selected'>Work</option><option>Out</option>".html_safe
109 110 111
      #   # => <select id="locations" name="locations"><option>Home</option><option selected='selected'>Work</option>
      #   #    <option>Out</option></select>
      #
112 113
      #   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>
114 115
      #   #    <option>Write</option></select>
      #
A
AvnerCohen 已提交
116
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: true
117 118
      #   # => <select id="people" name="people"><option value=""></option><option value="1">David</option></select>
      #
119 120 121
      #   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 已提交
122
      #   select_tag "people", options_from_collection_for_select(@people, "id", "name"), prompt: "Select something"
123 124
      #   # => <select id="people" name="people"><option value="">Select something</option><option value="1">David</option></select>
      #
A
AvnerCohen 已提交
125
      #   select_tag "destination", "<option>NYC</option><option>Paris</option><option>Rome</option>".html_safe, disabled: true
126 127
      #   # => <select disabled="disabled" id="destination" name="destination"><option>NYC</option>
      #   #    <option>Paris</option><option>Rome</option></select>
128 129 130 131
      #
      #   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>
132
      def select_tag(name, option_tags = nil, options = {})
133
        option_tags ||= ""
134
        html_name = (options[:multiple] == true && !name.to_s.ends_with?("[]")) ? "#{name}[]" : name
135 136

        if options.delete(:include_blank)
137
          option_tags = content_tag(:option, '', :value => '').safe_concat(option_tags)
138
        end
139 140

        if prompt = options.delete(:prompt)
141
          option_tags = content_tag(:option, prompt, :value => '').safe_concat(option_tags)
142 143
        end

144
        content_tag :select, option_tags, { "name" => html_name, "id" => sanitize_to_id(name) }.update(options.stringify_keys)
145 146
      end

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

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

210 211 212 213 214 215 216 217 218
      # 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" />
219
      #
220 221 222
      #   hidden_field_tag 'token', 'VUBJKB23UIVI1UU1VOBVI@'
      #   # => <input id="token" name="token" type="hidden" value="VUBJKB23UIVI1UU1VOBVI@" />
      #
A
AvnerCohen 已提交
223
      #   hidden_field_tag 'collected_input', '', onchange: "alert('Input collected!')"
224
      #   # => <input id="collected_input" name="collected_input" onchange="alert('Input collected!')"
225
      #   #    type="hidden" value="" />
226
      def hidden_field_tag(name, value = nil, options = {})
227
        text_field_tag(name, value, options.stringify_keys.update("type" => "hidden"))
228 229
      end

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

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

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

334 335 336
        if size = options.delete("size")
          options["cols"], options["rows"] = size.split("x") if size.respond_to?(:split)
        end
337

338
        escape = options.delete("escape") { true }
339
        content = ERB::Util.html_escape(content) if escape
340

341
        content_tag :textarea, content.to_s.html_safe, { "name" => name, "id" => sanitize_to_id(name) }.update(options)
342 343
      end

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

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

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

437
        tag :input, { "type" => "submit", "name" => "commit", "value" => value }.update(options)
438
      end
439

R
Rizwan Reza 已提交
440 441 442 443
      # 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,
444 445
      # the button tag allows richer labels such as images and emphasis,
      # so this helper will also accept a block.
R
Rizwan Reza 已提交
446 447
      #
      # ==== Options
448
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
R
Rizwan Reza 已提交
449 450 451 452
      # * <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.
      #
453 454
      # ==== Data attributes
      #
A
AvnerCohen 已提交
455
      # * <tt>confirm: 'question?'</tt> - If present, the
456 457 458
      #   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.
459 460 461 462
      # * <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.
463
      #
R
Rizwan Reza 已提交
464 465
      # ==== Examples
      #   button_tag
466
      #   # => <button name="button" type="submit">Button</button>
R
Rizwan Reza 已提交
467
      #
A
AvnerCohen 已提交
468
      #   button_tag(type: 'button') do
469 470
      #     content_tag(:strong, 'Ask me!')
      #   end
R
Rizwan Reza 已提交
471
      #   # => <button name="button" type="button">
472 473
      #   #     <strong>Ask me!</strong>
      #   #    </button>
R
Rizwan Reza 已提交
474
      #
475
      #   button_tag "Checkout", data: { disable_with: "Please wait..." }
476 477
      #   # => <button data-disable-with="Please wait..." name="button" type="submit">Checkout</button>
      #
478
      def button_tag(content_or_options = nil, options = nil, &block)
479
        if content_or_options.is_a? Hash
480
          options = content_or_options
481 482
        else
          options ||= {}
483 484
        end

485
        options = { 'name' => 'button', 'type' => 'submit' }.merge!(options.stringify_keys)
486 487 488 489 490 491

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

494 495
      # Displays an image which when clicked will submit the form.
      #
496
      # <tt>source</tt> is passed to AssetTagHelper#path_to_image
497 498
      #
      # ==== Options
499
      # * <tt>:data</tt> - This option can be used to add custom data attributes.
500 501 502
      # * <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.
      #
503 504
      # ==== Data attributes
      #
A
AvnerCohen 已提交
505
      # * <tt>confirm: 'question?'</tt> - This will add a JavaScript confirm
506 507 508
      #   prompt with the question specified. If the user accepts, the form is
      #   processed normally, otherwise no action is taken.
      #
509 510
      # ==== Examples
      #   image_submit_tag("login.png")
511
      #   # => <input alt="Login" src="/assets/login.png" type="image" />
512
      #
A
AvnerCohen 已提交
513
      #   image_submit_tag("purchase.png", disabled: true)
514
      #   # => <input alt="Purchase" disabled="disabled" src="/assets/purchase.png" type="image" />
515
      #
516
      #   image_submit_tag("search.png", class: 'search_button', alt: 'Find')
517
      #   # => <input alt="Find" class="search_button" src="/assets/search.png" type="image" />
518
      #
A
AvnerCohen 已提交
519
      #   image_submit_tag("agree.png", disabled: true, class: "agree_disagree_button")
520
      #   # => <input alt="Agree" class="agree_disagree_button" disabled="disabled" src="/assets/agree.png" type="image" />
521
      #
A
AvnerCohen 已提交
522
      #   image_submit_tag("save.png", data: { confirm: "Are you sure?" })
523
      #   # => <input alt="Save" src="/assets/save.png" data-confirm="Are you sure?" type="image" />
524
      def image_submit_tag(source, options = {})
525
        options = options.stringify_keys
526
        tag :input, { "alt" => image_alt(source), "type" => "image", "src" => path_to_image(source) }.update(options)
527
      end
528 529 530 531

      # 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 已提交
532
      # <tt>options</tt> accept the same values as tag.
533
      #
L
lifo 已提交
534
      # ==== Examples
535
      #   <%= field_set_tag do %>
536 537 538 539
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset><p><input id="name" name="name" type="text" /></p></fieldset>
      #
540
      #   <%= field_set_tag 'Your details' do %>
541 542 543
      #     <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 已提交
544
      #
A
AvnerCohen 已提交
545
      #   <%= field_set_tag nil, class: 'format' do %>
A
Andrew Kaspick 已提交
546 547 548 549
      #     <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 已提交
550 551
        output = tag(:fieldset, options, true)
        output.safe_concat(content_tag(:legend, legend)) unless legend.blank?
552
        output.concat(capture(&block)) if block_given?
W
wycats 已提交
553
        output.safe_concat("</fieldset>")
554
      end
555

556 557 558 559
      # Creates a text field of type "color".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
560 561 562 563 564 565 566 567 568 569 570 571 572
      #
      # ==== 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" />
573 574 575 576
      def color_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "color"))
      end

577 578 579 580
      # Creates a text field of type "search".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
581 582 583 584 585 586 587 588 589 590 591 592 593
      #
      # ==== 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" />
594 595 596 597 598 599 600 601
      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.
602 603 604 605 606 607 608 609 610 611 612 613 614
      #
      # ==== 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" />
615 616 617 618 619
      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

620 621 622 623
      # Creates a text field of type "date".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
624 625 626 627 628 629 630 631 632 633 634 635 636
      #
      # ==== 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" />
637 638 639 640
      def date_field_tag(name, value = nil, options = {})
        text_field_tag(name, value, options.stringify_keys.update("type" => "date"))
      end

641 642 643 644 645 646 647 648 649 650 651
      # 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 已提交
652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695
      # 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

696 697 698 699
      # Creates a text field of type "url".
      #
      # ==== Options
      # * Accepts the same options as text_field_tag.
700 701 702 703 704 705 706 707 708 709 710 711 712
      #
      # ==== 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" />
713 714 715 716 717 718 719 720
      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.
721 722 723 724 725 726 727 728 729 730 731 732 733
      #
      # ==== 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" />
734 735 736 737 738 739 740 741 742 743 744
      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.
745
      # * <tt>:within</tt> - Same as <tt>:in</tt>.
746 747 748 749
      # * <tt>:step</tt> - The acceptable value granularity.
      # * Otherwise accepts the same options as text_field_tag.
      #
      # ==== Examples
750 751 752 753 754 755 756 757 758 759 760 761 762 763 764
      #   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 已提交
765
      #   number_field_tag 'quantity', nil, in: 1...10
766
      #   # => <input id="quantity" name="quantity" min="1" max="9" type="number" />
767 768 769 770 771 772 773 774 775 776 777 778
      #
      #   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
      #   # => <input id="quantity" name="quantity" min="1" max="9" type="number" />
      #
      #   number_field_tag 'quantity', nil, min: 1, max: 10, step: 2
      #   # => <input id="quantity" name="quantity" min="1" max="9" step="2" type="number" />
      #
      #   number_field_tag 'quantity', '1', class: 'special_input', disabled: true
      #   # => <input disabled="disabled" class="special_input" id="quantity" name="quantity" type="number" value="1" />
779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794
      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
795

796
      # Creates the hidden UTF8 enforcer tag. Override this method in a helper
797
      # to customize the tag.
798
      def utf8_enforcer_tag
799 800 801 802
        # 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
803 804
      end

805
      private
806
        def html_options_for_form(url_for_options, options)
S
Santiago Pastorino 已提交
807
          options.stringify_keys.tap do |html_options|
808
            html_options["enctype"] = "multipart/form-data" if html_options.delete("multipart")
809
            # The following URL is unescaped, this is just a hash of options, and it is the
R
R.T. Lechow 已提交
810
            # responsibility of the caller to escape all the values.
811
            html_options["action"]  = url_for(url_for_options)
W
wycats 已提交
812
            html_options["accept-charset"] = "UTF-8"
813

814
            html_options["data-remote"] = true if html_options.delete("remote")
815

816 817
            if html_options["data-remote"] &&
               !embed_authenticity_token_in_remote_forms &&
818
               html_options["authenticity_token"].blank?
819 820 821
              # The authenticity token is taken from the meta tag in this case
              html_options["authenticity_token"] = false
            elsif html_options["authenticity_token"] == true
822 823 824
              # 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
825
            end
826 827
          end
        end
828

829
        def extra_tags_for_form(html_options)
830
          authenticity_token = html_options.delete("authenticity_token")
W
wycats 已提交
831 832 833
          method = html_options.delete("method").to_s

          method_tag = case method
834
            when /^get$/i # must be case-insensitive, but can't use downcase as might be nil
835 836 837 838
              html_options["method"] = "get"
              ''
            when /^post$/i, "", nil
              html_options["method"] = "post"
839
              token_tag(authenticity_token)
840 841
            else
              html_options["method"] = "post"
R
Rafael Mendonça França 已提交
842
              method_tag(method) + token_tag(authenticity_token)
843
          end
W
wycats 已提交
844

845 846 847 848 849
          if html_options.delete("enforce_utf8") { true }
            utf8_enforcer_tag + method_tag
          else
            method_tag
          end
850
        end
851

852 853
        def form_tag_html(html_options)
          extra_tags = extra_tags_for_form(html_options)
854
          tag(:form, html_options, true) + extra_tags
855
        end
856

857
        def form_tag_with_body(html_options, content)
858
          output = form_tag_html(html_options)
W
wycats 已提交
859 860
          output << content
          output.safe_concat("</form>")
861
        end
862

863 864
        # see http://www.w3.org/TR/html4/types.html#type-name
        def sanitize_to_id(name)
865
          name.to_s.delete(']').tr('^-a-zA-Z0-9:.', "_")
866
        end
867 868 869
    end
  end
end