HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

INPUT Element: Text Boxes, Checkboxes, and Radio Buttons

INPUT specifies a variety of editable fields and is only allowed inside a FORM. It takes several attributes that define the type of input mechanism (text field, buttons, checkboxes, etc.), the variable name associated with the input data, and the alignment and size of the input element when displayed. Although the INPUT element can appear only inside a FORM many other elements (lists, blockquotes, etc.) are also allowed inside a FORM and can be used to structure INPUT elements into a well-organized interface. Some examples of INPUT elements, and the organization allowed by other elements are shown in Figures 6.21 through 6.24.

The most important attribute to the INPUT element is NAME, which assigns a variable name to the value entered into the element. The data entered into a FORM are sent to the server as a collection of strings of the form name=value, where name is the variable name and value is the value that is input or selected by the user (the name and value strings are encoded prior to being sent to the server, as discussed in Chapters 8 and 10). The program parsing the FORM data uses the variable name to interpret the contents of the corresponding value and must therefore understand the different names. For this reason, a FORM and the gateway program that handles the FORM data must be designed together.

The other main attribute is TYPE, which selects the type of the INPUT element. There are several other attributes, but their usage and relevance depends on the TYPE.

The attributes are:

ACCEPT= “string” (optional; valid with TYPE=“file” only; not currently supported) Specifies a comma-separated list of MIME-types that are acceptable for input by TYPE=“file” input elements. This proposed element is not widely implemented.

ACCESSKEY=“c” (optional; Internet Explorer 4 only) Specifies a typeable character that can be used to access the area. For example, three INPUT elements could be labeled, using ACCESSKEY, by the letters “a,” “b,” and “c.” If the user then references the letter “b” on the keyboard (using some defined typing sequence), the browser will select the INPUT element with with ACCESSKEY=“b.” In the case of radio button or checkboxes, the browser will also change the state of the button or checkbox.
This functionality is supported by Internet Explorer 4—the labeled elements are accessed by typing ALT-c, where c is the letter assigned to the ACCESSKEY attribute, and ALT is the ALT key. Note that ACCESSKEY is also supported by A and AREA elements. This attribute is not supported on Netscape Navigator 4.

ALIGN=“top,” “middle,” “bottom,” “left,” “right” (optional; TYPE=“image” only) Specifies the alignment of the element, for the case TYPE=“image.” The attribute values have the same meaning as for the IMG element, and you are referred there for details. This attribute has no effect on the element position for other input types.

ALT=“string” (optional; TYPE=“image” only; Internet Explorer 4 only) Specifies a short text description of the input image to be used by non-graphical browsers or as tool-tip (pop-up) help when the mouse is over of the image. This is supported by Internet Explorer 4—Netscape Navigator 4 displays the value of the NAME attribute as tool-tip help.

CHECKED (optional; TYPE=“radio” or checkbox” only) Specifies whether or not the radio button or checkbox is checked—this applies only to TYPE=“radio” or TYPE=“checkbox” input elements. Only one of a connected set of radio buttons should be checked. With linked radio buttons, the behavior if multiple buttons are “checked” is undefined—Netscape Navigator checks all the buttons, while Internet Explorer only checks the last element marked as CHECKED.

DISABLED (optional; Internet Explorer 4 only) Disables user-control ofthe SELECT list. Also, the user cannot use the tab key to select this element. Last, the data content of the element is not sent when the form is submitted to a server. Note that disabling a single radio button does not disable any related radio buttons: To disable a collection of radio buttons, all buttons in the group must be marked DISABLED.

HEIGHT=“pixels” (optional; TYPE=“image” only) Defines the height of the displayed image, in pixels. If the image is of a different size, it will be rescaled to fit the defined height. Authors should avoid resizing images, since this will distort the coordinates of the mouse pointer when the user clicks on top of the image.

HSPACE=“pixels” (optional; TYPE=“image” only; Netscape Navigator only) Defines a padding space, in pixels, to leave to the left and right of the image. This attribute applies only to elements of TYPE=“image.”

MAXLENGTH=“number” (optional; TYPE=“text” or “password” only) Specifies the length of the character buffer for a text box, where number is the buffer length. MAXLENGTH can be larger than the displayed text box, in which case, arrow keys may be used to scroll the text. The default buffer length is unlimited. MAXLENGTH simply restricts the maximum size of the string input by the user. This may also apply to TYPE=“file,” if the browser presents a type-in field for entering filename information. This is largely unimplemented.

NAME=“string” (mandatory for all TYPE s not equal to “reset”) Associates the variable name “string” with the data content of this INPUT element. Values for this attribute are chosen by the document author, and should best be strings that logically relate to the purpose of the input quantity. If no name is entered, some browsers will ignore the associated data, while others will assume the name simply to be an empty string.

READONLY (optional; Internet Explorer 4 only) As with DISABLED, this attribute disables user-control of the TEXTAREA content. However, in this case, the user can select the element using the tab key, and the element content is included when the form is submitted to a server. This attribute only applies to input elements of TYPE=“text” or “password.”

SIZE=“number” (optional; TYPE=“text” or TYPE=“password” only) Specifies, in characters, the actual size of the displayed text input field. This may also apply to TYPE=“file,” if the browser presents a type-in field for entering filename information.

SRC=“url” (mandatory; TYPE=“image” only) Specifies the URL of the image to be included inline and is valid only with TYPE=“image.”

TABINDEX=“number” (optional; Internet Explorer 4 only) Specifies the tabbing order for the linked region. By default, a user can use the tab key to switch between the various anchor elements, active images, and FORM input elements, starting from the top of the document and working down. TABINDEX lets an author change this default order and explicitly set the order of tabbing: Tabbing is ordered from the smallest integer to the largest integer. Elements with negative tabbing indices are never accessed in the tabbing sequence. This is not supported on Netscape Navigator 4.

TYPE= “button,” “checkbox,” “file,” “hidden,” “image,” “password,” “radio,” “reset,” “submit,” “text” (mandatory) Determines the type of input element, from amongst a list of nine possible types. The meaning and function of these different types is given below. This is mandatory, although browsers will usually assume a default value, typically “text.”