Form Submission

It is important to remember that the purpose of forms is to collect information from users. Of course, this information has some further purpose, usually involving processing the submitted information in some fashion. Although browser-based scripts written in JavaScript can perform certain preliminary manipulation of the data, the bulk of processing activity takes place on the server, using a server-based programming language.

The manner in which server-based processing takes place is important to understand when designing forms. Although you will not be learning form processing here, you need a general understanding of how the server identifies form information submitted to it.

When a submit button or submit image is clicked, information from the form is packaged for delivery to the page identified in the action attribute of the <form> tag. When forms are submitted to a Web server, this information is transmitted by the method indicated, which can be either get or post. Usually, form information is submitted to the server using the post method, meaning that it arrives at the server in a separate data stream from the URL request. When the information arrives, it is made available to the URL page and its processing script.

Name/Value Pairs

Form information is identified and processed at the server through names and values. Each field on a form is assigned a name when the form is created. This unique identifier is used to reference that particular form control and the value associated with it. When information is typed into a textbox, for example, that text becomes the value of the control and can be referenced through the name assigned to the textbox. Likewise, when the user clicks on a checkbox or selects from a drop-down list, the data value associated with the checkbox or selection choice is referenced through the name assigned to that particular control.

Thus, form information ends up as field names and associated data values submitted by the user. Information arrives at the processing page as a string of name/value pairs in the format:

    fieldname1=value1&fieldname2=value2&fieldname3=value3....

Control names and their associated values are paired with an equal sign (=) and are connected with other pairs of names and values by ampersands (&). One of the first tasks of a processing script is to parse this string of characters into separate names and values in order to extract the information entered into the form. Thereafter, the script manipulates the information according to whatever processing steps are necessary.

A Form Example

The following form does not include all the possible field types, but it does illustrate the approach to creating a simple form.

Figure 10-43. A data entry form.

The form elements have been coded inside a table structure to help align the labels and fields. You should recognize all of the form controls in the following code listing.

    <form name="MyForm" action="MembershipForm.htm" method="post">

    <h2>Membership Application Form</h2>

    <table>
    <tr>
      <td>First Name: </td>
      <td><input type="text" name="FirstName" size="15" maxlength="15"/></td>
    </tr>
    <tr>
      <td>Last Name: </td>
      <td><input type="text" name="LastName" size="15" maxlength="15"/></td>
    </tr>
    <tr>
      <td>Email: </td>
      <td><input type="text" name="Email" size="30" maxlength="50"/></td>
    </tr>
    <tr>
      <td>Gender: </td>
      <td><input type="radio" name="Gender" value="F"/>Female
          <input type="radio" name="Gender" value="M"/>Male</td>
    </tr>
    <tr>
      <td>Major: </td>
      <td><select name="Major">
            <option>Web Development</option>
            <option>Digital Media</option>
            <option>Database Administration</option>
            <option>Networking</option>
            <option>Software Development</option>
            <option>Systems Analysis</option>
          </select></td>
    </tr>
    <tr>
      <td>Reason for<br/>Joining: </td>
      <td><textarea name="Reason" cols="30" rows="5"></textarea></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" name="SubmitButton" value="Submit Form"/></td>
    </tr>
    </table>

    </form>

Listing 11-24. Code for a data entry form.

The action attribute of the <form> tag is the MembershipForm.htm page. That is, information submitted from the form is made available to this page when it is transmitted to the server. The method is post, meaning that form name/value pairs are sent as a separate data stream to the URL specified in the actionattribute. The entire set of name/value pairs for the filled-out form would resemble the following:

    FirstName=Alice&Lastname=Underwood&Email=a_underwood@hotmail.com&
    Gender=F&Major=Web+Development&Reason=To+meet+new+friends+and+make
    +Web+pages&SubmitButton=Submit+Form

Note that blank spaces in the string are replaced by the plus sign (+).

If the get method is used, the entire set of name/value pairs for the filled-out form would be appended as a query string and passed to the URL specified in the actionattribute as shown below:

    MembershipForm.html?FirstName=Alice&Lastname=Underwood&Email=a_underwood@hotmail.com&
    Gender=F&Major=Web+Development&Reason=To+meet+new+friends+and+make
    +Web+pages&SubmitButton=Submit+Form

When this input string is received at the server, it is broken down into its component parts so that individual names and values are associated:

    FirstName=Alice
    LastName=Underwood
    Email=a_underwood@hotmail.com
    Gender=F
    Major=Web Development
    Reason=To meet new friends and make Web pages

The manner in which this information is processed by the receiving page depends on the script contained on that page.

Form Submission

Form submission data is typically processed by a client-side script, server-side script, or a combination of both. Client-side scripts are most commonly written in JavaScript. Since JavaScript is built into the browser, processing takes place at the browser or client-side without having the data passed to a web server for processing. Client-side scripts are faster and generally used to validate form input data.

Server-side scripting is a technology by which a script is run on a web server to dynamically generate and process web pages and form input. Common server-side scripting technologies include PHP, Ruby on Rails, Microsoft's ASP.NET, Adobe Coldfusion, and Java. Since server-side scripts are run on the web-server, these scripts have the ability to interactive with databases and file handling.

In most web applications, form data is first processed by a client-side script for the purpose of data validation and page customization. Next, the data is passed on to a server-side script where another level of data validation occurs followed by the data being written to a database.

TOP | NEXT: Forms & CSS