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:
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:
