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 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, makes the OPTION element unavailable. A disabled option cannot be selected by the user and is never submitted with the form.

The LABEL attribute, new in HTML 4.0, specifies the option label presented to the user. If the LABEL is omitted, the content of the OPTION element is used as the label.

Typically the LABEL attribute is only used when the OPTION is contained in an OPTGROUP. The LABEL attribute can then provide an abbreviated label while the content of the OPTION element provides a full label for pre-HTML 4.0 browsers that ignore OPTGROUP and LABEL. The following example illustrates the technique:

<P>Which Web browser do you use most often?
  <SELECT NAME=browser>
    <OPTGROUP LABEL="Firefox">
      <OPTION LABEL="2.0 or higher">
        Firefox 2.0 or higher
      </OPTION>
      <OPTION LABEL="1.5.x">Firefox 1.5.x</OPTION>
      <OPTION LABEL="1.0.x">Firefox 1.0.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </OPTION>
      <OPTION LABEL="6.x">Microsoft Internet Explorer 6.x</OPTION>
      <OPTION LABEL="5.x">Microsoft Internet Explorer 5.x</OPTION>
      <OPTION LABEL="4.x">Microsoft Internet Explorer 4.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="9.0 or higher">Opera 9.0 or higher</OPTION>
      <OPTION LABEL="8.x">Opera 8.x</OPTION>
      <OPTION LABEL="7.x">Opera 7.x</OPTION>
    </OPTGROUP>
    <OPTION>Safari</OPTION>
    <OPTION>Other</OPTION>
  </SELECT>
</P>

In practice, many browsers ignore OPTION's LABEL attribute even though they support OPTGROUP and its LABEL.

More Information