option element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The option element represents an option in a select control or a suggestion in a datalist element. The behavior of this element varies slightly according to which of these two elemnts it's present on. In contrast to datalist, a select control may have its options grouped (with an optgroup element) and be rendered in situ.

In some particular cases, this element can represent a placeholder label option, which is an option intended to be shown as a label while no option is selected in the select control it belongs to. In such cases, this option must be the first in the control, its value attribute must be empty and it musn't belong to any optgroup. The placeholder label option is mandatory when the select element it belongs to is declared with the required attribute and is shown in the drop-down mode.

When used in a select element, only one option in the control may have it's selected attribute declared.

Grouping options in a select control may improve readability and ease of use. Authors should use the optgroup element whenever possible.

Examples

Our first example will show a select control with a determined number of options, one of them selected. Note that we'll properly define the selected attribute in only one option in the control, and see how this option will be selected by default when the document loads or the form is reset.

<form action="../../form-result.php" target="_blank">
  <p>
    Elije un atuo:
    <select name="auto">
      <option>458 Spider</option>
      <option selected>F12 Berlinetta</option>
      <option>California T</option>
    </select>
    <input type="submit" value="Enviar formulario">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>

Elije un atuo:

In our second example we'll use the optgroup element to group the options thematically. This is a very good practice that improves readability and ease of use in select controls.

<p>
  Choose a figurine:
  <select>
    <optgroup label="Birds">
      <option>Owl</option>
      <option>Robin</option>
      <option>Pigeon</option>
      <option>Sparrow</option>
    </optgroup>
    <optgroup label="Felines">
      <option>Lion</option>
      <option>Tiger</option>
      <option>Cat</option>
    </optgroup>
  </select>
</p>

Choose a figurine:

Now we'll set up a select control with a placeholder label option. To do so, we'll declare a first option in the element, that doesn't belong to any optgroup and with an empty string in the value attribute.

When a select element is declared with the required attribute, the presence of the "placeholder label option" is required. In such cases, supporting browsers will prevent form submission until an option other than the "placeholder label option" has been selected.

<form action="../../form-result.php" target="_blank">
  <p>
    Your drink:
    <select name="drink" required>
      <option value="">Choose your drink</option>
      <optgroup label="With Vodka">
        <option>Martini</option>
        <option>Cosmopolitan</option>
        <option>Screwdriver</option>
      </optgroup>
      <optgroup label="With Tequila">
        <option>Margarita</option>
        <option>Tequila Sunrise</option>
        <option>Cantarito</option>
      </optgroup>
    </select>
    <input type="submit" value="Send">
  </p>
</form>

Your drink:

And lastly, we'll try placing our options in a datalist. This element has been added to HTML5 in order to provide predefined values to help users complete the form fields. This means that supporting browsers will show the options provided by the datalist element during the process of filling the associated field.

To associate a control to a datalist, the value of the list attribute in the control must match the value of the id attribute in the datalist.

Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

<p>
  Pick a search engine:
  <input type="text" list="searchengineslist">
</p>
<datalist id="searchengineslist">
  <option>Google</option>
  <option>Yahoo!</option>
  <option>Bing</option>
  <option>DuckDuckGo</option>
</datalist>

Pick a search engine:

Attributes

Specific attributes

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

When an option element belongs to a disabled optgroup, the option is disabled as well as its parent.

Example

<p>
  Select a product:
  <select>
    <option>Apple</option>
    <option>Orange</option>
    <option disabled>Banana</option>
    <option>Peach</option>
  </select>
</p>

Select a product:

label

A run of text intended to label the option. This label will be displayed as the text of the option and will be replaced by the content of the element when absent.

Browser support for the label attribute is incomplete. Authors may enhance compatibility omitting this attribute and replacing it with the element's content.

Example

<form action="../../form-result.php" target="_blank">
  <p>
    Select a desert:
    <select name="dessert">
      <option label="Lemon pie" value="lemonpie"></option>
      <option label="Cheese cake" value="cheesecake"></option>
      <option label="Cottage pudding" value="cottagepudding"></option>
    </select>
    <input type="submit" value="Submit">
  </p>
</form>

Select a desert:

selected

A boolean value indicating if the option should be selected when the document loads and when the form is reset. If the attribute takes the value "selected" or the empty string (""), or if it's just present, the element will be the default selected option.

Example

<form action="../../form-result.php" target="_blank">
  <p>
    Burger size:
    <select name="size">
      <option>Regular</option>
      <option>Double</option>
      <option selected>Mind blowing!</option>
    </select>
    <input type="submit" value="Submit form">
    <input type="reset" value="Reset form">
  </p>
</form>

Burger size:

value

A run of text to be sent to the processing agent when the form is submitted. In select controls, the name-value pair is composed by the name attribute of the select element and the value attribute of the selected option.

When the value attribute is missing, the content of the element takes its place in the submission of the form.

Example

<form action="../../form-result.php" target="_blank">
  <p>
    Width:
    <select name="width">
      <option>Small</option>
      <option>Wide</option>
      <option value="ultra-wide">Ultra wide</option>
    </select>
    <input type="submit" value="Submit form">
  </p>
</form>

Width:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.

X

Are you looking for a place to host your next website? I can help you with that!