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:
label
|
It is used to specify the label for an optgroup.
|
disabled
|
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 >GeeksforGeeks</ h1 >
< h2 >HTML optgroup Tag</ h2 >
< select >
< 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 >
</ 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 >GeeksforGeeks</ h1 >
< h2 >HTML optgroup Tag with disabled property</ h2 >
< select >
< 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 >
</ select >
</ body >
</ html >
|
Output:Â
Supported Browser:Â
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4
Last Updated :
02 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...