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
  1. <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
  1. <select>
  2. <option>-Select Color-</option>
  3. <option disabled="disabled" value="color">Red</option>
  4. <option value="color">Green</option>
  5. <option value="color">Pink</option>
  6. <option value="color">Blue</option>
  7. </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
  1. <select style="width: 170px">
  2. <option label="Volvo">Volvo (Latin for "I roll")</option>
  3. <option label="Saab">Saab (Swedish Aeroplane AB)</option>
  4. <option label="Mercedes">Mercedes (Mercedes-Benz)</option>
  5. <option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
  6. </select>

Selected attributes

The selected attribute specifies that an option should be pre-selected when the page loads.
Syntax
<option selected="selected">
For example
  1. <select>
  2. <option>-Select Color-</option>
  3. <option value="color">Red</option>
  4. <option value="color">Green</option>
  5. <option value="color">Pink</option>
  6. <option selected="selected" value="color">Blue</option>
  7. </select>

Using all Attribute

For Example
  1. <html>
  2. <body>
  3. <table style="width: 49%">
  4. <tr>
  5. <td>
  6. Disabled attribute
  7. </td>
  8. <td>
  9. <select>
  10. <option>-Select Color-</option>
  11. <option disabled="disabled" value="color">Red</option>
  12. <option value="color">Green</option>
  13. <option value="color">Pink</option>
  14. <option value="color">Blue</option>
  15. </select>
  16. </td>
  17. </tr>
  18. <tr>
  19. <td>
  20. Label Attribute
  21. </td>
  22. <td>
  23. <select style="width: 170px">
  24. <option label="Volvo">Volvo (Latin for "I roll")</option>
  25. <option label="Saab">Saab (Swedish Aeroplane AB)</option>
  26. <option label="Mercedes">Mercedes (Mercedes-Benz)</option>
  27. <option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
  28. </select>
  29. </td>
  30. </tr>
  31. <tr>
  32. <td>
  33. Selected Attribute
  34. </td>
  35. <td>
  36. <select>
  37. <option>-Select Color-</option>
  38. <option value="color">Red</option>
  39. <option value="color">Green</option>
  40. <option value="color">Pink</option>
  41. <option selected="selected" value="color">Blue</option>
  42. </select>
  43. </td>
  44. </tr>
  45. </table>
  46. </body>
  47. </html>
Internet Explorer
option1.gif
FireFox
option2.gif