The option HTML tag

The option tag is an internal element of the select and other tags.
Options can be grouped into optgroup tags.
The containers can be <select>, <optgroup> and <datalist> in HTML 5.

The syntax is:

<option label="" value="">
</option>

The ending tag may be omitted:

<option> ...
<option> ...

The short form is not valid:

<option value="" />  // not valid

We can both assign data to the value attribute or insert them between the start tag and end tag (if a closing tag is added).

The data inserted between the tags are displayed in the list, unlike the value of the attribute value. But it can be used in JavaScript. For example, for a list of links, we will place the anchor in the content and the URL will be assigned to the attribute.

<select>
  <option value="https://www.xul.fr">The XUL site</option>
</select> 

Demonstrations in the article on select show how to access the options from a list and therefore how to read the value of the attribute value (see link below).

Attributes of option

The name attribute is suppressed in HTML 5 and replaced by label. This is the name attribute of select that is taken into account to send form data.

The value attribute contains a value passed with the form data (for the choosen option). But as it is not displayed, this allows to display a content different from the value sent with form data.

Example:

<select>
  <option>One</option>
  <option selected>Two</option>
</select>

One Two

Attributes of optgroup

The options in a optgroup share a label.

Syntax:

<optgroup>
    <option>
    <option>
    ...
<optgroup>
    <option>
    ...

Examples of options

See also

• The select tag.