Home Solidarrow Ruby on Rails Cheatsheets

Form Helpers Cheatsheet

Create forms, check boxes, radio buttons, select lists and more using Rails' built-in form helpers.

country_select - creates a drop-down select list of most countries in the world
form_for, fields_for - form helpers to wrap model objects
form_tag helpers - helpers for form fields that do not have a corresponding model
input field helpers - standard input fields, such as text fields and check boxes
select - helpers to create drop-down select lists
time_zone_select - provides a list of time zones in a drop-down list

country_select

country_options_for_select

    # Input
    <%= country_options_for_select("United Kingdom", ["France", "United States", "Canada"]) %>

    # Output
    <option value="France">France</option>
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>
    <option value="">-------------</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    ..
    <option value="Zimbabwe">Zimbabwe</option>

country_select

    # Input
    <%= country_select(:user, :country, ["France", "United States", "Canada"], {}, :class => "select_country") %>

    # Output
    <select id="user_country" name="user[country]">
      <option value="France">France</option>
      <option value="United States">United States</option>
      <option value="Canada">Canada</option>
      <option value="">-------------</option>
      <option value="Afghanistan">Afghanistan</option> 
      ..
      <option value="Zimbabwe">Zimbabwe</option> 
    </select>

form_for and fields_for

form_for

    # Input
    <% form_for (:person, @person, :url => { :action => 'update', :id => 1 }, :html => { :multipart => :true}) do  |form|%> 
      Name:    <%= form.text_field  :title, :size => 30 %>
      Notes:   <%= form.text_area  :content, :size => "10x20" %>
      Photo:   <%= form.file_field   :photo_data %>
      <%= submit_tag "Update" %>
    <% end %>

    # Output
    <form action="/user/update/1" enctype="multipart/form-data" method="post"> 
      Name:  <input id="person_title" name="person[title]" size="30" type="text" />
      Notes: <textarea cols="10" id="person_content" name="person[content]" rows="20"></textarea>
      Photo: <input id="person_photo_data" name="person[photo_data]" type="file" />
      <input name="commit" type="submit" value="Update" />
    </form>

fields_for

    # Input
    <% fields_for :phone, @phone do |phone_fields| %> 
      Home:   <%= phone_fields.text_field :home %>
      Work:   <%= phone_fields.text_field :work %>
      Cell:   <%= phone_fields.text_field :cell %>  
    <% end %> 

    # Output
    Home: <input id="phone_home" name="phone[home]" type="text" />
    Work: <input id="phone_work" name="phone[work]" type="text" />
    Cell: <input id="phone_cell" name="phone[cell]" type="text" />

form_tag helpers

For forms which do not have a corresponding model. Syntax is identical to form helpers, but the first argument is the name of the field, not the model:

    # Input
    <%= file_field_tag(:avatar, :accept => "image/png,image/gif") %>

    # Output
    <input accept="image/png,image/gif,image/jpeg" id="avatar" name="avatar" type="file" />

`check_box_tag`	`field_set_tag`	`file_field_tag`
`form_tag`	`hidden_field_tag`	`image_submit_tag`
`password_field_tag`	`radio_button_tag`	`select_tag`
`submit_tag`	`text_area_tag`	`text_field_tag`

Input fields

text_field

    # Input
    <%= text_field(:post, :title, :size => 20, :class => "blue" ) %>

    # Output
    <input type="text" id="post_title" name="post[title]" size="20" value="#{post.title}" class="blue" />

text_area

    # Input
    <%= text_area(:post, :comment, :size => "20x10", :class => "area" ) %>

    # Output
    <textarea cols="20" rows="10" id="post_comment" name="post[comment]" class="area">#{@post.comment}</textarea>

file_field

    # Input
    <%= file_field(:post, :attachment, :class => "file_input")  %>

    # Output
    <input type="file" id="post_attachment" name="post[attachment]" class="file_input">

radio_button

    # Input
    <%= radio_button(:post, :category, "ruby") %>
    <%= radio_button(:post, :category, "python") %>

    # Output
    <input type="radio" id="post_category" name="post[category]" value="ruby">
    <input type="radio" id="post_category" name="post[category]" value="python">

check_box

    # Input
    <%= check_box(:post, :validated, {}, "yes", "no") %>

    # Ouput
    <input type="checkbox" id="post_validated" name="post[validated]" value="yes" />
    <input type="hidden" name="post[validated]" value="no">

password_field

    # Input
    <%= password_field(:login, :pass, :size => 20, :class => "password_input") %>

    # Output
    <input type="password" id="login_pass" name="login[pass]" value="#{@login.pass}" size="20" class="password_input" />

hidden_field

    # Input
    hidden_field(:signup, :pass_confirm)

    # Output
    <input type="hidden" id="signup_pass_confirm" name="signup[pass_confirm]" value="#{@signup.pass_confirm}" />

select

collection_select

    # Input
    <%= collection_select(:user, :id, User.find(:all, :order => "name"), :id, :name, {}, :class => "red") %>

    # Output
    <select id="user_id" name="user[id]" class="red">
      <option value="1">David</option>
    </select>

option_groups_from_collection_for_select

    # Input
    <%= option_groups_from_collection_for_select(Author.find(:all), :books, :name, :id, :title, 3) %>

    # Output
    <optgroup label="J K Rowling">
      <option_ value="1">Order of the Phoenix</option>
      <option value="4">The Deathly Hallows</option>
    </optgroup>
    <optgroup label="Douglas Coupland">
      <option value="3" selected="selected">Generation X</option>
      <option value="12">Girlfriend In A Coma</option>
      <option value="5">Shampoo Planet</option>
    </optgroup>

options_for_select

    # Input
    <%= options_for_select( {"Mary" => "£2", "Lucy" => "£4" ,"Anne" => "£6"}, ["£4", "£6"]) %>

    # Output
    <option value="£2">Mary</option>
    <option value="£4" selected="selected">Lucy</option> 
    <option value="£6" selected="selected">Anne</option>

options_from_collection_for_select

    # Input
    <%= options_from_collection_for_select(Author.find(:all), :id, :name) %>

    # Output
    <option value="#{@author.id}">#{@author.name}</option>

select

    # Input
    <%= select(:post, :person_id, Person.find(:all).collect { |p| [p.name, p.id] }, {:include_blank => true}) %>

    # Output
    <select name="post[person_id]">
      <option value=""></option>
      <option value="1" selected="selected">David</option>
       <option value="2">Sam</option>
    </select>

time_zone_select

time_zone_options_for_select

    # Input
    <%= time_zone_options_for_select ("Arizona", TimeZone.us_zones) %>

    # Output
    <option value="Hawaii">(GMT-10:00) Hawaii</option>
    <option value="Alaska">(GMT-09:00) Alaska</option>
    <option value="Pacific Time (US &amp; Canada)">(GMT-08:00) Pacific Time (US &amp; Canada)</option>
    <option value="Arizona" selected="selected">(GMT-07:00) Arizona</option>
    ..
    <option value="Nuku’alofa">(GMT+13:00) Nuku’alofa</option>

time_zone_select

    # Input
    <%= time_zone_select(:user, :zone, TimeZone.us_zones, { :include_blank => "Please select your time zone" }, :class => "time_select") %>

    # Output
    <select class="time_select" id="user_zone" name="user[zone]">
      <option value="Hawaii">(GMT-10:00) Hawaii</option>
      <option value="Alaska">(GMT-09:00) Alaska</option>
      <option value="Pacific Time (US &amp; Canada)">(GMT-08:00) Pacific Time (US &amp; Canada)</option>
      <option value="Arizona">(GMT-07:00) Arizona</option>
      ..
      <option value="Nuku’alofa">(GMT+13:00) Nuku’alofa</option>
    </select>

Comments

22 DAYS AGO
vinay

Thanks

thanks for this nice article....

Reply to this comment

Add new comment

PDF version

Beginning File Uploads to the Database

Learn how to upload files to the database, then retrieve and display them More

Form Helpers Cheatsheet

Create forms, check boxes, radio buttons, select lists and more using Rails' built-in form helpers.

country_select

country_options_for_select

country_select

form_for and fields_for

form_for

fields_for

form_tag helpers

Input fields

text_field

text_area

file_field

radio_button

check_box

password_field

hidden_field

select

collection_select

option_groups_from_collection_for_select

options_for_select

options_from_collection_for_select

select

time_zone_select

time_zone_options_for_select

time_zone_select

Comments

Thanks

RELATED ARTICLE

Beginning File Uploads to the Database