Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Form Helpers in Rails Part 1 (Basics)

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 510
    Comment on it

    Hi Friends,
    In my previous blogs, I have talked about so many topics related to Ruby on Rails. Now today I am going to start form helpers in rails. As all the points can't be covered in one blog, I am dividing it into parts. Today I will be dealing with basic forms, helpers available in rails form and a generic search form. As we all know that, forms are the user interface of web where user can give input that is sent to server for further processing, and to get response according to that. Let's take a simple example, where you enter a number in a text box and a get/post request goes to server to tell whether the number is even is positive or negative. In rails you can generate this kind of form using a simplest of form helpers, i.e form_tag. It will be written as:

    <%= form_tag("/check_number", method: "post") do %>
      <%= label_tag(:n, "Enter Number:") %>
      <%= text_field_tag(:n) %>
      <%= submit_tag("Submit") %>
    <% end %>

    So if we go step by step here, the form_tag is used to create form tag, the first argument is the action url and the second argument represents method (can be get or post). Now in the next line label_tag is used for the supportive text of input box as a label, text_field_tag is used to create text box for the number and at last submit_tag is used to create submit button for the form. So the generate HTML of the form would be like this:

    <form accept-charset="UTF-8" action="/check_number" method="post">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="J7CBxfHalt49OSHp27hblqK20c9PgwJ108nDHX/8Cts=" />
    <label for="n">Enter Number:</label>
    <input id="n" name="n" type="text" />
    <input name="commit" type="submit" value="Submit" />

    Here you must have understood each lines except the two lines, which are used with type hidden.In first line the attribute value utf8 enforces browsers to properly respect your form's character encoding and it is generated in both get and post request by default. The next input element authenticity_token, is a security feature of Rails, that is for cross-site request forgery protection, and is generated in every non-GET requests.

    Now as we have seen the basic structure, let's see what we can pass in form helpers form_tag. So it accepts two arguments: the path for the action and an options hash. We can pass url/actions/controllers in hashes and the rails helper will append them into a valid URL. So you need to seperate the two hashes by specifying one into curly braces and as next argument, you can pass HTML classes, id's etc. Lets see an example:

    form_tag({controller: "validate", action: "check_number"}, method: "get", class: "my_form")
    # => '<form accept-charset="UTF-8" action="/validate/check_number" method="get" class="my_form">'

    Thus that was the basic form with form_tag. Now lets take a look to few of the helpers available in rails and their generated HTML, that can make your task easy:

    (a) text_field_tag: For text fields

    <%= text_field_tag(:n) %>
    # => '<input id="n" name="n" type="text" />'

    (b) radio_button_tag: For Radio buttons

    <%= radio_button_tag(:sex, "male") %>
    <%= label_tag(:sex_male, "Male") %>
    <%= radio_button_tag(:sex, "female") %>
    <%= label_tag(:sex_female, "Female") %>
    # = >
    <input id="sex_male" name="sex" type="radio" value="male" />
    <label for="sex_male">Male</label>
    <input id="sex_female" name="sex" type="radio" value="female" />
    <label for="sex_female">Female</label>

    (c) check_box_tag: For Check boxes

    <%= check_box_tag(:swimming) %>
    <%= label_tag(:swimming, "Swimming") %>
    <%= check_box_tag(:singing) %>
    <%= label_tag(:singing, "Singing") %>
    # = >
    <input id="swimming" name="swimming" type="checkbox" value="1" />
    <label for="swimming">Swimming</label>
    <input id="singing" name="singing" type="checkbox" value="1" />
    <label for="singing">Singing</label>

    (d) text_area_tag: For Text Area

    <%= text_area_tag(:description, "Description Text", size: "20x8") %>
        # = >
    <textarea id="description" name="description" cols="20" rows="8">Description Text</textarea>

    (e) hidden_field_tag: For hidden fields

    <%= hidden_field_tag(:node_id, "123456") %>
    # = >
    <input id="node_id" name="node_id" type="hidden" value="123456" />

    (f) password_field_tag: For password fileds

    <%= password_field_tag(:user_pswd) %>
    # = >
    <input id="user_pswd" name="user_pswd" type="password" />

    (g) search_field: For Search field

    <%= search_field(:blog, :title) %>
    # = >
    <input id="blog_title" name="blog[title]" type="search" />

    (h) telephone_field: For telephone numbers

    <%= telephone_field(:user, :phone) %>
    # = >
    <input id="user_phone" name="user[phone]" type="tel" />

    (i) date_field: For date field

    <%= date_field(:account, :created_on) %>
    # = >
    <input id="account_created_on" name="account[created_on]" type="date" />

    (j) email_field: For email input

    <%= email_field(:user, :email_address) %>
    # = >
    <input id="user_email_address" name="user[email_address]" type="email" />

    (k) color_field: For color field

    <%= color_field(:girl, :dress_code) %>
        # = >
        <input id="girl_dress_code" name="girl[dress_code]" type="color" value="#3498db" />

    (l) number_field: For number filed

    <%= number_field(:cash, :price, in: 1.0..20.0, step: 0.2) %>
        # = > 
        <input id="cash_price" max="50.0" min="1.0" name="product[price]" step="0.2" type="number" />

    (m) range_field: For range input fields

    <%= range_field(:transactions, :discount, in: 1..50) %>
    # = >
    <input id="transactions_discount" max="50" min="1" name="product[discount]" type="range" />

    For part-2 of form helpers. click on the link below:
    Form Helpers in Rails Part-2

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: