LabEx
AnmeldenKostenlos beitreten

HTML Option Gruppierung

HTMLHTMLBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

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.html programmieren 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.

Einrichten der HTML-Datei

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 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.

Verwandt HTML Kurse
HTML für Anfänger

HTML für Anfänger

HTML
Anfänger
Schnellstart mit HTML

Schnellstart mit HTML

HTML
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger