Introduction
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 displayed in the 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 |
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
FireFox