<select>: HTML-Auswahlelement

Probieren Sie es aus

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

Attribute

Dieses Element unterstützt die globalen Attribute.

autocomplete

Eine Zeichenfolge, die der Autovervollständigungsfunktion eines User Agents einen Hinweis gibt. Eine vollständige Liste der Werte und Einzelheiten zur Verwendung finden Sie unter Das HTML-Attribut autocomplete.

autofocus

Dieses boolesche Attribut legt fest, dass ein Formularsteuerelement beim Laden der Seite den Eingabefokus erhalten soll. Nur ein Formularelement pro Dokument kann das Attribut autofocus besitzen.

disabled

Dieses boolesche Attribut gibt an, dass Benutzer nicht mit dem Steuerelement interagieren können. Ist es nicht angegeben, übernimmt das Steuerelement die Einstellung des umgebenden Elements, beispielsweise <fieldset>. Gibt es kein umgebendes Element mit gesetztem disabled-Attribut, ist das Steuerelement aktiviert.

form

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

Mit diesem Attribut können Sie <select>-Elemente einem <form> an beliebiger Stelle im Dokument zuordnen, nicht nur innerhalb eines <form>-Elements. Es kann auch ein übergeordnetes <form>-Element außer Kraft setzen.

multiple

Dieses boolesche Attribut gibt an, dass null oder mehr Optionen aus der Liste ausgewählt werden können. Ist es nicht angegeben, kann jeweils nur eine Option ausgewählt werden. Mehrere ausgewählte Optionen werden gemäß der Array-Konvention von URLSearchParams übermittelt, also als name=value1&name=value2. Wenn multiple angegeben ist, beträgt der Standardwert von size 4 statt 1.

name

Dieses Attribut gibt den Namen des Steuerelements an.

required

Dieses boolesche Attribut gibt an, dass Benutzer mindestens eine Option auswählen müssen, bevor das Formular abgesendet werden kann. Für <select> ist keine Option ausgewählt, wenn es keine Optionen enthält, wenn multiple angegeben ist und Benutzer alle Optionen abwählen, wenn der Wert von <select> programmatisch auf "" gesetzt wird oder wenn nur die Platzhalteroption ausgewählt ist. Jede andere Option gilt als gültig, selbst wenn auch ihr Wert leer ist.

Die Platzhalteroption ist der Text, der im Feld angezeigt wird, bevor Benutzer eine Auswahl treffen – etwa „--Please choose an option--“ im obigen interaktiven Beispiel. Semantisch entspricht sie dem Attribut placeholder und gilt nicht als tatsächliche Option. Sie ist die erste Option in der Optionsliste, die ein direktes Kindelement von <select> ist (sich also nicht innerhalb eines <optgroup> befindet) und deren Wert eine leere Zeichenfolge ist. Sie ist nur relevant, wenn size den Wert 1 hat und multiple nicht angegeben ist. In allen anderen Fällen wird ein solches <option> aufgrund der Darstellung von <select> wie eine gewöhnliche Option behandelt.

size

Gibt als positive Ganzzahl an, wie viele Optionen im geschlossenen Zustand angezeigt werden. Ist das Attribut nicht angegeben, beträgt der Standardwert 1, es sei denn, das Attribut multiple ist angegeben; dann beträgt er 4. Ist der Wert größer als 1 oder das Attribut multiple vorhanden, stellen Browser ein scrollbares Listenfeld mit der angegebenen Anzahl sichtbarer Zeilen dar. Andernfalls werden die Optionen als Dropdown-Liste dargestellt. Aus Gründen der Abwärtskompatibilität gibt die Eigenschaft size als Standardwert stets 0 zurück.

Hinweise zur Verwendung

Wie andere Formularsteuerelemente wird ein <select>-Element aus Gründen der Barrierefreiheit üblicherweise mit einem <label> verknüpft. Außerdem erhält es ein name-Attribut, das den Namen des zugehörigen, an den Server übermittelten Datenfelds angibt. Jede Menüoption wird durch ein <option>-Element innerhalb von <select> definiert.

Jedes <option>-Element sollte ein value-Attribut enthalten, dessen Wert an den Server übermittelt wird, wenn die Option ausgewählt ist. Fehlt das Attribut value, wird standardmäßig der im Element enthaltene Text als Wert verwendet. Mit einem selected-Attribut auf einem <option>-Element können Sie festlegen, dass diese Option beim ersten Laden der Seite standardmäßig ausgewählt ist. Ist kein selected-Attribut angegeben, wird standardmäßig das erste <option>-Element ausgewählt.

Ein <select>-Element wird in JavaScript durch ein HTMLSelectElement-Objekt repräsentiert. Dessen Eigenschaft value enthält den Wert des ausgewählten <option>-Elements.

Sie können <option>-Elemente auch in <optgroup>-Elemente verschachteln, um innerhalb des Dropdown-Menüs getrennte Optionsgruppen zu erstellen. Mit <hr>-Elementen können Sie außerdem Trennlinien einfügen, die die Optionen visuell voneinander abgrenzen.

Weitere Beispiele finden Sie unter Native Formular-Widgets: Dropdown-Inhalte.

Optionen innerhalb umschließender Elemente

Das <select>-Element erstellt seine Optionsliste aus allen untergeordneten <option>-Elementen, nicht nur aus seinen direkten Kindelementen. Optionen können daher in andere Elemente wie <div> eingeschlossen sein. Sie erscheinen trotzdem als auswählbare Optionen im Dropdown-Menü und werden beim Absenden des Formulars berücksichtigt. Umschließende Elemente sind für die Gestaltung anpassbarer select-Elemente nützlich, beeinflussen aber das Verhalten von <select> nicht: Sie erzeugen weder Gruppen noch Beschriftungen oder Trennlinien. Um Optionen unter einer Überschrift zusammenzufassen, verwenden Sie <optgroup>. Ein <option> gehört zu einem <optgroup>, wenn die Gruppe eines seiner übergeordneten Elemente ist. Daher können auch innerhalb einer Gruppe umschließende Elemente verwendet werden, ohne die Zuordnung aufzuheben.

Mehrere Optionen auswählen

Mit dem Attribut multiple können Benutzer in einem <select>-Element null oder mehr Optionen auswählen. Wie das Steuerelement dargestellt wird, hängt vom Attribut size ab:

• Wenn das Attribut multiple gesetzt ist, zeigen Browser ein scrollbares Listenfeld an, sofern size nicht auf 1 gesetzt ist. Fehlt size, ist das Listenfeld vier Optionszeilen hoch, auch wenn es weniger Optionen enthält.
• Wenn size den Wert 1 hat, zeigen Browser, die diese Funktion unterstützen, ein Dropdown-Menü an, in dem Benutzer bei aktiviertem Steuerelement mehr als eine Option auswählen können. Ist genau eine Option ausgewählt, wird diese angezeigt. Andernfalls zeigt das Steuerelement die Anzahl der ausgewählten Optionen in einem einzeiligen Listenfeld an. Browser, die diese Funktionen nicht unterstützen, zeigen eine Menüliste mit mehreren Optionen in einem Steuerelement an, das nur so hoch wie ein einzeiliges Feld ist.

Informieren Sie Benutzer bei Verwendung des Attributs multiple immer darüber, dass sie mehr als eine Option auswählen können.

Im folgenden Beispiel wird mit <select multiple size="1"> ein Dropdown-Menü erstellt, das eine Mehrfachauswahl ermöglicht:

<label for="flavors">Choose one or more ice cream flavors:</label>
<select id="flavors" name="flavors" multiple size="1">
  <option value="chocolate">Chocolate</option>
  <option value="strawberry">Strawberry</option>
  <option value="vanilla">Vanilla</option>
</select>

Optionen in einem Listenfeld auswählen

Auf einem Desktop-Computer gibt es mehrere Möglichkeiten, in einem <select>-Element mit dem Attribut multiple und einem size-Wert größer als 1 mehrere Optionen auszuwählen.

Wer eine Maus verwendet, kann die Taste Ctrl (unter macOS Command) oder Shift gedrückt halten – je nachdem, was unter dem verwendeten Betriebssystem sinnvoll ist – und dann mehrere Optionen anklicken, um sie aus- oder abzuwählen.

Mit der Tastatur können Sie mehrere aufeinanderfolgende Einträge wie folgt auswählen:

• Setzen Sie den Fokus auf das <select>-Element, beispielsweise mit Tab.
• Wählen Sie mit den Pfeiltasten Up und Down einen Eintrag am Anfang oder Ende des gewünschten Bereichs aus.
• Halten Sie Shift gedrückt und vergrößern oder verkleinern Sie mit den Pfeiltasten Up und Down den ausgewählten Bereich.

Mit der Tastatur können Sie mehrere nicht aufeinanderfolgende Einträge wie folgt auswählen:

• Setzen Sie den Fokus auf das <select>-Element, beispielsweise mit Tab.
• Halten Sie Ctrl (unter macOS Command) gedrückt und wechseln Sie mit den Pfeiltasten Up und Down die Option mit Fokus – also die Option, die Sie als Nächstes auswählen können. Diese Option wird durch eine gepunktete Umrandung hervorgehoben, ähnlich wie ein Link mit Tastaturfokus.
• Drücken Sie Space, um Optionen mit Fokus aus- oder abzuwählen.

Gestaltung mit CSS

Das <select>-Element ließ sich mit CSS lange Zeit nur schwer wirksam gestalten. Die folgenden Leitfäden beschreiben Funktionen, mit denen sich vollständig anpassbare select-Elemente erstellen lassen:

• Anpassbare select-Elemente
• Anpassbare select-Listenfelder

Herkömmliche Gestaltung von select-Elementen

In Browsern, die moderne Anpassungsfunktionen nicht unterstützen (oder in älteren Codebasen, in denen sie nicht verwendet werden können), sind Sie auf Änderungen am Box-Modell, an der angezeigten Schriftart usw. beschränkt. Sie können auch die Eigenschaft appearance verwenden, um die systemseitige Standarddarstellung zu entfernen.

Mit herkömmlichen <select>-Elementen ist es jedoch schwierig, über verschiedene Browser hinweg ein einheitliches Ergebnis zu erzielen. Wenn Sie die volle Kontrolle benötigen, sollten Sie eine Bibliothek mit guten Möglichkeiten zur Gestaltung von Formularsteuerelementen in Betracht ziehen. Alternativ können Sie mit nicht-semantischen Elementen, JavaScript und WAI-ARIA ein eigenes Dropdown-Menü erstellen und ihm so Semantik verleihen.

Mit der Pseudoklasse :open können Sie <select>-Elemente im geöffneten Zustand gestalten, also wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (solche mit gesetztem Attribut multiple). Sie werden in der Regel als scrollbares Listenfeld statt als Dropdown-Menü dargestellt und haben daher keinen geöffneten Zustand.

Weitere Informationen zur herkömmlichen Gestaltung von <select> finden Sie unter:

• HTML-Formulare gestalten
• Fortgeschrittene Gestaltung von HTML-Formularen
• Der Eigenschaft field-sizing, die steuert, wie die Größe von <select>-Elementen im Verhältnis zu den enthaltenen Optionen bestimmt wird.

Barrierefreiheit

<hr>-Elemente innerhalb eines <select> sollten als rein dekorativ betrachtet werden, da sie derzeit nicht im Accessibility Tree erscheinen und somit assistiven Technologien nicht zugänglich sind.

Wenn Sie bei einem <select> mit Mehrfachauswahl size="1" setzen (also <select multiple size="1">), wird ein Dropdown-Menü dargestellt, in dem Benutzer mehrere Optionen auswählen können. Manche Browser erweitern die Optionsliste nicht, wenn das Steuerelement aktiv ist, sondern zeigen mehrere Optionen in einer Menüliste an, die nur so hoch wie ein einzeiliges Feld ist. Das beeinträchtigt die Benutzerfreundlichkeit. Wenn Sie ein <select> mit Mehrfachauswahl verwenden, informieren Sie Benutzer darüber, dass sie mehr als eine Option auswählen können – auch dann, wenn mehrere Optionen angezeigt werden.

Beispiele

Einfaches select-Element

Das folgende Beispiel erstellt ein Dropdown-Menü mit drei Werten. Die zweite Option besitzt das Attribut selected und ist daher standardmäßig ausgewählt.

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Ergebnis

Select-Element mit gruppierten Optionen

Das folgende Beispiel erstellt ein Dropdown-Menü, in dem <optgroup> und <hr> die Optionen gruppieren und Benutzern das Verständnis der Inhalte erleichtern.

<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

Erweitertes select-Element mit mehreren Funktionen

Das folgende Beispiel ist komplexer und zeigt weitere Funktionen, die Sie für ein <select>-Element verwenden können:

• Das Attribut multiple ermöglicht die Auswahl mehrerer Optionen.
• Das Attribut size ist auf 4 gesetzt. Dadurch werden jeweils vier Zeilen angezeigt. Benutzer können scrollen, um alle Optionen zu sehen.
• Zwei <optgroup>-Elemente erzeugen zwei visuelle Gruppen. In der Regel wird der Gruppenname fett dargestellt und die enthaltenen Optionen werden eingerückt.
• Die Option „Hamster“ besitzt das Attribut disabled und kann daher nicht ausgewählt werden.

<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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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