HTML reference manual

HTML tag大全

HTML: <optgroup> tag

The HTML <optgroup> tag creates a group of options in the dropdown list of the <select> control. These dropdown values are defined by a series of <option> tags and grouped using the <optgroup> tag. The value of the label <optgroup> will be displayed as a gray title above the grouped items in the <select> control. This tag is also commonly referred to as the <optgroup> element.

Online example

Group related options together using the <optgroup> tag:

Example

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML optgroup tag usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
　　<label for="tutorial_choice">Tutorials:　</label>
　　<select id="tutorial_choice">
　　　　<optgroup label="Web">
　　　　　　<option value="html">HTML</option>
　　　　　　<option value="css">CSS</option>
　　　　</optgroup>
　　　　<optgroup label="Database">
　　　　　　<option value="sql">SQL</option>
　　　　　　<option value="oracle">Oracle</option>
　　　　</optgroup>
　　</select>
</body>
</html>

Test to see ‹/›

In this HTML5In the document example, we used the <optgroup> tag to create two option groups in the dropdown list. The title of the first option group is Web, containing two dropdown values-HTML and CSS. The title of the second option group is 'Database', and it includes two dropdown values-SQL and Oracle.

Browser Compatibility

IEFirefoxOperaChromeSafari

Most mainstream browsers support the <optgroup> tag.

Definition and Usage Description

The <optgroup> tag organizes a group of <option> tags into an option group with a group title.

The value of label <optgroup> will be displayed as a gray title. All grouped items will be displayed as an indented option list below the title.

By default, the first option in the <select> tag will be displayed as the selected item. Users can select another option from the drop-down list.

If you have many option groups, you can use the <optgroup> tag to group related options together simply.

Attribute

Attribute	Value	Description
disabled	disabled	Specifies that the option group is disabled.
label	text	Specifies a description for the option group.

Global Attributes

<optgroup> tag supports global attributes, see the complete attribute table HTML Global Attributes.

event attributes

<optgroup> tag supports all HTML Event Attributes.

HTML: <option> tag HTML: <ol> tag