`<select>`: Das HTML Select-Element

Das obige Beispiel zeigt die typische Verwendung von <select>. Es wird ein id-Attribut zugewiesen, um es mit einem <label> für Barrierefreiheitszwecke zu verknüpfen, sowie ein name-Attribut, um den Namen des zu übermittelnden Datenpunkts an den Server darzustellen. Jede Menüoption wird durch ein <option>-Element definiert, das im <select> verschachtelt ist.

Jedes <option>-Element sollte ein value-Attribut enthalten, das den Datenwert enthält, der an den Server übermittelt wird, wenn diese Option ausgewählt ist. Wenn kein value-Attribut enthalten ist, wird der Wert standartmäßig auf den im Element enthaltenen Text gesetzt. Sie können ein selected-Attribut in einem <option>-Element einfügen, damit es standardmäßig ausgewählt ist, wenn die Seite erstmals geladen wird. Wenn kein selected-Attribut angegeben ist, wird das erste <option>-Element standardmäßig ausgewählt.

Ein <select>-Element wird in JavaScript durch ein HTMLSelectElement-Objekt repräsentiert. Dieses Objekt hat eine value-Eigenschaft, die den Wert der ausgewählten <option> enthält.

Das <select>-Element hat einige eindeutige Attribute, die Sie zur Steuerung verwenden können, wie z. B. multiple, um anzugeben, ob mehrere Optionen ausgewählt werden können, und size, um anzugeben, wie viele Optionen gleichzeitig angezeigt werden sollen. Es akzeptiert auch die meisten allgemeinen Eingabe-Formularattribute wie required, disabled, autofocus usw.

Sie können weiterhin <option>-Elemente innerhalb von <optgroup>-Elementen verschachteln, um separate Gruppen von Optionen innerhalb des Dropdown-Menüs zu erstellen. Sie können auch <hr>-Elemente einfügen, um Trennzeichen hinzuzufügen, die visuelle Abstände zwischen den Optionen darstellen.

Für weitere Beispiele siehe Die nativen Formular-Widgets: Dropdown-Inhalt.

Dieses Element enthält die globalen Attribute.

autocomplete

Ein String, der einen Hinweis für die Autovervollständigungsfunktion eines User-Agent bietet. Siehe Das HTML-Autocomplete-Attribut für eine vollständige Liste der Werte und Details zur Verwendung von Autocomplete.

autofocus

Dieses Boolean-Attribut ermöglicht es Ihnen anzugeben, dass ein Formularsteuerelement beim Laden der Seite den Eingabefokus haben soll. Nur ein Formularelement in einem Dokument kann das autofocus-Attribut haben.

disabled

Dieses Boolean-Attribut zeigt an, dass der Benutzer nicht mit dem Steuerelement interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt das Steuerelement seine Einstellung vom umgebenden Element, zum Beispiel <fieldset>; gibt es kein umgebendes Element mit gesetztem disabled-Attribut, ist das Steuerelement aktiviert.

form

Das <form>-Element, mit dem das <select> verknüpft ist (sein Formularbesitzer). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <select> mit seinem übergeordneten <form>-Element verknüpft, sofern vorhanden.)

Dieses Attribut ermöglicht es Ihnen, <select>-Elemente mit <form>-Elementen überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein übergeordnetes <form>-Element überschreiben.

multiple

Dieses Boolean-Attribut gibt an, dass mehrere Optionen in der Liste ausgewählt werden können. Wenn es nicht angegeben ist, kann nur eine Option gleichzeitig ausgewählt werden. Wenn multiple angegeben wird, zeigen die meisten Browser ein Scrolllistenfeld anstatt eines einzeiligen Dropdowns.

name

Dieses Attribut wird verwendet, um den Namen des Steuerelements anzugeben.

required

Ein Boolean-Attribut, das angibt, dass eine Option mit einem nicht-leeren String-Wert ausgewählt werden muss.

size

Wenn das Steuerelement als Scrolllistenfeld dargestellt wird (z. B. wenn multiple angegeben ist), stellt dieses Attribut die Anzahl der in der Liste sichtbaren Zeilen dar, die gleichzeitig sichtbar sein sollen. Browser müssen kein Scrolllistenfeld darstellen. Der Standardwert ist 0.

Hinweis: Gemäß der HTML-Spezifikation sollte der Standardwert für die Größe 1 sein; in der Praxis wurde jedoch festgestellt, dass dies einige Websites beeinträchtigt. Da kein anderer Browser dies derzeit tut, hat sich Mozilla entschieden, vorerst weiterhin 0 mit Firefox zurückzugeben.

Auf einem Desktop-Computer gibt es mehrere Möglichkeiten, um im <select>-Element mit einem multiple-Attribut mehrere Optionen auszuwählen:

Mausnutzer können die Tasten Strg, Befehl oder Umschalt gedrückt halten (abhängig davon, was für Ihr Betriebssystem sinnvoll ist) und dann auf mehrere Optionen klicken, um sie auszuwählen/abzuwählen.

Tastaturnutzer können mehrere zusammenhängende Elemente auswählen durch:

• Fokussieren auf das <select>-Element (z. B. mit Tab).
• Auswählen eines Elements am oberen oder unteren Ende des Bereichs, den sie auswählen möchten, mit den Tasten Oben und Unten zur Navigation durch die Optionen.
• Halten der Umschalt-Taste und Verwenden der Tasten Oben und Unten, um den Bereich der ausgewählten Elemente zu vergrößern oder zu verkleinern.

Tastaturnutzer können mehrere nicht zusammenhängende Elemente auswählen durch:

• Fokussieren auf das <select>-Element (z. B. mit Tab).
• Halten der Strg-Taste und Verwenden der Tasten Oben und Unten, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, falls Sie sich dazu entscheiden. Die "fokussierte" Auswahloption wird mit einem gepunkteten Umriss hervorgehoben, ähnlich einem tastaturfokussierten Link.
• Drücken der Leertaste, um die "fokussierten" Auswahloptionen auszuwählen/abzuwählen.

Das <select>-Element ist bekanntermaßen schwer produktiv mit CSS zu gestalten. Sie können gewisse Aspekte wie bei jedem Element beeinflussen — zum Beispiel die Box-Modell, die angezeigte Schriftart usw., und Sie können die appearance-Eigenschaft verwenden, um das Standardsystemaussehen zu entfernen.

Diese Eigenschaften führen jedoch nicht zu konsistenten Ergebnissen in verschiedenen Browsern, und es ist schwierig, unterschiedliche Formularelemente miteinander in einer Spalte auszurichten. Die interne Struktur des <select>-Elements ist komplex und nur schwer zu kontrollieren. Wenn Sie die volle Kontrolle wünschen, sollten Sie in Erwägung ziehen, eine Bibliothek mit guten Möglichkeiten zur Gestaltung von Formular-Widgets zu verwenden oder Ihr eigenes Dropdown-Menü mit nicht-semantischen Elementen, JavaScript und WAI-ARIA zur Bereitstellung von Semantik zu erstellen.

Für weitere nützliche Informationen zum Styling von <select>, siehe:

• Styling von HTML-Formularen
• Erweitertes Styling für HTML-Formulare
• Die field-sizing-Eigenschaft, die steuert, wie <select>-Elemente in Bezug auf ihre enthaltenen Optionen dimensioniert werden.

Das <hr>-Element innerhalb eines <select> sollte als rein dekorativ betrachtet werden, da es derzeit nicht innerhalb des Accessibility Trees offengelegt wird und daher nicht für unterstützende Technologien zugänglich ist.

Das folgende Beispiel erstellt ein Dropdown-Menü mit drei Werten, wobei die zweite Option standardmäßig ausgewählt ist.

<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Ergebnis

Das folgende Beispiel erstellt ein Dropdown-Menü mit Gruppierung mithilfe von <optgroup> und <hr>, um es dem Benutzer zu erleichtern, den Inhalt des Dropdowns zu verstehen.

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

Ergebnis

Das folgende Beispiel ist komplexer und zeigt weitere Funktionen, die Sie bei einem <select>-Element verwenden können:

<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

Ergebnis

Sie werden sehen, dass:

• Mehrere Optionen auswählbar sind, weil wir das multiple-Attribut eingeschlossen haben.
• Das size-Attribut bewirkt, dass nur 4 Zeilen gleichzeitig angezeigt werden; Sie können scrollen, um alle Optionen anzuzeigen.
• Wir haben <optgroup>-Elemente eingefügt, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, ihre Visualisierung besteht in der Regel daraus, dass der Gruppenname fett dargestellt wird und die Optionen eingerückt werden.
• Die Option "Hamster" enthält ein disabled-Attribut und kann daher überhaupt nicht ausgewählt werden.

• Von <select> ausgelöste Ereignisse: change, input
• Das <option>-Element
• Das <optgroup>-Element