HTML <option> element

The <option> element defines a choice within a <select> or a suggestion within a <datalist>. Options in a select can also be grouped inside <optgroup> elements.

The value attribute supplies the option's data value. In a select, this is submitted under the select's name when the option is selected and enabled. If value is omitted, the browser derives the value from the option's text. This allows an option to display a descriptive name while submitting a shorter identifier, such as value="pro" for a choice displayed as "Professional."

The optional label attribute supplies the option's label. In a conventional select, this is the displayed text; if it is omitted, the element's text supplies the label. Inside a datalist, the option's value is offered to the linked input, and the browser may also display its label as an explanation. Choosing that suggestion fills the input with the value.

In a select, selected specifies an option's default selection. A select with multiple can have several options selected by default; a select allowing only one choice must not have several options marked selected. The user's current selection can change without rewriting the selected attribute in the HTML. A form reset restores the defaults. This attribute does not supply an initial value for an input linked to a datalist.

The disabled attribute makes an option unavailable for selection. In a conventional select it normally remains visible, and disabling its enclosing <optgroup> has the same effect. Disabled options are excluded from form submission. In a datalist, a disabled option is not offered as a suggestion.

A first option with value="" can display a prompt such as "Choose one..." in a single-choice dropdown. When this option is a direct child of a <select required> displaying one row, leaving it selected does not satisfy the required choice. Adding disabled prevents the user from selecting the prompt again, but does not itself make the select required.

Attributes: value, label, selected, disabled, GLOBALS.

Typical layout:
<label for="pf-demo-option-plan">Plan</label><br>
<select id="pf-demo-option-plan" name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Professional</option>
</select>

Visual representation: