 | Web Design in a Nutshell, 2nd Edition |  |
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.
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).
| <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.
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.
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.
Required. Specifies the URL of the application that will process the form. The default is the current URL.
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.
| <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.
| <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.
| <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.
| <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.
Provides a text description if the image can not be seen.
| <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 (
). Note that this does not
encrypt the information entered and should not be
considered to be a real security measure.
Specifies the maximum number of characters the user can input for this element. The default is an unlimited number of characters.
Required. Specifies the name of this control to be passed to the form-processing application for this element.
| <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.
| <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).
| <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.
| <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.
Specifies the maximum number of characters the user can input for this element. The default is an unlimited number of characters.
Required. Specifies the name for the text input control. This name will be sent, along with the value, to the form-processing application.
| <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.
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.
<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.
| <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).
Allows the author to provide a shorter label than the content of the option. This attribute is poorly supported.
| <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.
This allows the user to select more than one <option> from the list. When this attribute is absent, only single selections are allowed.
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.
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.
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).
Required. Specifies a name for the text input control. This name will be sent along with the control content to the form-processing application.
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.
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.
|  | |
| 14.7. Frame Design Tips and Tricks |  | 15.2. Introduction to Forms |
Copyright © 2002 O'Reilly & Associates. All rights reserved.