Introduction to HTML Forms

Here is a brief introduction to the tags that display forms in HTML.

Forms consist of

• Descriptions (explanation, instructions)
• Places to enter information
• free form (enter text)
• check boxes
• choose only one
• choose all that are appropriate
• selection lists (control size of the display area)
• choose one
• choose all that are appropriate
• Submit "button"
• Clear form "button"

• < FORM ACTION="form processing application" METHOD=POST> ... 
• < INPUT TYPE="text" NAME="fieldname">

Some optional entries in the Input type text definition:
• SIZE="35" (Size of the box where text is entered)
• MAXSIZE="50" (Maximum number of characters accepted, even with scrolling)
• < INPUT TYPE="PASSWORD" NAME="fieldname">

What the user types is hidden.
• < INPUT TYPE="radio" NAME="fieldname" VALUE ="value">

Only one choice may be made from among the items in the list
• < INPUT TYPE="checkbox" NAME="choicename">

Multiple items may be chosen from the items in the list
• <INPUT TYPE="submit" VALUE ="label for the button">
• <INPUT TYPE="reset"  VALUE="label for the button">

An important difference between radio boxes and checkboxes is this: In a radio box, the same NAME is used repeatedly, with different VALUEs for the different choices. Since only one value can be selected, there is no ambiguity about the value associated with the name. (The information sent to the program that processes the data is in the form fieldname=value)  In checkboxes, each value has a different name. Thus multiple instances of the same name will not occur when more than one selection is checked. (The information sent to the program is of the form choicename=on for each choice that is checked.)

To preselect (use a default), use CHECKED wherever we want.

Each of the form components above is demonstrated in a sample form that you can examine.

There are additional formatting considerations in forms design. Allowing the user of the form to select from options, rather than allowing free text input,  helps get  input that is consistent and easy to process. However, long lists can take up a lot of space and distract from the imporant features of the form.  Selection lists provide a menu of choices, but the space they use can be controlled by the form designer. Selection lists may be defined as pop-up list or as scrolling lists. The selection is defined with the following tags:

   < SELECT NAME="itemname">
    < OPTION> Choice one
     < OPTION>Choice two
     < OPTION>Choice three
   </SELECT>

• MULTIPLE allows more than one item to be chosen
• SIZE = allows a set number of choices to be displayed and changes the pop-up list format to a scrolling list format. (If no size is specified, the list is a pop-up list and one choice is displayed initially.

cassel@vill.edu
22 January 1996
Revised 06 September 2000