Post
Ask Question

Option tag in HTML5

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

TRENDING UP

View All