Book HomeWeb Design in a NutshellSearch this book

Chapter 15. 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 web site, 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 guestbooks 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.

15.1. 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

name=text

Required. Assigns the control name for the element.

value=text

Assigns the value to the button control. The behavior of the button is determined by the type attribute.

type=submit|reset|button

Identifies the type of button: submit button (the default type), reset button, or custom button (used with JavaScript), respectively.

<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

accept=content-type-list

Specifies a comma-separated list of file types (MIME types) that the server will accept and is able to process. Browsers may one day be able to filter out unacceptable files when prompting a user to upload files to the server, but this attribute is not yet widely supported.

accept-charset=charset list

Specifies the list of character encodings for input data that must be accepted by the server in order to process the current form. The value is a space- and/or comma-delimited list of ISO character set names. The default value is unknown. This attribute is not widely supported.

action=url

Required. Specifies the URL of the application that will process the form. The default is the current URL.

enctype=encoding

Specifies how the values for the form controls are encoded when they are submitted to the server when the method is post. The default is the Internet Media Type (application/x-www-form-urlencoded). The value multipart/form-data should be used in combination with the file input element.

method=get|post

Specifies which HTTP method will be used to submit the form data. With get (the default), the information is appended to and sent along with the URL itself.

target=name

Specifies a target for the results of the form submission to be loaded so results of a form can be displayed in another window or frame. The special target values _bottom, _top, _parent, and _self may be used.

<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

name=string

Required. Assigns a name to the push button control. A script program uses this name to reference this control.

value=string

Required. Specifies the value for this control.

<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

checked

When this attribute is added, the checkbox will be checked by default.

name=text

Required. Assigns a name to the checkbox to be passed to the form-processing application if selected. Giving several checkboxes the same name creates a group of checkbox elements, allowing users to select several options with the same property.

value=text

Required. Specifies the value of this control; this value is passed to the server only if the checkbox is selected. If no value is set, a default value of "on" is sent.

<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

accept=MIME type

Specifies a comma-separated list of content types that a server processing the form will handle correctly. It can be used to filter out nonconforming files when prompting a user to select files to send to the server.

name=text

Required. Assigns a name to the control.

<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.

name=text

Required. Specifies the name of the control; this name (and the corresponding value) are passed to the form-processing application.

value=text

Required. Specifies the value of the element that is passed to the form-processing application.

<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

align=top|middle|bottom

Aligns the image with respect to the surrounding text lines.

alt=text

Provides a text description if the image can not be seen.

name=text

Required. Specifies the name of the control; this name (and the corresponding value) are passed to the form-processing application, along with data giving the coordinates of the mouse on top of the control image.

src=url

Required. Provides the URL of the image.

<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

maxlength=number

Specifies the maximum number of characters the user can input for this element. The default is an unlimited number of characters.

name=text

Required. Specifies the name of this control to be passed to the form-processing application for this element.

size=number

Specifies the size of the text-entry box (measured in number of characters) to be displayed for this element. Users can type entries that are longer than the space provided, causing the field to scroll to the right.

value=text

Required. Specifies the value that will initially be displayed in the text box.

<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

checked

Causes the radio button to be in the "on" state when the form is initially displayed.

name=text

Required. Specifies the name of the control to be passed to the form-processing application if this element is selected.

value=text

Required. Specifies the value of the parameter to be passed to the form-processing application.

<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

value=text

Specifies a value for the reset button control. This appears as the button label (it will say "Reset" by default).

<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

value=text

Specifies a value for the submit button control. This appears as the button label (it will say "Submit" by default).

name=text

Required. Specifies the name of this control to be passed to the form-processing application for this element.

<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

maxlength=number

Specifies the maximum number of characters the user can input for this element. The default is an unlimited number of characters.

name=text

Required. Specifies the name for the text input control. This name will be sent, along with the value, to the form-processing application.

size=number

Specifies the size of the text-entry box (measured in number of characters) to be displayed for this element. Users can type entries that are longer than the space provided, causing the field to scroll to the right.

value=text

Specifies the value that will initially be displayed in the text box.

<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

for=text

Explicitly associates the label with the control by matching the value of the for attribute with the value of the id attribute within the control element.

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

label=text

Required. Specifies the label for the option group.

<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

label

Allows the author to provide a shorter label than the content of the option. This attribute is poorly supported.

selected

Makes this item selected when the form is initially displayed.

value=text

Defines a value to assign to the option item within the select control, to use in place of <option> contents.

<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

multiple

This allows the user to select more than one <option> from the list. When this attribute is absent, only single selections are allowed.

name=text

Defines the name for select control; when the form is submitted to the form-processing application, this name is sent along with each selected option value.

size=number

Specifies the number of rows that display in the list of options. For values higher than 1, the options are displayed as a scrolling list with the specified number of options visible. When size=1 is specified, the list is displayed as a pop-up menu.

The default value is 1 when multiple is not used. When multiple is specified, the value varies by browser (but a value of 4 is common).

<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.

cols=number

Required. Specifies the visible width of the text-entry field, measured in number of characters. Users may enter text lines that are longer than the provided width, in which case the entry scrolls to the right (or wraps if the browser provides some mechanism for doing so).

name=text

Required. Specifies a name for the text input control. This name will be sent along with the control content to the form-processing application.

rows=number

Required. Specifies the height of the text-entry field in number of lines of text. If the user enters more lines than are visible, the text field scrolls down to accommodate the extra lines.

wrap=off|virtual|physical

Nonstandard. Sets word wrapping within the text area. off turns word wrapping off; users must enter their own line returns. virtual displays the wrap, but the line endings are not transmitted to the server. physical displays and transmits line endings to the server. Some browsers support the proprietary value soft as equivalent to virtual, and hard as equivalent to physical.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.