require 'cgi' require 'action_view/helpers/tag_helper' require 'active_support/core_ext/string/output_safety' require 'active_support/core_ext/module/attribute_accessors' module ActionView # = Action View Form Tag Helpers module Helpers # Provides a number of methods for creating form tags that don't rely on an Active Record object assigned to the template like # FormHelper does. Instead, you provide the names and values manually. # # NOTE: The HTML options disabled, readonly, and multiple can all be treated as booleans. So specifying # disabled: true will give disabled="disabled". module FormTagHelper extend ActiveSupport::Concern include UrlHelper include TextHelper mattr_accessor :embed_authenticity_token_in_remote_forms self.embed_authenticity_token_in_remote_forms = false # Starts a form tag that points the action to an url configured with url_for_options just like # ActionController::Base#url_for. The method for the form defaults to POST. # # ==== Options # * :multipart - If set to true, the enctype is set to "multipart/form-data". # * :method - The method to use when submitting the form, usually either "get" or "post". # If "patch", "put", "delete", or another verb is used, a hidden input with name _method # is added to simulate the verb over post. # * :authenticity_token - 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 # (by passing false). Remote forms may omit the embedded authenticity token # by setting config.action_view.embed_authenticity_token_in_remote_forms = false. # This is helpful when you're fragment-caching the form. Remote forms get the # authenticity token from the meta tag, so embedding is unnecessary unless you # support browsers without JavaScript. # * A list of parameters to feed to the URL the form will be posted to. # * :remote - If set to true, will allow the Unobtrusive JavaScript drivers to control the # submit behavior. By default this behavior is an ajax submit. # * :enforce_utf8 - If set to false, a hidden input with name utf8 is not output. # # ==== Examples # form_tag('/posts') # # =>
# # form_tag('/posts/1', method: :put) # # => ... ... # # form_tag('/upload', multipart: true) # # => # # <%= form_tag('/posts') do -%> #
<%= submit_tag 'Save' %>
# <% end -%> # # =>
# # <%= form_tag('/posts', remote: true) %> # # =>
# # form_tag('http://far.away.com/form', authenticity_token: false) # # form without authenticity token # # form_tag('http://far.away.com/form', authenticity_token: "cf50faa3fe97702ca1ae") # # form with custom authenticity token # def form_tag(url_for_options = {}, options = {}, &block) html_options = html_options_for_form(url_for_options, options) if block_given? form_tag_in_block(html_options, &block) else form_tag_html(html_options) end end # Creates a dropdown selection box, or if the :multiple 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 # associated records. option_tags is a string containing the option tags for the select box. # # ==== Options # * :multiple - If set to true the selection will allow multiple choices. # * :disabled - If set to true, the user will not be able to use this input. # * :include_blank - If set to true, an empty option will be created. # * :prompt - Create a prompt option with blank value and the text asking user to select something # * Any other key creates standard HTML attributes for the tag. # # ==== Examples # select_tag "people", options_from_collection_for_select(@people, "id", "name") # # # # select_tag "people", "".html_safe # # => # # select_tag "count", "".html_safe # # => # # select_tag "colors", "".html_safe, multiple: true # # => # # select_tag "locations", "".html_safe # # => # # select_tag "access", "".html_safe, multiple: true, class: 'form_input' # # => # # select_tag "people", options_from_collection_for_select(@people, "id", "name"), include_blank: true # # => # # select_tag "people", options_from_collection_for_select(@people, "id", "name"), prompt: "Select something" # # => # # select_tag "destination", "".html_safe, disabled: true # # => # # select_tag "credit_card", options_for_select([ "VISA", "MasterCard" ], "MasterCard") # # => def select_tag(name, option_tags = nil, options = {}) option_tags ||= "" html_name = (options[:multiple] == true && !name.to_s.ends_with?("[]")) ? "#{name}[]" : name if options.delete(:include_blank) option_tags = content_tag(:option, '', :value => '').safe_concat(option_tags) end if prompt = options.delete(:prompt) option_tags = content_tag(:option, prompt, :value => '').safe_concat(option_tags) end content_tag :select, option_tags, { "name" => html_name, "id" => sanitize_to_id(name) }.update(options.stringify_keys) end # Creates a standard text field; use these text fields to input smaller chunks of text like a username # or a search query. # # ==== Options # * :disabled - If set to true, the user will not be able to use this input. # * :size - The number of visible characters that will fit in the input. # * :maxlength - The maximum number of characters that the browser will allow the user to enter. # * :placeholder - The text contained in the field by default which is removed when the field receives focus. # * Any other key creates standard HTML attributes for the tag. # # ==== Examples # text_field_tag 'name' # # => # # text_field_tag 'query', 'Enter your search query here' # # => # # text_field_tag 'search', nil, placeholder: 'Enter search term...' # # => # # text_field_tag 'request', nil, class: 'special_input' # # => # # text_field_tag 'address', '', size: 75 # # => # # text_field_tag 'zip', nil, maxlength: 5 # # => # # text_field_tag 'payment_amount', '$0.00', disabled: true # # => # # text_field_tag 'ip', '0.0.0.0', maxlength: 15, size: 20, class: "ip-input" # # => def text_field_tag(name, value = nil, options = {}) tag :input, { "type" => "text", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys) end # Creates a label element. Accepts a block. # # ==== Options # * Creates standard HTML attributes for the tag. # # ==== Examples # label_tag 'name' # # => # # label_tag 'name', 'Your name' # # => # # label_tag 'name', nil, class: 'small_label' # # => def label_tag(name = nil, content_or_options = nil, options = nil, &block) 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 options["for"] = sanitize_to_id(name) unless name.blank? || options.has_key?("for") content_tag :label, content_or_options || name.to_s.humanize, options, &block end # 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' # # => # # hidden_field_tag 'token', 'VUBJKB23UIVI1UU1VOBVI@' # # => # # hidden_field_tag 'collected_input', '', onchange: "alert('Input collected!')" # # => def hidden_field_tag(name, value = nil, options = {}) text_field_tag(name, value, options.stringify_keys.update("type" => "hidden")) end # Creates a file upload field. If you are using file uploads then you will also need # to set the multipart option for the form tag: # # <%= form_tag '/upload', multipart: true do %> # <%= file_field_tag "file" %> # <%= submit_tag %> # <% end %> # # The specified URL will then be passed a File object containing the selected file, or if the field # was left blank, a StringIO object. # # ==== Options # * Creates standard HTML attributes for the tag. # * :disabled - If set to true, the user will not be able to use this input. # * :multiple - If set to true, *in most updated browsers* the user will be allowed to select multiple files. # * :accept - 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. # # ==== Examples # file_field_tag 'attachment' # # => # # file_field_tag 'avatar', class: 'profile_input' # # => # # file_field_tag 'picture', disabled: true # # => # # file_field_tag 'resume', value: '~/resume.doc' # # => # # file_field_tag 'user_pic', accept: 'image/png,image/gif,image/jpeg' # # => # # file_field_tag 'file', accept: 'text/html', class: 'upload', value: 'index.html' # # => def file_field_tag(name, options = {}) text_field_tag(name, nil, options.update("type" => "file")) end # Creates a password field, a masked text field that will hide the users input behind a mask character. # # ==== Options # * :disabled - If set to true, the user will not be able to use this input. # * :size - The number of visible characters that will fit in the input. # * :maxlength - 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' # # => # # password_field_tag 'secret', 'Your secret here' # # => # # password_field_tag 'masked', nil, class: 'masked_input_field' # # => # # password_field_tag 'token', '', size: 15 # # => # # password_field_tag 'key', nil, maxlength: 16 # # => # # password_field_tag 'confirm_pass', nil, disabled: true # # => # # password_field_tag 'pin', '1234', maxlength: 4, size: 6, class: "pin_input" # # => def password_field_tag(name = "password", value = nil, options = {}) text_field_tag(name, value, options.update("type" => "password")) end # Creates a text input area; use a textarea for longer text inputs such as blog posts or descriptions. # # ==== Options # * :size - A string specifying the dimensions (columns by rows) of the textarea (e.g., "25x10"). # * :rows - Specify the number of rows in the textarea # * :cols - Specify the number of columns in the textarea # * :disabled - If set to true, the user will not be able to use this input. # * :escape - By default, the contents of the text input are HTML escaped. # If you need unescaped contents, set this to false. # * Any other key creates standard HTML attributes for the tag. # # ==== Examples # text_area_tag 'post' # # => # # text_area_tag 'bio', @user.bio # # => # # text_area_tag 'body', nil, rows: 10, cols: 25 # # => # # text_area_tag 'body', nil, size: "25x10" # # => # # text_area_tag 'description', "Description goes here.", disabled: true # # => # # text_area_tag 'comment', nil, class: 'comment_input' # # => def text_area_tag(name, content = nil, options = {}) options = options.stringify_keys if size = options.delete("size") options["cols"], options["rows"] = size.split("x") if size.respond_to?(:split) end escape = options.delete("escape") { true } content = ERB::Util.html_escape(content) if escape content_tag :textarea, content.to_s.html_safe, { "name" => name, "id" => sanitize_to_id(name) }.update(options) end # Creates a check box form input tag. # # ==== Options # * :disabled - 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' # # => # # check_box_tag 'rock', 'rock music' # # => # # check_box_tag 'receive_email', 'yes', true # # => # # check_box_tag 'tos', 'yes', false, class: 'accept_tos' # # => # # check_box_tag 'eula', 'accepted', false, disabled: true # # => def check_box_tag(name, value = "1", checked = false, options = {}) html_options = { "type" => "checkbox", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys) html_options["checked"] = "checked" if checked tag :input, html_options end # Creates a radio button; use groups of radio buttons named the same to allow users to # select from a group of options. # # ==== Options # * :disabled - 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' # # => # # radio_button_tag 'receive_updates', 'no', true # # => # # radio_button_tag 'time_slot', "3:00 p.m.", false, disabled: true # # => # # radio_button_tag 'color', "green", true, class: "color_input" # # => def radio_button_tag(name, value, checked = false, options = {}) html_options = { "type" => "radio", "name" => name, "id" => "#{sanitize_to_id(name)}_#{sanitize_to_id(value)}", "value" => value }.update(options.stringify_keys) html_options["checked"] = "checked" if checked tag :input, html_options end # Creates a submit button with the text value as the caption. # # ==== Options # * :data - This option can be used to add custom data attributes. # * :disabled - If true, the user will not be able to use this input. # * Any other key creates standard HTML options for the tag. # # ==== Data attributes # # * confirm: 'question?' - If present the 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. # * :disable_with - 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. # # ==== Examples # submit_tag # # => # # submit_tag "Edit this article" # # => # # submit_tag "Save edits", disabled: true # # => # # submit_tag "Complete sale", data: { disable_with: "Please wait..." } # # => # # submit_tag nil, class: "form_submit" # # => # # submit_tag "Edit", class: "edit_button" # # => # # submit_tag "Save", data: { confirm: "Are you sure?" } # # => # def submit_tag(value = "Save changes", options = {}) options = options.stringify_keys tag :input, { "type" => "submit", "name" => "commit", "value" => value }.update(options) end # Creates a button element that defines a submit button, # resetbutton 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, # the button tag allows richer labels such as images and emphasis, # so this helper will also accept a block. # # ==== Options # * :data - This option can be used to add custom data attributes. # * :disabled - If true, the user will not be able to # use this input. # * Any other key creates standard HTML options for the tag. # # ==== Data attributes # # * confirm: 'question?' - If present, the # 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. # * :disable_with - 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. # # ==== Examples # button_tag # # => # # button_tag(type: 'button') do # content_tag(:strong, 'Ask me!') # end # # => # # button_tag "Checkout", data: { disable_with => "Please wait..." } # # => # def button_tag(content_or_options = nil, options = nil, &block) options = content_or_options if block_given? && content_or_options.is_a?(Hash) options ||= {} options = options.stringify_keys options.reverse_merge! 'name' => 'button', 'type' => 'submit' content_tag :button, content_or_options || 'Button', options, &block end # Displays an image which when clicked will submit the form. # # source is passed to AssetTagHelper#path_to_image # # ==== Options # * :data - This option can be used to add custom data attributes. # * :disabled - If set to true, the user will not be able to use this input. # * Any other key creates standard HTML options for the tag. # # ==== Data attributes # # * confirm: 'question?' - This will add a JavaScript confirm # prompt with the question specified. If the user accepts, the form is # processed normally, otherwise no action is taken. # # ==== Examples # image_submit_tag("login.png") # # => # # image_submit_tag("purchase.png", disabled: true) # # => # # image_submit_tag("search.png", class: 'search_button', alt: 'Find') # # => # # image_submit_tag("agree.png", disabled: true, class: "agree_disagree_button") # # => # # image_submit_tag("save.png", data: { confirm: "Are you sure?" }) # # => def image_submit_tag(source, options = {}) options = options.stringify_keys tag :input, { "alt" => image_alt(source), "type" => "image", "src" => path_to_image(source) }.update(options) end # Creates a field set for grouping HTML form elements. # # legend will become the fieldset's title (optional as per W3C). # options accept the same values as tag. # # ==== Examples # <%= field_set_tag do %> #

<%= text_field_tag 'name' %>

# <% end %> # # =>

# # <%= field_set_tag 'Your details' do %> #

<%= text_field_tag 'name' %>

# <% end %> # # =>
Your details

# # <%= field_set_tag nil, class: 'format' do %> #

<%= text_field_tag 'name' %>

# <% end %> # # =>

def field_set_tag(legend = nil, options = nil, &block) output = tag(:fieldset, options, true) output.safe_concat(content_tag(:legend, legend)) unless legend.blank? output.concat(capture(&block)) if block_given? output.safe_concat("") end # Creates a text field of type "color". # # ==== Options # * Accepts the same options as text_field_tag. def color_field_tag(name, value = nil, options = {}) text_field_tag(name, value, options.stringify_keys.update("type" => "color")) end # Creates a text field of type "search". # # ==== Options # * Accepts the same options as text_field_tag. def search_field_tag(name, value = nil, options = {}) text_field_tag(name, value, options.stringify_keys.update("type" => "search")) end # Creates a text field of type "tel". # # ==== Options # * Accepts the same options as text_field_tag. def telephone_field_tag(name, value = nil, options = {}) text_field_tag(name, value, options.stringify_keys.update("type" => "tel")) end alias phone_field_tag telephone_field_tag # Creates a text field of type "date". # # ==== Options # * Accepts the same options as text_field_tag. def date_field_tag(name, value = nil, options = {}) text_field_tag(name, value, options.stringify_keys.update("type" => "date")) end # Creates a text field of type "time". # # === Options # * :min - The minimum acceptable value. # * :max - The maximum acceptable value. # * :step - 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 # Creates a text field of type "datetime". # # === Options # * :min - The minimum acceptable value. # * :max - The maximum acceptable value. # * :step - 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 # * :min - The minimum acceptable value. # * :max - The maximum acceptable value. # * :step - 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 # * :min - The minimum acceptable value. # * :max - The maximum acceptable value. # * :step - 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 # * :min - The minimum acceptable value. # * :max - The maximum acceptable value. # * :step - 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 # Creates a text field of type "url". # # ==== Options # * Accepts the same options as text_field_tag. def url_field_tag(name, value = nil, options = {}) text_field_tag(name, value, options.stringify_keys.update("type" => "url")) end # Creates a text field of type "email". # # ==== Options # * Accepts the same options as text_field_tag. def email_field_tag(name, value = nil, options = {}) text_field_tag(name, value, options.stringify_keys.update("type" => "email")) end # Creates a number field. # # ==== Options # * :min - The minimum acceptable value. # * :max - The maximum acceptable value. # * :in - A range specifying the :min and # :max values. # * :step - The acceptable value granularity. # * Otherwise accepts the same options as text_field_tag. # # ==== Examples # number_field_tag 'quantity', nil, in: 1...10 # # => 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 # Creates the hidden UTF8 enforcer tag. Override this method in a helper # to customize the tag. def utf8_enforcer_tag tag(:input, :type => "hidden", :name => "utf8", :value => "✓".html_safe) end private def html_options_for_form(url_for_options, options) options.stringify_keys.tap do |html_options| html_options["enctype"] = "multipart/form-data" if html_options.delete("multipart") # The following URL is unescaped, this is just a hash of options, and it is the # responsibility of the caller to escape all the values. html_options["action"] = url_for(url_for_options) html_options["accept-charset"] = "UTF-8" html_options["data-remote"] = true if html_options.delete("remote") if html_options["data-remote"] && !embed_authenticity_token_in_remote_forms && html_options["authenticity_token"].blank? # The authenticity token is taken from the meta tag in this case html_options["authenticity_token"] = false elsif html_options["authenticity_token"] == true # 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 end end end def extra_tags_for_form(html_options) authenticity_token = html_options.delete("authenticity_token") method = html_options.delete("method").to_s method_tag = case method when /^get$/i # must be case-insensitive, but can't use downcase as might be nil html_options["method"] = "get" '' when /^post$/i, "", nil html_options["method"] = "post" token_tag(authenticity_token) else html_options["method"] = "post" method_tag(method) + token_tag(authenticity_token) end enforce_utf8 = html_options.delete("enforce_utf8") { true } tags = (enforce_utf8 ? utf8_enforcer_tag : ''.html_safe) << method_tag content_tag(:div, tags, :style => 'margin:0;padding:0;display:inline') end def form_tag_html(html_options) extra_tags = extra_tags_for_form(html_options) tag(:form, html_options, true) + extra_tags end def form_tag_in_block(html_options, &block) content = capture(&block) output = form_tag_html(html_options) output << content output.safe_concat("
") end # see http://www.w3.org/TR/html4/types.html#type-name def sanitize_to_id(name) name.to_s.delete(']').gsub(/[^-a-zA-Z0-9:.]/, "_") end end end end