Next: Tables Tags
Up: Forms
Prev: Executing Commands via the Web

The Forms Tags

The HTML forms tags mostly tell the browser to add user interface elements like input boxes, radio buttons and pulldown lists to the web page. The <FORM> tag is used to tell the browser how to send the data entered in the form to a program on the server for processing.

This page is heavily indebted to The instantaneous guide for CGI Scripts and HTML Forms from the University of Kansas, and the NCSA Fill-out Forms page, which has excellent examples.

Forms Tag Summary

<FORM>...</FORM>: Define an input form.
Attributes: ACTION, METHOD, ENCTYPE
<INPUT>: Define an input field.
Attributes: NAME, TYPE, VALUE, CHECKED, SIZE, MAXLENGTH
<SELECT>...</SELECT>: Define a selection list.
Attributes: NAME, MULTIPLE, SIZE
<OPTION>: Define a selection list selection (within a SELECT).
Attribute: SELECTED
<TEXTAREA>...</TEXTAREA>: Define a text input window.
Attribute: NAME, ROWS, COLS

The FORM Tag

The FORM tags are used to group a collection of interface elements together, and instruct the browser how to send the data back to a CGI script on a web server for processing. You can have several forms on a web page, each associated with a different script.

A typical usage is:

<FORM ACTION="myscript.cgi" METHOD=POST> ... </FORM> The ACTION attribute specifies the name of the processing script. The value is a URL.

The METHOD attribute specifies the communication protocol between the browser and the server. There are two options, POST and GET.

GET -- this is the default method and causes the fill-out form contents to be appended to the URL as if they were a normal query.
POST -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.

The GET method is a bit simpler, but because the data is transferred using environment variables, there are length restrictions. POST is also slightly preferable fro security reasons too.

The INPUT Tag

The input tag currently supports the following data types (depending somewhat on which client you are using):

TEXT: For entering a single line of text. The SIZE attribute can be used to specify the visible width of the field. The MAX attribute can be used to specify the maximum number of characters that can be typed into the field.
INT: For entering integers. The maximum number of digits can be specified with the SIZE attribute.
CHECKBOX: For Boolean variables, or for variables which can take multiple values at the same time. When a box is checked, the value specified in its VALUE attribute is assigned to the variable specified in its NAME attribute. If several checkbox fields each specify the same variable NAME, they can be used to assign multiple values to the named variable, since each checkbox field may have a VALUE attribute.
RADIO: For variables which can take only a single value from a set of alternatives. If several radio buttons have the same NAME, selecting one of the buttons will cause any already selected button in the group to be deselected.
SUBMIT: Selecting this link or pressing this button submits the form.
RESET: Selecting this link or pressing this button resets the form's fields to their initial values as specified by their VALUE attributes.
HIDDEN: For passing state information from one form to the next or from one script to the next. An input field of type HIDDEN will not appear on the form, but the value specified in the "VALUE" attribute will be passed along with the other values when the form is submitted.

Proposed types:

FLOAT: For fields which can accept floating point numbers.
DATE: Fields which can accept a recognized date format.
URL: For fields which expect references as URLs or URNs.

An example form illustrating many of these features in available online. The HTML source is also available.

The SELECT and OPTION Tags

The RADIO and CHECKBOX fields can be used to specify multiple choice forms in which every alternative is visible as part of the form. An alternative is to use the SELECT element which produces a pull down list. Every alternative is specified in an OPTION element. <SELECT NAME="browser"> <OPTION> Cello <OPTION> Lynx <OPTION> X Mosaic <OPTION> Mac Mosaic <OPTION> Win Mosaic <OPTION> Line Mode <OPTION> Some other </SELECT> Click here to see how the select list would be rendered by your browser.

You can then use the up- and down-arrow keys to select an option which will be set when you press enter to leave the pull down menu.

If you include the MULTIPLE attribute in the <SELECT> tag, the user should be able to select more than one optional value from the list.

Click here to see how multiple selects works with your browser.

Lynx will render a multiple select as a set of checkboxes, rather than as pull-down menu.

The TEXTAREA Tag

When you need to let users enter more than one line of text, you should use the TEXTAREA element: <TEXTAREA NAME="address" ROWS=6 COLS=60> Academic Computing Services The University of Kansas Lawrence, Kansas 66045 </TEXTAREA> The text between the <TEXTAREA> and </TEXTAREA> tags is used to initialize the text area variable value. This </TEXTAREA> tag is always required even if the field is initially blank.

The ROWS and COLS attributes determine the visible dimension of the field in characters. Click here to see how text areas are rendered by your browser.

Next: Tables Tags
Up: Forms
Prev: Executing Commands via the Web

The Geometry Center Home Page

Comments to: webmaster@www.geom.uiuc.edu
Created: May 23 1996 --- Last modified: May 30 1996