Rails Form Helpers/Builders Cheatsheet

Form Helpers.md

• Note the do after the form_tag

<%= form_tag("/search", method: "get") do %>
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q, required: true) %>
  <%= submit_tag("Search") %>
<% end %>

= select_tag :title, options_for_select(["Dr", "Mr", "Mrs", "Ms", "Mdm"]), required: true
= select_tag :category, options_for_select([ ["c1", 1], ["c2", 2] ])

= label_tag :gender
%label{class:"radio"}
  = radio_button_tag :gender, "Male"
  %span Male
%label{class:"radio"}
  = radio_button_tag :gender, "Female"
  %span Female

<%= text_area_tag(:message, "Hi, nice site", size: "24x6") %>
<%= password_field_tag(:password) %>
<%= hidden_field_tag(:parent_id, "5") %>
<%= search_field(:user, :name) %>
<%= telephone_field(:user, :phone) %>
<%= date_field(:user, :born_on) %>
<%= datetime_field(:user, :meeting_time) %>
<%= datetime_local_field(:user, :graduation_day) %>
<%= month_field(:user, :birthday_month) %>
<%= week_field(:user, :birthday_week) %>
<%= url_field(:user, :homepage) %>
<%= email_field(:user, :address) %>
<%= color_field(:user, :favorite_color) %>
<%= time_field(:task, :started_at) %>

A full form

%h1 Booking Form

%div.row
  %div.span12

    = form_tag action: "create", method: 'post' do
      %fieldset
        = label_tag  :departure_date, "Departure Date:"
        = select_tag :departure_date, options_for_select(@departures_options)

        = label_tag  :title, "Title"
        = select_tag :title, options_for_select(["Dr", "Mr", "Mrs", "Ms", "Mdm"])

        = label_tag      :first_name, "First Name"
        = text_field_tag :first_name

        = label_tag      :last_name, "Last Name"
        = text_field_tag :last_name

        = label_tag :citizenship
        = select_tag(:citizenship, options_for_select(@countries))

        = label_tag :gender
        %label{class:"radio"}
          = radio_button_tag :gender, "Male"
          %span Male
        %label{class:"radio"}
          = radio_button_tag :gender, "Female"
          %span Female

        = label_tag :date_of_birth
        %input{type:"date", id:"date_of_birth", name:"date_of_birth"}

        = label_tag     :address
        = text_area_tag :address

        = label_tag      :postal
        = text_field_tag :postal

        = label_tag      :city
        = text_field_tag :city

        = label_tag :country
        = select_tag(:country, options_for_select(@countries_with_iso))

        = label_tag :phone
        %input{type:"tel", id:"phone", name:"phone"}

        = label_tag :mobile
        %input{type:"tel", id:"mobile", name:"mobile"}

        = label_tag :email
        %input{type:"email", id:"email", name:"email"}

        %br

        = button_tag "Submit Booking", class: "btn"

A form with nested attributes

• This is needed if you need to custom build your form eg. API form, no model to use, etc

%h1 Booking Form

%div.row
  %div.span12

    = form_tag action: "create", method: 'post' do

      %h2 Select Your Departure Date
      = label_tag  :departure_date, "Departure Date:"
      = select_tag :departure_date, options_for_select(@departures_options)

      %h2 Enter Guests Information:
      - 2.times do |index|
        - prefix = "guests[#{index}]"

        = label_tag  "#{prefix}[title]", "Title"
        = select_tag "#{prefix}[title]", options_for_select(["Dr", "Mr", "Mrs", "Ms", "Mdm"])

        = label_tag      "#{prefix}[first_name]", "First Name"
        = text_field_tag "#{prefix}[first_name]"

        = label_tag      "#{prefix}[last_name]", "Last Name"
        = text_field_tag "#{prefix}[last_name]"

        = label_tag "#{prefix}[citizenship]", "Citizenship"
        = select_tag "#{prefix}[citizenship]", options_for_select(@countries)

        = label_tag "#{prefix}[gender]", "Gender"
        %label{class:"radio"}
          = radio_button_tag "#{prefix}[gender]", "Male"
          %span Male
        %label{class:"radio"}
          = radio_button_tag "#{prefix}[gender]", "Female"
          %span Female

        = label_tag "#{prefix}[date_of_birth]", "Date Of Birth"
        %input{type:"date", id:"#{prefix}[date_of_birth]", name:"#{prefix}[date_of_birth]"}

        = label_tag     "#{prefix}[address]", "Address"
        = text_area_tag "#{prefix}[address]"

        = label_tag      "#{prefix}[postal]", "Postal"
        = text_field_tag "#{prefix}[postal]"

        = label_tag      "#{prefix}[city]", "City"
        = text_field_tag "#{prefix}[city]"

        = label_tag "#{prefix}[country]", "Country"
        = select_tag "#{prefix}[country]", options_for_select(@countries_with_iso)

        = label_tag "#{prefix}[phone]", "Phone"
        %input{type:"tel", id:"#{prefix}[phone]", name:"#{prefix}[phone]"}

        = label_tag "#{prefix}[mobile]", "Mobile"
        %input{type:"tel", id:"#{prefix}[mobile]", name:"#{prefix}[mobile]"}

        = label_tag "#{prefix}[email]", "Email"
        %input{type:"email", id:"#{prefix}[email]", name:"#{prefix}[email]"}

        %br

      = button_tag "Submit Booking", class: "btn"