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="http://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

Attribute Value
Function
Version
selected [selected]/empty
The selected option is displayed.
 
disabled [disabled]/empty
State disabled or not.
 
label String
Name to send form data.
HTML 5
value String
Value of this 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>

Attributes of optgroup

The options in a optgroup share a label.

Attribute Value
Function
Version
disabled [disabled]/empty
State disabled or not.
 
label String
Name of the optgroup.
HTML 5

Syntax:

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

Examples of options

Preview
Code

<select size="2">
<option>One</option>
<option>Two</option>
</select>

<select size="2">
<option>One
<option>Two
</select>
<select>
<option>One</option>
<option>Two</option>
</select>
<select size="6" >
  <optgroup label="groupe1">
    <option>Alpha</option>
    <option>Beta</option>
  </optgroup>
  <optgroup label="groupe2">
    <option>One</option>
    <option>Two</option>
  </optgroup>
</select>

See also

© 2010-2012 Xul.fr