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.
Table of contents
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.
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>
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.
<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>
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.
<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>
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>
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>
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.