How to create a group of related options in a drop-down list using HTML ?
Last Updated :
20 May, 2020
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;
}
.geeks {
font-size: 17px;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...