HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML: <optgroup> Tag

Das HTML-<optgroup>-Element erstellt in der Dropdown-Liste des <select>-Steuerlements eine Gruppe von Optionen. Diese Dropdown-Werte werden durch eine Reihe von <option>-Elementen definiert und durch das <optgroup>-Element gruppiert. Der Wert von <optgroup label> wird als grauer Titel über den gruppierten Projekten im <select>-Steuerlement angezeigt. Dieses Element wird auch als <optgroup>-Element bezeichnet.

Online-Beispiel

Verwenden Sie das <optgroup>-Element, um verwandte Optionen zusammenzufassen:

Beispiel

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title>Verwendung des HTML-optgroup-Elements (Grundlagen-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="Datenbank">
　　　　　　<option value="sql">SQL</option>
　　　　　　<option value="oracle">Oracle</option>
　　　　</optgroup>
　　</select>
</body>
</html>

Testen Sie es heraus ‹/›

In diesem HTML5In dem Dokumentensatz haben wir den <optgroup>-Marken verwendet, um zwei Optionengruppen in der Dropdown-Liste zu erstellen. Der Titel der ersten Optionengruppe ist Web und enthält zwei Dropdown-Werte.-HTML und CSS. Der Titel der zweiten Optionengruppe ist "Datenbank" und enthält zwei Dropdown-Werte.-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 heading.

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

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	Specify that the option group should be disabled.
label	text	Define 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