JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.
| Home | HTML Tutorials | JavaScript Editor | | Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor. |
| Syntax | <OPTION>...</OPTION> |
|---|---|
| Attribute Specifications |
|
| Contents | Plain text (including entities) |
| Contained in | SELECT, OPTGROUP |
The OPTION element defines a menu choice within a SELECT menu. The value of the option, sent with a submitted form, is specified with the VALUE attribute. In the absence of a VALUE attribute, the value is the content of the OPTION element.
The boolean SELECTED attribute defines the OPTION to be initially selected. A SELECT element can only have one OPTION selected at any time unless the MULTIPLE attribute is present on SELECT.
If the SELECT element does not use the MULTIPLE or SIZE attributes, some browsers will automatically (and incorrectly) select an option. To ensure that a suitable option is selected, authors may wish to use the SELECTED attribute on an OPTION. If no option is a suitable default, consider using a dummy option, as in the following example:
<SELECT NAME="marital_status">
<OPTION SELECTED VALUE="">Select...</OPTION>
<OPTION>Single</OPTION>
<OPTION>Married</OPTION>
<OPTION>Separated</OPTION>
<OPTION>Divorced</OPTION>
<OPTION>Widowed</OPTION>
</SELECT>
The boolean DISABLED attribute, new in HTML 4.0 and poorly supported by current browsers, makes the OPTION element unavailable. A disabled option cannot be selected by the user and is never submitted with the form.
The LABEL attribute specifies the option label presented to the user. This defaults to the content of the OPTION element, but the LABEL attribute allows authors to more easily use OPTGROUP without sacrificing compatibility with browsers that do not support option groups. The following example illustrates the technique:
<P>Which Web browser do you use most often?
<SELECT NAME=browser>
<OPTGROUP LABEL="Netscape Navigator">
<OPTION LABEL="4.x or higher">
Netscape Navigator 4.x or higher
</OPTION>
<OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
<OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>
<OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">
<OPTION LABEL="4.x or higher">
Microsoft Internet Explorer 4.x or higher
</OPTION>
<OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
<OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
<OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Opera">
<OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
<OPTION LABEL="2.x">Opera 2.x</OPTION>
</OPTGROUP>
<OPTION>Other</OPTION>
</SELECT>
</P>OPTGROUP and OPTION's LABEL attribute were introduced together, so browsers should support both features or neither of them. Supporting browsers will render the preceding example using the LABEL attribute of OPTION to provide just the version number, along with the OPTGROUP's LABEL, which gives the full name of the application. This allows a compact display with cascading menus, but many browsers do not yet support OPTGROUP. These browsers will ignore the OPTGROUP elements and LABEL attributes, providing the full name and version for each choice. Thus authors can fully use OPTGROUP despite its lack of browser support.
HTML 4.0 Reference ~ Elements by Function ~ Elements Alphabetically
Copyright © 1998 by Liam Quinn. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at http://www.opencontent.org/openpub/).
| Home | HTML Tutorials | JavaScript Editor | | Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor. |