Forms

Contents:

Summary of Form Tags
Introduction to Forms
The Basic Form (<form>)
Form Elements
New Form Attributes in HTML 4.01
Affecting the Appearance of Forms
Demystifying CGI

Forms provide a method for true interaction between users and the publisher of a website, with an immediacy that could never be achieved in print. With forms, you can solicit input from a user in order to provide a customized response on-the-fly or just collect the data for later use. Forms can be used for functions as simple as surveys and guesttutorials or as complex as online commerce systems.

This chapter provides a detailed review of the available form elements and how to use them. It also provides a brief introduction to CGI, one of the available methods for processing form information.

Summary of Form Tags

In this section, browser support for each tag is noted to the right of the tag name. Browsers that do not support the tag are grayed out. Tag usage is indicated below the tag name. Start and end tags are required unless otherwise noted. "Deprecated" means that the tag or attribute is currently supported but is due to be phased out of the HTML specification and is discouraged from use (usually in favor of similar style sheet controls). The attributes listed for each tag reflect those in common use. A more thorough listing of attributes for each tag, according to the HTML 4.01 specification, appears in Appendix A, "HTML Elements"

<button> NN 6 MSIE 4, 5.5, 6 HTML 4.01
<button> ... </button>

Defines a "button" that functions similarly to buttons created with the input tag but allows for richer rendering possibilities. Buttons can contain content such as text and images (but not imagemaps).

Attributes

<fieldset> NN 6 MSIE 4, 5.5, 6 HTML 4.01 Opera5
<fieldset> ... </fieldset>

Groups related controls and labels. The proper use of this tag should make documents more accessible to nonvisual browsers. It is similar to <div> but is specifically for grouping fields. It was introduced to improve form accessibility to users with alternative browsing devices.

<form> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<form> ... </form>

Indicates the beginning and end of a form. There can be more than one form in an HTML document, but forms cannot be nested inside one another, and it is important that they do not overlap.

Attributes

<input type=button> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<input type=button> (no end tag)

Creates a customizable "push" button. Customizable buttons have no specific behavior but can be used to trigger functions created with JavaScript controls. Data from type=button controls is never sent with a form when a form is submitted to the server; these button controls are only for use with script programs on the browser.

Attributes

<input type=checkbox> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML4.0 WebTV Opera5
<input type=checkbox> (no end tag)

Creates a checkbox input element within a <form>. Checkboxes are like on/off switches that can be toggled by the user. Several checkboxes in a group may be selected at one time. When a form is submitted, only the "on" checkboxes submit values to the server.

Attributes

<input type=file> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<input type=file> (no end tag)

Allows users to submit external files with their form submission. It is accompanied by a "browse" button when displayed in the browser.

Attributes

<input type=hidden> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<input type=hidden> (no end tag)

Creates an element that does not display in the browser. Hidden controls can be used to pass special form-processing information to the server that the user cannot see or alter.

<input type=image> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<input type=image> (no end tag)

Allows an image to be used as a substitute for a submit button. If a type=image button is pressed, the form is submitted.

Attributes

<input type=password> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<input type=password> no end tag)

Creates a text-input element (like <input type=text>), but the input text is rendered in a way that hides the characters, such as by displaying a string of asterisks (*) or bullets (Figure 15.9). Note that this does not encrypt the information entered and should not be considered to be a real security measure.

Attributes

<input type=radio> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<input type=radio> (no end tag)

Creates a radio button that can be turned on and off. When a group of radio buttons share the same control name, only one button within the group can be "on" at one time, and all the others are "off." This makes them different from checkboxes, which allow multiple choices to be selected within a group. Only data from the "on" radio button is sent when the form is submitted.

Attributes

<input type=reset> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<input type=reset> (no end tag)

Creates a reset button that clears the contents of the elements in a form (or sets them to their default values).

Attributes

<input type=submit> NN 2, 3, 4, 6 - MSIE 2,3, 4, 5.5, 6 HTML 4.01 - WebTV - Opera5
<input type=submit> (no end tag)

Creates a submit button control; pressing the button immediately sends the information in the form to the server for processing.

Attributes

<input type=text> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 - WebTV Opera5
<input type=text> (no end tag)

Creates a text input element. This is the default input type, as well as the most useful and common.

Attributes

<isindex> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<isindex> (no end tag)

Deprecated. Marks the document as searchable. The server on which the document is located must have a search engine that supports this searching. The browser displays a text entry field and a generic line that says, "This is a searchable index. Enter search keywords." This method is outdated; more sophisticated searches can be handled with form elements and CGI scripting.

The <isindex> element is not part of the form system and does not need to be contained within a <form> element.

<label> NN 6 MSIE 4, 5.5, 6 HTML 4.01
<label>...</label>

Used to attach information to controls. Each label element is associated with exactly one form control.

Attributes

Example



<LABEL for="lastname">Last Name: </LABEL>
<INPUT type="text" id="lastname" size="32">


<legend> NN 6 MSIE 4, 5.5, 6 HTML 4.01
<legend>...</legend>

Assigns a caption to a <fieldset> (it must be contained within a <fieldset> element). This improves accessibility when the fieldset is rendered nonvisually.

<optgroup> NN 6 MSIE 6 HTML 4.01 Opera5
<optgroup>...</optgroup>

Defines a logical group of <options>. This could be used by browsers to display hierarchical cascading menus. <optgroups> cannot be nested.

Attributes

<option> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<option> ... </option> (end tag optional)

Defines an option within a select element (a multiple-choice menu or scrolling list). The end tag, although it exists, is usually omitted. The content of the <option> element is the value that is sent to the form processing application (unless an alternative value is specified using the value attribute).

Attributes

<select> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<select> ... </select>

Defines a multiple-choice menu or a scrolling list. It is a container for one or more <option> tags. This element may also contain one or more <optgroup>s.

Attributes

<textarea> NN 2, 3, 4, 6 MSIE 2,3, 4, 5.5, 6 HTML 4.01 WebTV Opera5
<textarea>...</textarea>

Defines a multiline text-entry control. The text that is enclosed within the <textarea> tags is displayed in the text-entry field when the form initially displays.