Option tag in HTML5

The option tag is used for defining option items within a list.

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
AttributesDescription             
disabledThis attribute specifies that the element represents a disabled control.
labelThis attribute specifies a label for the option.
selected This attribute specifies that the option should appear selected (will be displayed first in the list).
valueSpecifies a value for the option.

Global Attributes

The following attributes are standard across all HTML 5 tags.

HTML5 Global Attributes

accesskey draggablestyle
class hidden tabindex
dirspellcheck  title
contenteditableid 
contextmenu lang 

Event Handler Content Attributes

Here are the standard HTML 5 event handler content attributes.

onabortonerror*onmousewheel
onblur*onfocus*onpause
oncanplayonformchangeonplay
oncanplaythroughonforminputonplaying
onchangeoninputonprogress
onclickoninvalidonratechange
oncontextmenuonkeydownonreadystatechange
ondblclickonkeypressonscroll
ondragonkeyuponseeked
ondragendonload*onseeking
ondragenteronloadeddataonselect
ondragleaveonloadedmetadataonshow
ondragoveronloadstartonstalled
ondragstartonmousedownonsubmit
ondroponmousemoveonsuspend
ondurationchangeonmouseoutontimeupdate
onemptiedonmouseoveronvolumechange
onendedonmouseuponwaiting

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