HTML Dropdown-Liste

Einführung

Das HTML Select-Element wird verwendet, um eine Dropdown-Liste zu erstellen, die Benutzern ermöglicht, eine oder mehrere Optionen aus der angegebenen Liste auszuwählen. In diesem Lab werden Sie lernen, wie Sie das HTML Select-Tag verwenden, um eine Liste von Elementen zu erstellen, aus der ein Benutzer auswählen kann.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML 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.

Skills Graph

Erstellen eines Select-Elements

Um ein Select-Element zu erstellen, verwenden wir das HTML Select-Tag mit den Anfangs- und Schließtags. Hier ist ein Beispiel dafür, wie man ein einfaches Select-Element erstellt.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Der obige Code erstellt ein einfaches Select-Element mit vier Optionen: Volvo, Saab, Opel und Audi.

Hinzufügen von Attributen zu einem Select-Element

Wir können Attributen zum Select-Element hinzufügen, um es für die Benutzer interaktiver zu gestalten. Hier sind einige der wichtigen Attribute des HTML Select-Elements.

A: Size-Attribut

Das size-Attribut gibt an, wie viele Optionen gleichzeitig sichtbar sein müssen. Hier ist ein Beispiel:

<select size="3">
  <!-- standardmäßig drei Optionen sichtbar -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

B: Name-Attribut

Das Name-Attribut weist dem Select-Element einen Namen zu. Hier ist ein Beispiel:

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

C: Multiple-Attribut

Das multiple-Attribut ermöglicht es Benutzern, mehrere Optionen gleichzeitig auszuwählen. Hier ist ein Beispiel:

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Definieren von Optionen

Sie können beliebig viele Optionen zu einem Select-Element hinzufügen, indem Sie das option-Tag verwenden. Hier ist ein Beispiel:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Wie Sie sehen können, haben wir vier Optionen definiert und jede Option hat ein value-Attribut. Das value-Attribut kann verwendet werden, um jeder Option einen eindeutigen Wert zuzuordnen.

Verwenden von gruppierten Optionen

Sie können Optionen unter einem <optgroup>-Tag gruppieren. Dadurch wird Ihr Select-Element organisierter und lesbarer. Hier ist, wie Sie gruppierte Optionen verwenden können:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Erstellen von Standardwerten

Sie können einen Standardwert angeben, der angezeigt wird, wenn die Seite geladen wird. Hier ist, wie Sie einen Standardwert festlegen:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

In diesem Beispiel wird die Option "Opel" standardmäßig ausgewählt.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie eine Dropdown-Liste mit dem HTML Select-Tag erstellen, welche unterschiedlichen Attribute mit dem Select-Tag verwendet werden können, wie Sie Optionen definieren, gruppierte Optionen verwenden und Standardwerte erstellen. Mit diesen Fähigkeiten sollten Sie in der Lage sein, fortgeschrittene Select-Elemente zu erstellen, die es Benutzern ermöglichen, mit Ihren Websites leicht zu interagieren.