Forms

Lecture Notes for CS142
Winter Quarter 2009
John Ousterhout

• Forms: HTML mechanism for user input
  • A collection of HTML elements
  • A protocol for communicating data to the server
• Form:
  • Collection of elements
  • Each element has a name and a value (strings)
  • Different type of elements provide different ways for the user to edit the value (text entry, checkbox, menu, etc.)
• Simple form example:

  <form action="/x/y/z" method="POST">
    Value1: <input type="text" name="value1"/><br />
    Value2: <input type="text" name="value2" value="47"/><br />
    <input type="submit" value="Submit"/>
  </form>
  

  • <form> element: overall container for form elements
    • action specifies a URL to invoke when the form is submitted.
    • method attribute indicates which HTTP method to use when communicating with the server; defaults to GET but should always be POST (GET limits size of posted data)
    • Arbitrary HTML OK inside <form>
    • Can have more than one form in a page
  • <input> elements: controls for entering data.
    • The type attribute specifies which of several controls to use. text is a simple one-line text entry.
    • The name attribute associates a name with the information typed by the user.
  • <input type="submit"> creates a button for submitting the form.
    • value attribute specifies text to display in button.
• Other form elements: see formElements.html for examples.
• Initial values for form elements: use value and other attributes.
• Custom form elements:
  • Use HTML to display custom controls (images, tables, etc.).
  • Respond to events with Javascript.
  • Store the form data in hidden elements.
• When the submit button is clicked:
  • HTTP POST request is made to the URL given by the action attribute of the <form> element.
  • Body of the request contains name-value pairs from the <input> elements, URL-encoded (looks like query data in a URL).
  • Result is an HTML page that replaces the form page.

• Form flow from the server side:
  • One URL displays form, possibly with initial values
  • POST goes to a second URL
  • Redirect after POST (avoids history issues)
  • Must return to the form after errors
    • Retain existing form data
    • Display error messages (next to related form elements?)
• Divide URLs:
  • Those that display information (including forms) (GET method)
  • Those that invoke modifications (POST method)
  • Don't mix these two
• Rails support for forms: ties in nicely to the ORM system.
  • Form used to edit part or all of a record
  • Form helpers: methods to generate HTML elements for forms: don't write HTML directly.
  • Validation: mechanism for detecting errors in input data.
• Form helpers example (student record):
  • Controller:

    @student = Student.find(params[:id])
    

  • View:

    <% form_for(:student, :url => {:action => :modify,
        :id => @student.id}) do |form| %>
      <table class="form">
        <tr>
          <td class="label">Name:<td>
          <td><%= form.text_field(:name) %><td>
        </tr>
        <tr>
          <td class="label">Date of birth:<td>
          <td><%= form.text_field(:birth) %><td>
        </tr>
        <tr>
          <td class="label">Grade-point average:<td>
          <td><%= form.text_field(:gpa) %><td>
        </tr>
        <tr>
          <td class="label">Graduation year:<td>
          <td><%= form.text_field(:grad) %><td>
        </tr>
      <table>
      <%= submit_tag "Modify Student" %>
    <% end %>
    

  • :student argument to form_for: identifies both the model class and the name of a variable containing data
  • :url argument to form_for: URL where form will get posted
  • form.text_field: returns an HTML input element of type text, provides initial value from corresponding attribute of @student.
• Handling post:

  def modify
    @student = Student.find(params[:id])
    if @student.update_attributes(params[:student]) then
      redirect_to(:action => :show)
    else
      render(:action => :edit)
    end
  end
  

  • Form data automatically available in params: nested hash named after the form.
  • update_attributes copies values from the form data into the model object and automatically saves the model object.
• Error handling in Rails forms:
  • Validation:

    class Student < ActiveRecord::Base
      def validate
        if (gpa < 0) || (gpa > 4.0) then
          errors.add(:gpa, "must be between 0.0 and 4.0")
        end
      end
      
      validates_format_of :birth, :with=> /\d\d\d\d-\d\d-\d\d/,
          :message => "must have format YYYY-MM-DD"
    end
    

    • Validation methods get invoked whenever the object is saved.
    • errors.add saves an error message related to a particular attribute of the object.
    • Several built-in validators, such as validates_format_of.
    • If there is a validation error, methods such as save and update_attributes abort and return false.
  • After a validation error, the action method explicitly re-renders the form.
  • Form helpers:
    • error_messages_for generates HTML for all the error messages for an object
    • form.text_field and similar methods add an extra <div class="fieldWithErrors"> around any form elements for which there are error messages: use CSS to display differently.
• Odds and ends: Rails forms automatically include an authenticity token to prevent CSRF attacks.

• File uploading:
  • If you use <input type="file">, then you must request a different protocol for posting data:

    <form method="POST" enctype="multipart/form-data">
    

  • In Rails, add an extra argument to the form_for method:

    form_for(... :url => {...}, :html => {:multipart => true})
    

  • This causes the form data to be sent to the server in a different format (MIME multi-part message).
  • Rails knows how to handle this format (some frameworks don't):
    • Normal form data available in the normal way
    • Siphons off uploaded files to files on disk; the params value for this form element is an object with lots of methods.
  • read method: returns contents of uploaded file.
  • original_filename method: returns file name as selected in the browser.