Forms (Web Design in a Nutshell, 2nd Edition)

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.