Einführung
Das <optgroup>-Tag in HTML wird verwendet, um eine Gruppierung von Optionen innerhalb einer Dropdown-Liste zu erstellen. In diesem Lab werden Sie die Schritte zur Erstellung eines Optgroups und dessen Anpassung mithilfe von Attributen kennenlernen.
Hinweis: Sie können im
index.htmlprogrammieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
Stellen Sie die HTML-Datei ein
Erstellen Sie eine neue Datei namens index.html. Fügen Sie die grundlegende HTML-Struktur hinzu und schließen Sie ein <select>-Tag im Körperelement ein.
<!doctype html>
<html>
<head>
<title>HTML Optgroup Tag Lab</title>
</head>
<body>
<select>
<!-- options will go here -->
</select>
</body>
</html>
Fügen Sie Optionen zur Dropdown-Liste hinzu
Fügen Sie innerhalb des <select>-Tags <option>-Tags hinzu, um Ihre Optionenliste zu erstellen. Verwenden Sie das value-Attribut, um den Wert für jede Option festzulegen.
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Erstellen Sie ein Optgroup
Verwenden Sie das <optgroup>-Tag, um bestimmte Optionen zusammen zu gruppieren. Fügen Sie das label-Attribut hinzu, um den Namen der Gruppe zu definieren.
<select>
<optgroup label="Group 1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="option3">Option 3</option>
</optgroup>
</select>
Deaktivieren Sie ein Optgroup
Verwenden Sie das disabled-Attribut, um eine gesamte Gruppe von Optionen innerhalb der Dropdown-Liste zu deaktivieren. Fügen Sie dieses Attribut zum öffnenden <optgroup>-Tag hinzu.
<select>
<optgroup label="Group 1" disabled>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="option3">Option 3</option>
</optgroup>
</select>
Zusammenfassung
Das <optgroup>-Tag wird verwendet, um eine Gruppierung von Optionen innerhalb einer Dropdown-Liste zu erstellen. Sie können es mit Attributen wie disabled und label anpassen. Indem Sie die Schritte in diesem Labyrinth folgen, können Sie Ihre Optionen in HTML effektiv gruppieren und organisieren.
