HTML <optgroup>-Tag
Das HTML <optgroup>-Tag gruppiert <option>-Tags zusammen. Das erforderliche Attribut <label> definiert die Gruppenüberschrift, die fett dargestellt wird, während die darin enthaltenen Optionen automatisch eingerückt werden. (Das <option>-Tag definiert Elemente in einer Dropdown-Liste, die vom <select>-Tag erstellt wird.)
Das <optgroup>-Tag wird als Formularelement betrachtet.
Syntax
Das <optgroup>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<optgroup>) und dem schließenden (</optgroup>)-Tag geschrieben.
Beispiel für das HTML <optgroup>-Tag:
Beispiel einer Dropdown-Liste
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Ergebnis
Der Browser rendert eine Dropdown-Liste mit zwei Gruppen:
- Books: HTML, CSS
- Snippets: Java, Linux, Git
Beispiel für das HTML <optgroup>-Tag mit dem disabled-Attribut:
Beispiel für das HTML <optgroup>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup disabled="disabled" label="Quizzes">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="angularjs">AngularJS</option>
</optgroup>
</select>
</body>
</html>Ergebnis
Der Browser rendert eine Dropdown-Liste mit zwei Gruppen:
- Quizzes (deaktiviert): HTML, CSS, JavaScript, PHP
- Snippets: Git, AngularJS
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| disabled | disabled | Gibt an, dass die Auswahl der Gruppenelemente deaktiviert ist. |
| label | Text | Definiert ein Label für die Gruppe, das als Überschrift in der Dropdown-Liste angezeigt wird. Erforderliches Attribut. |
Das <optgroup>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
So stylen Sie ein HTML <optgroup>-Tag
Sie können CSS verwenden, um das Erscheinungsbild der Gruppenüberschrift und ihrer Optionen zu ändern:
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}Practice
Welche Funktion hat das HTML-Tag 'optgroup'?