The HTML option tag is used for defining option
items within a list. This element can be used in conjunction with the <select>
or <datalist> elements. Everything in an option tag will be display in
drop down list. It is like a child of select tag , datalist, and optgroup tag.
Also see <optgroup> tag for grouping your option items. The option tag is
supported in all major browsers.
Declaration Syntax : Declaration syntax
of <option> in HTML5.
<option attributes> Text </option >
Example
<option disabled>HTML</option>
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to
provide the browser with more information about how the tag should appear or
behave. There are 3 kinds of attributes that you can add to your HTML tags:
Element-specific, global, and event handler content attributes.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
| Attributes Introduced by HTML5 |
| Attributes | Description |
| disabled | This attribute specifies that the element represents a disabled control. |
| label | This attribute specifies a label for the option. |
| selected | This attribute specifies that the option should appear selected (will be displayed first in the list). |
| value | Specifies a value for the option. |
Global Attributes
The following attributes are standard across all HTML 5 tags.
HTML5 Global Attributes |
| accesskey | draggable | style |
| class | hidden | tabindex |
| dir | spellcheck | title |
| contenteditable | id | |
| contextmenu | lang | |
Event Handler Content Attributes
Here are the standard HTML 5 event handler content
attributes.
| onabort | onerror* | onmousewheel |
| onblur* | onfocus* | onpause |
| oncanplay | onformchange | onplay |
| oncanplaythrough | onforminput | onplaying |
| onchange | oninput | onprogress |
| onclick | oninvalid | onratechange |
| oncontextmenu | onkeydown | onreadystatechange |
| ondblclick | onkeypress | onscroll |
| ondrag | onkeyup | onseeked |
| ondragend | onload* | onseeking |
| ondragenter | onloadeddata | onselect |
| ondragleave | onloadedmetadata | onshow |
| ondragover | onloadstart | onstalled |
| ondragstart | onmousedown | onsubmit |
| ondrop | onmousemove | onsuspend |
| ondurationchange | onmouseout | ontimeupdate |
| onemptied | onmouseover | onvolumechange |
| onended | onmouseup | onwaiting |
Disabled attribute
A disabled option is unusable and un-clickable.
This attribute specifies that the element represents a disabled control.
Syntax
<option disabled="disabled">
For example
<select>
<option>-Select
Color-</option>
<option
disabled="disabled"
value="color">Red</option>
<option
value="color">Green</option>
<option
value="color">Pink</option>
<option
value="color">Blue</option>
</select>
Label attribute
The label attribute specifies a shorter version of an
option. The shorter version will be displayed in the drop-down list.
Syntax
<option label="value">
For example
<select
style="width:
170px">
<option
label="Volvo">Volvo
(Latin for "I roll")</option>
<option
label="Saab">Saab
(Swedish Aeroplane AB)</option>
<option
label="Mercedes">Mercedes
(Mercedes-Benz)</option>
<option
label="Audi">Audi
(Auto Union Deutschland Ingolstadt)</option>
</select>
Selected attributes
The selected attribute specifies that an option should
be pre-selected when the page loads.
Syntax
<option selected="selected">
For example
<select>
<option>-Select
Color-</option>
<option
value="color">Red</option>
<option
value="color">Green</option>
<option
value="color">Pink</option>
<option
selected="selected"
value="color">Blue</option>
</select>
Using all Attribute
For Example
<html>
<body>
<table
style="width:
49%">
<tr>
<td>
Disabled attribute
</td>
<td>
<select>
<option>-Select
Color-</option>
<option
disabled="disabled"
value="color">Red</option>
<option value="color">Green</option>
<option value="color">Pink</option>
<option value="color">Blue</option>
</select>
</td>
</tr>
<tr>
<td>
Label Attribute
</td>
<td>
<select
style="width:
170px">
<option label="Volvo">Volvo
(Latin for "I roll")</option>
<option label="Saab">Saab
(Swedish Aeroplane AB)</option>
<option label="Mercedes">Mercedes
(Mercedes-Benz)</option>
<option label="Audi">Audi
(Auto Union Deutschland Ingolstadt)</option>
</select>
</td>
</tr>
<tr>
<td>
Selected Attribute
</td>
<td>
<select>
<option>-Select
Color-</option>
<option value="color">Red</option>
<option value="color">Green</option>
<option value="color">Pink</option>
<option
selected="selected"
value="color">Blue</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Internet Explorer
![option1.gif]()
Fire Fox
![option2.gif]()