Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Attributes:

The <INPUT> tag is easily the most versatile of all the HTML tags. It has a large number of attributes, although not all are applicable in every situation. The following list examines each variant of the <INPUT> tag (which corresponds to changing values of the TYPE attribute) and notes what each applicable attribute does in that situation.

•  Text and password fields (TYPE=”TEXT|PASSWORD”)—The NAME attribute gives the input field a unique name so it can be identified by the processing script. The VALUE attribute is appropriate for a text field when you want to prepopulate the field with a default value. LENGTH is set equal to the number of characters wide the input field should be onscreen. MAXLENGTH sets an upper limit on how many characters long the input from the field can be. The DISABLED attribute deactivates the field, and READONLY leaves the field active while disallowing the user from typing any new input into it.

•  Hidden fields (TYPE=”HIDDEN”)—NAME and VALUE specify the name of the field and the value to pass to the server.

•  Check box (TYPE=”CHECKBOX”)—NAME gives the check box field a unique name, and VALUE is set equal to the value you want passed to the server if the box is checked. Including CHECKED makes the box preselected, and DISABLED disables the check box altogether.

•  Radio buttons (TYPE=”RADIO”)—NAME gives a name to the entire set of radio buttons. All buttons can have the same NAME because their corresponding VALUEs have to be mutually exclusive options. The CHECKED attribute preselects a radio button and DISABLED shuts down the radio button.

•  File upload (TYPE=”FILE”)—NAME gives the field a unique name, and VALUE is set to the default value of the field (presumably a filename). The ACCEPT attribute provides a set of acceptable MIME types for upload. Specifying the DISABLED attribute deactivates the field.

•  Image-based button (TYPE=”IMAGE”)—The SRC attribute tells the browser where it can find the image file for the button. ALT provides a text-based alternative to the image should the image file not be available. You can use ALIGN to control how the image is aligned on the page. USEMAP is set equal to a client-side imagemap name, enabling you to take different actions depending on where the user clicks. Using the DISABLED attribute shuts off the button.

•  Scripted button (TYPE=”BUTTON”)—Whatever you specify for the VALUE attribute will be the text that appears on the face of the button. The onclick attribute is set equal to the name of the script that is to execute when the button is clicked. If you specify the DISABLED attribute, the scripted button will be deactivated.

•  Submit and reset buttons (TYPE=”SUBMIT|RESET”)—The VALUE attribute specifies what text to place on the button. If DISABLED, the submit or reset button will be turned off.

Additionally, you can use the following attributes with the <INPUT> tag:

•  ACCESSKEY—Defines a shortcut key combination that the user can press to give focus to the input field (see the attribute listing for the <A> tag for more details).

•  TABINDEX—Defines the input field’s position in the tabbing order of the page.

Example:

<FORM ACTION=”/cgi-bin/submit_it.pl”>
Login Name: <INPUT TYPE=”TEXT” NAME=”login” SIZE=12>
Password: <INPUT TYPE=”PASSWORD” NAME=”passwd” SIZE=12>
<INPUT TYPE=”HIDDEN” NAME=”browser” VALUE=”IE4">
Sex: <INPUT TYPE=”RADIO” NAME=”sex” VALUE=”F”>Female
     <INPUT TYPE=”RADIO” NAME=”sex” VALUE=”M”>Male
<INPUT TYPE=”BUTTON” VALUE=”Check data” onclick=”validate()”>
<INPUT TYPE=”SUBMIT” VALUE=”Login”>
<INPUT TYPE=”RESET” VALUE=”Clear”>
</FORM>

<SELECT>

Type:

Container

Function:

Sets up a list of choices from which a user can select one or many.

Syntax:

<SELECT NAME=”field_name” SIZE=”visible_rows” MULTIPLE DISABLED
 ACCESSKEY=”shortcut_key_letter” TABINDEX=”tab_position”>
...
</SELECT>

Attributes:

You can use the following attributes with the <SELECT> tag:

•  ACCESSKEY—Defines a shortcut key combination that the user can press to give focus to the select field (see the attribute listing for the <A> tag for more details).

•  DISABLED—Deactivates the field.

•  MULTIPLE—Enables the user to choose more than one of the options by holding down the Ctrl key and clicking.

•  NAME—Gives the field a unique name so it can be identified by the processing script.

•  SIZE—Set equal to the number of options that should be visible on the screen.

•  TABINDEX—Defines the select field’s position in the tabbing order of the page.

---

NOTE:  If you set SIZE=1 and don’t specify MULTIPLE, the field will be displayed as a drop-down list. Otherwise, the field appears as a scrollable list of options.

---

Example:

<SELECT NAME=”size” SIZE=4>
<OPTION>Small</OPTION>
<OPTION>Medium</OPTION>
<OPTION>Large</OPTION>
<OPTION>X-Large</OPTION>
...
</SELECT>

Related Tags:

Individual options in the list are specified using the <OPTION> tag. You can also use the <OPTGROUP> tag to place options into logical groups.

<OPTION>

Type:

Container

Function:

Defines an option in a <SELECT> field listing.

Syntax:

<OPTION VALUE=”option_value” SELECTED DISABLED LABEL=”label_text”>
... option text ...
</OPTION>

Attributes:

The <OPTION> tag takes the following attributes:

•  DISABLED—Makes the option unavailable.

•  LABEL—Provides a short label for the menu option. If specified, this label is used in place of the option text itself.

•  SELECTED—Preselects an option.

•  VALUE—Specifies a value to pass to the browser if the option is selected. If no VALUE is given, the browser will pass the option text to the server for processing.

Example:

<SELECT NAME=”state” SIZE=5>
<OPTION VALUE=”AL”>Alabama</OPTION>
<OPTION VALUE=”NM” SELECTED>New Mexico</OPTION>
<OPTION VALUE=”OK”>Oklahoma</OPTION>
...
</SELECT>

Related Tags:

The <OPTION> tag is valid only between the <SELECT> and </SELECT> tags. You can place options into logical groups by using the <OPTGROUP> tag.