Forms: Student Outcomes

• Understand the nature and uses of forms.
• Learn the best practices for creating accessible forms.
• Work with the different form elements.
• Create forms that validate.
• Style forms with CSS.

Forms are the primary way information is gathered and passed from users to the server. They represent one of the most widely used methods of creating customized web applications. It's hard to imagine the Web without forms.
We have grown so accustomed to using form elements in web pages that we don't even notice them for what they are any longer. Some of the most common uses of web forms include:

• Search boxes
• Shopping carts
• Booking a ticket online
• Posting a blog or Twitter entry
• Posting a video to YouTube
• Commenting on a news story
• Writing on a friend's wall on Facebook
• Accessing online banking
• Logging into this course
• Participating in the Class Discussion

Forms are relatively easy to code, yet difficult to design well. The HTML that creates all the form elements is quite straightforward. The form elements provide simple, familiar tools for the user to input information. There is a small but powerful collection of form elements. Together they make up the front-end interface for forms. They include:

• form: creates the form, tells the browser what to do with the form and how to do it
• input: input controls include text fields, password fields, radio buttons, check boxes and more
• button: generic input buttons
• textarea: multi line text boxes with scrolling for large text input
• select: scrolling list, multiple choice or drop menu
• option: options within the select menu
• fieldset: for making groupings of related controls, used to make forms accessible
• legend: assigns an action to the group, used to make forms accessible

Forms use these controls to collect user input. Usually the input is validated using JavaScript before it is passed up to the server to be parsed and processed. There, the server uses server-side scripts to decide how to handle the input depending on how the form was intended to be used. The writing of these scripts is beyond the scope of this course, but in this module we will explore the client side of making usable forms.

Forms & Scripts

The basic elements of a form are relatively simple HTML tags. The information is gathered from the user and passed to the server. The server needs to use a script of some kind in order to process the information it receives. The script can be written in any language the developer favors. Some of the most commonly used languages are Perl, Java, Ruby, PHP and Cold Fusion. The form tag references the script and the script does the work of sorting, formatting, and directing the data to where it should go.
With a good script you can do all kinds of things with your data. The interface between HTTP, which is responsible for the transaction and the script that is being called, is referred to as the Common Gateway Interface, or CGI. The scripts are stored in a folder on the server. By convention the folder is called "cgi_bin". If you are a designer you may not want to/have to write your own scripts. Fortunately, there are many services available for free on the Web. If you need something special you can always hire a programmer, or learn to code them yourself. Your ISP (Internet Service Provider) probably has a number of pre-written ones available for your use. It's worth checking with them to find out. Sometimes they have message boards and email programs available at no extra charge.

An excellent resource is Wufoo.com. This site provides a drag and drop interface for creating forms that it can attach scripts to as well host. It's also a great example of Web 2.0 design. Check it out at: http://wufoo.com/

The Form Tag

The best way to learn how to build a form is to just go ahead and build one. We are going to write a form that allows people to talk about their pets.

 Make a folder and name it "m8_yourlastname". Open up your template page and go to File > Save As and resave the file as "m8_form1_yourlastname.html".

The first step in making a form is declaring a form. The form tag wraps completely around all the controls used in the form. The form tag has a number of attributes, the most important of which are "action" and "method".

The "action" attribute points to the script that the server will use to process the form. It is the URL to the script. It could look like this:

action="cgi_bin/guestbook.php"

If you just want to have the data sent to your email address with no formatting you can always just use your email address as the action. For the purposes of this module you can send your forms to your own email address. The code will look something like this:

action="mailto:me@mysite.com"

The method attribute has two values:

• GET
• POST

The method specifies how the information is transferred to the server. The information is transferred in the form of "name=value pairs". The pairs are separated by "&". A series of "name=value" pairs looks like this:

dogName=fido&dogBreed=whippet&favoritefood=kibble

The GET method appends the "name=value" pairs to the end of the URL when the form is submitted. As a result it is visible to everyone while it is being passed. This is fine for short variables that are not sensitive, but you may think twice about asking people to send their credit card numbers, exposing them to prying eyes. An example of a GET method looks like this:

http://www.google.com/search?hl=en&ie=ISO-8859-1&q=dante

The POST method attaches the data after the URL and certain header information. The key word POST tells the server to expect more information after the header information has been read. This is the method that the W3C recommends. Sensitive information is not visible and secrets are not exposed. The POST method can handle long, elaborate postings.
Add the form tag to your HTML page like this: