Form Creation and Use

Form Use

Forms are used to send information between the user and the site. With forms the user can send information in text boxes, radio button and check box choices, and even upload files.

Forms were not originally part of the HTML spec, but were added early on to all communication.

Without forms, e-commerce wouldn't be possible, as no one could select a product, and checkout. Forget personalized web sites like Facebook or MySpace, as you couldn't write on someone's wall, or post a bulletin, or even sign in.

It is virtually limitless what you can do with a form with a little fore thought.

Form Processing

Forms must have their information processed however. This is usually done with a form processor written in something like PHP, ASP/ASP.Net, etc.

In some cases you can have form information mailed to someone by adding a mailto: to the action attribute (more on that in a minute), but it requires the user have a mail clients like Thunderbird, Eudora, or Outlook installed. Web based mail like Yahoo!Mail, Gmail, etc, will not work for the mailto: forms.

Form Examples

A link I found that had several examples for forms: http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

Form Creation

First you should add form tag. The form tag has several attributes which will allow you to modify how the form works.

name - used if you are using JavaScript to modify the tags
action - the location (URL) of the form processor
method - how information will be sent from one location another
- get - the form information is placed into the URL of the processor.
  ex: http://access2learn.com/form.php?name=walter+wimberly
  This also runs the risk of making the URL too long, as URLS can only be 4,000 characters total.
  It also makes things like passwords unsafe as they are posted in clear view to anyone look over the shoulder
- post - the form information is placed into the http headers so they aren't seen by people.

Adding Elements

Laying out the style of the form is a design decision, and it should be tested against users to determine if it is usable. A couple of things to keep in mind.

Use meaningful labels to describe what the user should input into the form.
Limit the user's choices if possible to ensure accurate data collection. This could be with things like radio buttons, drop-down lists, menu items, etc. Not everything has to be a text box.
Group related items together.
Let people know if something is required.
Align your elements for readability.

There are very few tags actually used in making up forms:

input - used for everything from passwords, to text boxes, to radio buttons. Use the type attribute to define the type of input selector (text [default], password, checkbox, radio, etc.)
select - used to create menus and lists
- option - a tag used to provide the items of the menu/list
textarea - used to create large text sections

Don't forget the final tag, an input of type "submit". This "submits" the form information to the form processor.