Optgroup Tag in HTML5
In this article I am going to describe about the implementation and use of Optgroup Tag in HTML5.
Optgroup Tag
<optgroup> tag is used to group various option in a menu list. With the help of this tag, you can make group of related option along with a label. The label is a attribute of representing name of group.
<select> , <option> and <optgroup> elements combine to form a menu list of options for possible selection by a user, most commonly used within an online form.
Browser Support
It is supported in all major browsers.
Syntax
<optgroup label="text"> option tag</optgroup >
Attributes
Attribute |
Value |
Description |
disabled |
disabled |
Element can not receives focus of user. |
label |
string |
Name of group |
Example of <optgroup> tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Optgroup Tag</title>
</head>
<body>
<h3>Optgroup Tag in HTML5</h3>
Select any one game :
<select style="width: 150px">
<option value="default">Please Select</option>
<optgroup label="Indoor Games">
<option value="chess">Chess</option>
<option value="ludo">Ludo</option>
<option value="table tennis">Table Tennis</option>
</optgroup>
<optgroup label="Outdoor Games" disabled="disabled">
<option value="cricket">Cricket</option>
<option value="hockey">Hockey</option>
<option value="volley ball">Volley Ball</option>
</optgroup>
</select>
</body>
</html>
Output