Fill-Out Forms Quick Guide

This page is adapted from the NCSA Forms Guide:
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html

See also Forms on web.mit.edu
If you need help with forms at MIT, send email to cwis-help@mit.edu.

The FORM Tag

The FORM tag specifies a fill-out form within an HTML document. More than one fill-out form can be in a single document, but forms cannot be nested.

<FORM METHOD="POST" ACTION="url"> 
... 
</FORM>

Inside a FORM you can have anything except another FORM. Specifically, INPUT, SELECT, and TEXTAREA tags are used to specify interface elements within the form.

The INPUT Tag

The INPUT tag is used to specify a simple input element inside a FORM. It is a standalone tag; it does not surround anything and there is no terminating tag.

The attributes to INPUT are as follows:

TYPE must be one of:
- "text" (text entry field; this is the default)
  Text:
- "checkbox" (a single toggle button; on or off)
  Checkboxes:
- "radio" (a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior)
  Radio buttons:
- "submit" (a pushbutton that causes the current form to be packaged up into a query URL and sent to a remote server)
- "reset" (a pushbutton that causes the various input elements in the form to be reset to their default values)
NAME is the symbolic name (not a displayed name -- normal HTML within the form is used for that) for this input field. This must be present for all types but "submit" and "reset", as it is used when putting together the query string that gets sent to the remote server when the filled-out form is submitted.
VALUE, for a text or password entry field, can be used to specify the default contents of the field. For a checkbox or a radio button, VALUE specifies the value of the button when it is checked (unchecked checkboxes are disregarded when submitting queries); the default value for a checkbox or radio button is "on". For types "submit" and "reset", VALUE can be used to specify the label for the pushbutton.
CHECKED (no value needed) specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons.
SIZE is the physical size of the input field in characters; this is only appropriate for text entry fields and password entry fields. If this is not present, the default is 20. Multiline text entry fields can be specified as SIZE=width,height; e.g. SIZE=60,12. Note: the SIZE attribute should not be used to specify multiline text entry fields now that the TEXTAREA tag is available.
MAXLENGTH is the maximum number of characters that are accepted as input; this is only appropriate for single-line text entry fields . If this is not present, the default will be unlimited. The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.

The SELECT Tag

Inside <FORM> ... </FORM>, any number of SELECT tags are allowed, freely intermixed with other HTML elements (including INPUT and TEXTAREA elements) and text (but not additional forms). In Mosaic for X, SELECT tags are instantiated as Motif option menus and scrolled lists.

Unlike INPUT, SELECT has both opening and closing tags. Inside SELECT, only a sequence of OPTION tags -- each followed by an arbitrary amount of plain text (no HTML markup) -- is allowed; for example:

        <SELECT NAME="a-menu">
        <OPTION> item one
        <OPTION> item two
		 <OPTION> item three
        </SELECT>

        <SELECT NAME="a-menu" SIZE=3>
        <OPTION> item one
        <OPTION> item two
	<OPTION> item three
	etc...
        </SELECT>

The attributes to SELECT are as follows:

NAME is the symbolic name for this SELECT element. This must be present, as it is used when putting together the query string for the submitted form.
SIZE: if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be represented as a Motif option menu. If SIZE is 2 or more, the SELECT will be represented as a Motif scrolled list; the value of SIZE then determines how many items will be visible.
MULTIPLE, if present (no value), specifies that the SELECT should allow multiple selections (n of many behavior). The presence of MULTIPLE forces the SELECT to be represented as a Motif scrolled list, regardless of the value of SIZE.

The attributes to OPTION are as follows:

SELECTED specifies that this option is selected by default. If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.

The TEXTAREA Tag

The TEXTAREA tag can be used to place a multiline text entry field with optional default contents in a fill-out form. The attributes to TEXTAREA are as follows:

NAME is the symbolic name of the text entry field.
ROWS is the number of rows (vertical height in characters) of the text entry field.
COLS is the number of columns (horizontal width in characters) of the text entry field.

TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them.

The TEXTAREA element requires both an opening and a closing tag. A TEXTAREA with no default contents looks like this:

        <TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>

Examples

Twelve examples are available. View the source for each example to see the HTML coding.

Example 1 -- a ludicrously simple fill-out form.
Example 2 -- three text entry fields.
Example 3 -- text entry fields and checkboxes.
Example 4 -- changing the default values of text entry fields and checkboxes.
Example 5 -- changing various attributes of text entry fields.
Example 6 -- multiple, independent forms in a single document.
Example 7 -- radio buttons, "one of many" behavior.
Example 8 -- password entry fields.
Example 9 -- option menus.
Example 10 -- scrolled lists with single and multiple selections.
Example 11 -- multiline text entry areas.
Example 12 -- image maps in forms.
Example 13 -- forms with hidden elements.

Compiled on 4/4/96 for CWIS training session.

Comments to cwis-help@mit.edu
$Date: 1997/06/23 11:30:34 $