Option tag in HTML5


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 >
  1. <option disabled>HTML</option>  


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.
<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.
<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.
<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