HTML <option> tag is used to define options in a dropdown list within <select> or <datalist> element. A dropdown list must have at least one <option> element.
The associated items of a dropdown menu can be categorized using the <optgroup> element to enhance the organization of a lengthy list.
Tips: The <option> tag can be used without any attribute, but it should be used with value attribute which specifies what send to the server.
Syntax
Example
<option value="">.....</option>
Here are some details regarding the HTML <option> element:
| Display | Inline |
|---|---|
| Start tag/End tag | Both Start and End tag |
| Usage | Forms and Inputs |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Option Tag</title>
<style>
body{
text-align: center;}
</style>
</head>
<body>
<h2>Example of option tag</h2>
<form>
<select>
<option>-------Select Your Favorite Color----------</option>
<option value="yellow" style="color: violet;">Violet</option>
<option value="white" style="color: blue;">Blue</option>
<option value="black" style="color: black;">Black</option>
<option value="green" style="color: green;">green</option>
<option value="red" style="color: red;">Red</option>
</select>
</form>
</body>
Output:
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | If it is set then that option will be disabled. |
| label | text | It defines the name for the list item. |
| selected | selected | If it is set, then it will be selected by default in the list. |
| value | text | It specifies the data which is sent to the server. |
Global attribute:
HTML <option> element facilitates the use of global attributes within HTML.
Event attribute:
The <option> tag enables the utilization of event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<option> |
Yes | Yes | Yes | Yes | Yes |