What is HTML <optgroup> tag ?
HTML <optgroup> tag creates a grouping of options within a <select> element.
HTML <optgroup> tag creates a grouping of options, the related options are grouped under specific headings.
HTML <optgroup> tag represent labels of grouped options.
How HTML <optgroup> tag works ?
HTML <optgroup> tag creates a group of the same category options in a drop-down list.
The “label” attribute must be specified, which makes it easier for users to understand their choices when a long list of options.
The “label” value will appear as a grey heading above the grouped items within the <select> control.
Why HTML <optgroup> tag is used ?
HTML <optgroup> tag is used to group together related <option> elements within a parent <select> drop-down list.
If we have a long list of options, groups of related options are easier to handle for a user.
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<optgroup>
<option>..</option>
.
.
</optgroup>
1. Simple Optgroup Tag
Example :
<!DOCTYPE html>
<html>
<head>
<title>Optgroup Tag</title>
</head>
<body>
<h1>Welcome to CSTechbook</h1>
<h3>HTML optgroup tag</h3>
<select>
<!-- optgroup tag starts -->
<optgroup label="Programming Languages">
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Core Java">Java</option>
</optgroup>
<optgroup label="Scripting Language">
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Shell">Shell</option>
</optgroup>
<!-- optgroup tag ends -->
</select>
</body>
</html>
Output :
2. Optgroup disabled
Example :
<!DOCTYPE html>
<html>
<head>
<title>Optgroup Tag</title>
</head>
<body>
<h1>Welcome to CSTechbook</h1>
<h2>HTML optgroup Tag</h2>
<select>
<!-- optgroup tag starts -->
<optgroup label="Programming Languages">
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Core Java">Core Java</option>
</optgroup>
<optgroup label="Scripting Language" disabled>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Shell">Shell</option>
</optgroup>
<!-- optgroup tag ends -->
</select>
</body>
</html>
Output :
<optgroup> Tag Attributes
HTML <optgroup>
tag support following specific attributes.
Sno | Attributes | Value | Description |
---|---|---|---|
1 | disabled | disabled | Specify that this option group will be prevent to selectable. |
2 | label | text | Specify the name of the group of options. |
Global Attributes
HTML <optgroup>
tag support following global attributes.
Sno | Attributes | Value | Description |
---|---|---|---|
1 | id | unique_name | Declared unique id for an element. |
2 | class | class_name | Declared one or more classnames for an element. |
3 | style | styles | CSS inline styles specify an element. |
4 | title | title | Specify extra details of element contain, this will display as a “tooltip” for an elements. |
Event Attributes
HTML <optgroup>
tag support following event attributes.
Sno | Attributes | Value | Description |
---|---|---|---|
1 | onfocus | script | element gets focus on object when script tobe run. |
2 | onblur | script | element lose the focus on object when scrip tobe run. |
3 | onabort | script | element gets aborted on object when script tobe run. |
4 | onchange | script | element gets anytime change on object when script tobe run. |
5 | onbeforeunload | script | element gets unloaded on object when scrip tobe run. |
6 | onclick | script | clicked on object when script tobe run. |
7 | ondblclick | script | double click on object when script tobe run. |
8 | onkeydown | script | key is pressed when script tobe run. |
9 | onkeypress | script | key is pressed over element then released when script tobe run. |
10 | onkeyup | script | key is released over element when script tobe run. |
11 | onmousedown | script | mouse button was pressed over an element when script tobe run. |
12 | onmouseout | script | mouse pointer release over an element when script tobe run. |
13 | onmousemove | script | run mouse pointer moved when script tobe run. |
14 | onmouseover | script | run mouse pointer move over when script tobe run. |
15 | onmouseup | script | mouse button is released when script tobe run. |
16 | onreset | script | form has been reset when script tobe run. |
17 | onselect | script | Select some content when script tobe run. |
18 | onsubmit | script | form has been submitted when script tobe run. |
19 | onload | script | object has load when script tobe run. |
20 | onchange | script | allow to change the object when script tobe run. |
21 | onunload | script | unload to the browser window when script tobe run. |
22 | ondrag | script | element being dragged when script tobe run. |
23 | ondragend | script | element being stop dragged when script tobe run. |
24 | ondragenter | script | element being go target dragged when script tobe run. |
25 | ondragleave | script | element being leave to target dragged when script tobe run. |
26 | ondragover | script | element being over to target dragged when script tobe run. |
27 | ondragstart | script | element being start dragged when script tobe run. |
28 | ondrop | script | element being dropped when script tobe run. |
29 | onerror | script | element error occurs when script tobe run. |
30 | onmessage | script | element message display when script tobe run. |
31 | onerror | script | element error occurs when script tobe run. |
32 | onmousewheel | script | mouse wheel will be rotate when script tobe run. |
33 | onscroll | script | scrollbar is scroll when script tobe run. |
34 | onresize | script | element should be resize when script tobe run. |
35 | onselect | script | all element content selected when script tobe run. |
36 | onstorage | script | element should be store in target when script tobe run. |
Browser Compatibility
Sno | Browser | Support |
1 | Chrome | Yes |
2 | Firefox | Yes |
3 | Edge | Yes |
4 | Opera | Yes |
5 | Safari | Yes |
6 | Internet Explorer | Yes |