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

<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

<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