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

optgroup ... ⁄optgroup

Share it

optgroup intro optgroup optional, occurrences optgroup browser display optgroup parents - children optgroup, option: disabled attributeoptgroup syntaxoptgroup disabled attributeoptgroup label attribute

HTML5 optgroup element

The optgroup element allows you to group the options from a list of options (within select element) under a common label. »video

About optgroup

Display & support optgroup

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children optgroup

Attributes optgroup


The difference between Disabling an option and Disablig a group of options »video

Syntax optgroup

<optgroup> ... </optgroup>
<optgroup> ... » video

Attributes and Values optgroup (comma separated)

<optgroupattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.disabled="",  , disabled»video<optgroup disabled> ... <⁄optgroup>
2.label= string (optgroup_name)»video<optgroup label="optgroup_name"> ...<⁄optgroup>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<optgroup accesskey="h"> ... </optgroup>
2.class=class name»html »img<optgroup class="class_name"> ... </optgroup>
3.contenteditable="",  , true, false »html<optgroup contenteditable="true"> ... </optgroup>
4.contextmenu=menu id value»html<optgroup contextmenu="menu_id_value"> ... </optgroup>
5.data-*= value -<optgroup data-http-error="404"> ... </optgroup>
6.dir=ltr, rtl, auto»html<optgroup dir="ltr"> ... </optgroup>
7.draggable= true,  , false»img<optgroup draggable="false"> ... </optgroup>
8.dropzone= copy, move, link, string:, file: -<optgroup dropzone="copy"> ... </optgroup>
9.hidden= "",  , hidden»html »img<optgroup hidden="hidden"> ... </optgroup>
10.id=id name»html »img<optgroup id="unique_id_name"> ... </optgroup>
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<optgroup lang="en"> ... </optgroup>
17.spellcheck="",  , true, false»html<optgroup spellcheck="true"> ... </optgroup>
18.style=CSS property:value»html »img<optgroup style="color:red"> ... </optgroup>
19.tabindex= integer »img<optgroup tabindex="3"> ... </optgroup>
20.title=text»html »link»style »abbr»dfn
»img »meter
<optgroup title="html page"> ... </optgroup>
21.translate="", yes, no»html »img<optgroup translate="yes"> ... </optgroup>
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 optgroup element

HTML5 optgroup element: mark up a group of options

min video details
00:00 video tutorial: optgroup element
00:05 the optgroup element groups the options within select element under a common label
00:14 at this moment the options are not grouped, optgroup element is not present inside select element
00:19 these options can be grouped under a common label: GMT+ represents hours Est of Greenwich the common label can be: Est of Greenwich
00:25while these options can be grouped under a common label: GMT- represents hours West of Greenwich the common label can be: West of Greenwich
00:34 adding the optgroup element in page + its required attribute: label attribute
00:43 adding the 2nd group
00:51 the 2 groups of options display; the options are now grouped under 2 groups:
1st group named: Est of Greenwich
2nd group named: West of Greenwich

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