HTML <optgroup> Tag
The HTML <optgroup> Tag is used to create a group of the same category options in a drop-down list. The <optgroup> tag is required when there is a long list of items exist. It has a single attribute, label
which is used to specify a label or heading for the grouped options.
Note: The <optgroup>
tag also supports the Global Attributes and Event Attributes in HTML.
Syntax:
<optgroup>
<option>..</option>
.
.
</optgroup>
Attributes:
Attribute Values |
Description |
---|---|
It is used to specify the label for an optgroup. |
|
It is used to disable the option-group in a list. |
Example 1: In this example, we will implement the optgroup tag in an HTML document.
html
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ 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 = "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:
Example 2: In this example, we will implement the outgroup tag code in an HTML document.
html
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 >HTML optgroup Tag with disabled property</ h2 > < select > <!-- optgroup tag starts --> < optgroup label = "Programming Languages" > < option value = "C" > C </ option > < option value = "C++" > C++ </ option > < option value = "Java" > 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:
Supported Browser:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4