HTML <option> Tag
The <option> tag defines items in a drop-down list, defined by the <select> tag, or the items of the data list for autocomplete, defined by the <datalist> tag. The <option> tag can be used as a child element of the <select> tag, <datalist> tag or <optgroup> tag, which groups the list elements.
Wrap the <select> tag in a <form> element only if you need to submit the selected data to a server or access it via scripts.
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.
TIP
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>Result
Computer Notebook Tablet ---
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.
Result
---
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.
Example with selected and disabled attributes:
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>Practice
What are the characteristics and uses of the HTML <option> tag?