W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

option ... ⁄option

Share it

option intro option optional, occurrences option browser display option parents - children option(s) selected vs pre-selectedoption syntaxoption disabled attributeoption selected attribute

HTML5 option element

The option element allows you to mark up an option within the select or datalist elements. »video

About option

Display & support option

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children option

Attributes option

Observation: to have more than 1 option pre-selected (selected), multiple attribute on select parent element is required »video


option(s) selected versus option(s) pre-selected: see the difference »video

Syntax option

<option> ... </option>
<option> ... » video

Attributes and Values option (comma separated)

<optionattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.disabled="",  , disabled»video<option disabled> ... <⁄option>
2.label=string (option_label)-<option label="option_label"> ...<⁄option>
3.selected="",  , selected»video<option selected> ... <⁄option>
4.value=string (option_value)-<option value="option_value"> ...<⁄option>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<option accesskey="h"> ... </option>
2.class=class name»html »img<option class="class_name"> ... </option>
3.contenteditable="",  , true, false »html<option contenteditable="true"> ... </option>
4.contextmenu=menu id value»html<option contextmenu="menu_id_value"> ... </option>
5.data-*= value -<option data-http-error="404"> ... </option>
6.dir=ltr, rtl, auto»html<option dir="ltr"> ... </option>
7.draggable= true,  , false»img<option draggable="false"> ... </option>
8.dropzone= copy, move, link, string:, file: -<option dropzone="copy"> ... </option>
9.hidden= "",  , hidden»html »img<option hidden="hidden"> ... </option>
10.id=id name»html »img<option id="unique_id_name"> ... </option>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<option lang="en"> ... </option>
17.spellcheck="",  , true, false»html<option spellcheck="true"> ... </option>
18.style=CSS property:value»html »img<option style="color:red"> ... </option>
19.tabindex= integer »img<option tabindex="3"> ... </option>
20.title=text»html »link»style »abbr»dfn
»img »meter
<option title="html page"> ... </option>
21.translate="", yes, no»html »img<option translate="yes"> ... </option>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration option element

HTML5 option element: mark up an option

min video details
00:00 video tutorial: option element
00:05 options element allows you to mark up an option

An option can be:
A) selected: if option element is child of select element or
B) pre-selected: if option element is child of datalist element

note: an option that can be selected can also be grouped together with other options under a common label
00:11 A) let's add options which can be selected (option element nested inside select element)
00:37 any option can be selected
00:43 the options can be grouped (option element nested inside optgroup element, inside select element)
00:56 the 3 options are grouped under 'Group x' which represents their common label
01:02 B) let's add options which can be suggested (option element nested inside datalist element)
01:29 as we type in, the list of suggestions display (= the options are being suggested to us)
01:32 options selected versus
01:34 options suggested

For more information about the option element, please see the specs: W3CWHATWG