The Web Design Group

OPTION - Menu Option

Syntax <OPTION>...</OPTION>
Attribute Specifications
  • VALUE=CDATA (value of option)
  • SELECTED (choice initially selected)
  • DISABLED (disable choice)
  • LABEL=Text (option label)
  • common attributes
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.

More Information


Sites of interest: Web Hosting : Reseller Hosting : Website Hosting : HTML Editor : Web Design Templates : Free Web Hosting : ASP code examples : PHP & MySQL Code Examples
  Copyright © 2004 Evrsoft Developer Network. Privacy policy - Link to Us

Contact Evrsoft