HTML <option> Tag
The <option> tag identifies items in a drop-down list. Tag description, attributes and examples of usage.
The <option> tag defines an individual item inside a drop-down list created with the <select> tag, or an autocomplete suggestion inside a <datalist>. It can appear as a child of <select>, <datalist>, or an <optgroup>, which groups related options together.
Each <option> has two distinct pieces of data: the text the user sees, and the value that gets submitted. Understanding the difference between them is the key to using this tag correctly, and it's covered in detail below.
Syntax
The <option> tag can be written as a pair or as a self-closing tag. When used as a pair, the display text is written between the opening (<option>) and closing (</option>) tags.
The <option> tag is generally used with the value attribute to specify which value should be sent to the server for the further processing.
Example of the HTML <option> tag:
A drop-down list with a HTML <option> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet">Tablet</option>
</select>
</form>
</body>
</html>The <select> is wrapped in a <form> here because the dropdown is meant to be submitted to a server. A <select> works fine without a form for purely client-side scripting, but you need a form (or JavaScript) to actually send the chosen value somewhere.
The value attribute and its gotcha
The value attribute holds the data that is submitted when its option is selected. The text between the tags is only what the user sees — it does not have to match the value.
If you omit value, the browser submits the option's text content instead. These two options behave identically when submitted:
<!-- value omitted: the text "Tablet" is submitted -->
<option>Tablet</option>
<!-- value present: "tablet" is submitted, "Tablet" is shown -->
<option value="tablet">Tablet</option>This is convenient, but it's also a common source of bugs: if you later change the visible text (for translation, capitalization, or wording) on an option that has no value, the data your server receives changes too. For predictable, stable submissions, always set an explicit value.
Example of the HTML <option> tag with the <datalist> tag.
List of departure airports with option tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Departure airport:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option>Birmingham</option>
<option>Cambridge</option>
<option>Oxford</option>
<option>Bangor</option>
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>In this example, the <option> tags are placed inside the <datalist> tag without the value attribute, as the text content serves as the autocomplete suggestion.
Attributes
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Indicates that the element selection is disabled. |
| label | text | Defines a name for a list item. |
| selected | selected | Sets that the option must be selected by default when the page is being loaded. |
| value | text | Defines the value, which is sent to the server. |
The <option> tag supports the Global attributes and the Event Attributes.
The selected and disabled attributes
selected marks the option that is pre-chosen when the page loads. disabled makes an option visible but un-selectable (it appears greyed out). In this example Blue is selected by default and Green cannot be chosen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>
</body>
</html>A placeholder option
A <select> always shows its first option by default, so there is no built-in "placeholder" like there is on a text input. The common pattern is to add a first option that is empty, disabled, and selected. It prompts the user to make a choice, can't be submitted as a real value, and can't be re-selected once the user picks something else:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="size">Pick a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</body>
</html>The required attribute belongs to the <select> element, not to <option>. Because the placeholder above has an empty value, the form can't be submitted until the user picks a real option.
Disabling a whole group
The disabled attribute also works on an <optgroup>, which disables every option inside it at once — useful for showing categories that are temporarily unavailable:
<select>
<optgroup label="In stock">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
</optgroup>
<optgroup label="Out of stock" disabled>
<option value="mango">Mango</option>
<option value="kiwi">Kiwi</option>
</optgroup>
</select>The label attribute
The label attribute provides an alternative caption for the option. When label is set, browsers display it instead of the text content. If you omit label, the text between the tags is used as the label — which is why it is usually left out and the visible text is written directly.
<select>
<!-- The user sees "Cat", not "Felis catus" -->
<option value="cat" label="Cat">Felis catus</option>
<option value="dog">Dog</option>
</select>In practice you rarely need label on a plain <option>; it is most meaningful on an <optgroup>, where label names the group heading.