How to create a group of related options in a drop-down list using HTML ?
We can define a group of related options in a drop-down list by using the <optgroup> Tag tag is used to create a group of same category options in a drop-down list. The tag is required when there is a long list of items.
Example:
<!DOCTYPE html> < html > < head > < title > How to define a group of related options in a drop-down list? </ title > < style > body { text-align: center; } .gfg { font-size: 40px; font-weight: bold; color: green; } .Beginner { font-size: 17px; } </ style > </ head > < body > < div class = "gfg" >w3wiki</ div > < div class = "Beginner" > A computer science portal for Beginner </ div > < h2 > How to define a group of related options in a drop-down list </ h2 > < select > < optgroup label = "Programming Languages" > < option value = "C" >C</ option > < option value = "C++" >C++</ option > < option value = "Java" >Java </ 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:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Contact Us