<option>
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.
The <select> tag is placed in the <form> tag, if the data lists must be sent to the server, or when the data list is accessed via scripts.
Syntax
Syntax
The <option> tag comes in pairs. The content 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:
<!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.
<!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 value="Birmingham">
<option value="Cambridge">
<option value="Oxford">
<option value="Bangor">
</datalist>
<input type="submit" value="confirm">
</form>
</body>
</html>
In this example the <option> tag is inserted in the <datalist> tag.
Result
Attributes
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.