CSC/ECE 517 Fall 2012/ch1b 1w66 as

Forms-Ruby

Introduction

Forms in web applications are an essential interface for user input. However, form markup can quickly become tedious to write and maintain because of form control naming and their numerous attributes. Rails deals away with these complexities by providing view helpers for generating form markup.<ref>http://www.guides.rubyonrails.org/form_helpers.html</ref> Rails provides excellent features to create forms and gather user input. Forms in Rails are an effective way to obtain user input in a convenient manner. Forms can include different types of data fields that will help obtain different types of data. For example, Text box can fetch a few words from the user and Text Area, a paragraph. Forms are embedded in a Web Application and are very user-friendly. Forms in Rails also have in-built functionalities to verify the data the user enters, validate it using a set of predefined rules, display corresponding error messages(in case of non-compliance) and storing the information in the database if it passes validation.

Creating a Form

Forms written in Rails are automatically generated as HTML Forms and are rendered into views. Forms are created in Rails using the basic helper called Form_tag

<%= form_tag do %>
  Form contents
<% end %>

When form_tag is called as above, it creates a <form> tag which, when submitted, will POST to the current page. For instance, assuming the current page is /home/index, the generated HTML will look like this (some line breaks added for readability): <ref>http://edgeguides.rubyonrails.org/form_helpers.html#making-select-boxes-with-ease</ref>

<form accept-charset="UTF-8" action="/home/index" method="post">
  <div style="margin:0;padding:0">
    <input name="utf8" type="hidden" value="✓" />
    <input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />
  </div>
  Form contents
</form>

Forms in Rails consist of Elements, which are labels, input elements, submit buttons etc.

Text Fields

Text Fields in Rails Forms allow the user to input a few words or a single word. These are generally used to capture Names, Addresses, Phone numbers etc. To create a text field in Rails Forms use the following syntax:<ref>http://www.tutorialspoint.com/ruby-on-rails/rails-html-forms.htm</ref>

<%= text_field :modelname, :attribute_name, options %>

In the example below we create a text field of size 20 characters :

<%= text_field "person", "name", "size" => 20 %>

This will generate following code:

<input type="text" id="person_name" name="person[name]"
      size="20" value="<%= @person.name %>" />

Rails also allows us to create Hidden Fields. Hidden Fields don't show up on the Page and hence can contain any value which the user cannot see or change. To create hidden fields use the following syntax;

<%= hidden_field ... %>

To create password fields use the following syntax;

<%= password_field ... %>

To create file upload fields use the following syntax;

<%= file_field ... %>

TextArea Fields

Text Area Fields allow us to enter information in paragraphs, i.e, enter data that has more than a few words and sentences. Text Area Fields are also adjustable in size. To change the size of a Text Area Field, we are required to change the rows and cols values to numbers of our interest. <ref>http://www.tutorialspoint.com/ruby-on-rails/rails-html-forms.htm</ref> To create a text area use the following syntax:

<%= text_area ... %>

Have a look at the following example:

<%= text_area "post", "body", "cols" => 20, "rows" => 40%>

This will generate the following code:

<textarea cols="20" rows="40" id="post_body" name="post[body]">
<%={@post.body}%>
</textarea>

Radio Button

Rails Forms can also include Radio Button, for choice based User Inputs.

To create a Radio Button use the following syantax:

<%= radio_button :modelname, :attribute, :tag_value, options %>

Have a look at the following example:

 radio_button("post", "category", "rails")
 radio_button("post", "category", "java")

This will generate following code:

<input type="radio" id="post_category" name="post[category]" 
value="rails" checked="checked" />
<input type="radio" id="post_category" name="post[category]" 
                    value="java" />

References

<references></references>