<select>: Das 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;
}

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

Jedes <option>-Element sollte ein value-Attribut enthalten, das den Wert der Daten enthält, die an den Server gesendet werden sollen, wenn diese Option ausgewählt wird. Wenn kein value-Attribut enthalten ist, entspricht der Standardwert dem im Element enthaltenen Text. Sie können ein selected-Attribut in einem <option>-Element einschließen, um es als Standard auszuwählen, wenn die Seite zum ersten Mal 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 dargestellt, und dieses Objekt hat eine value-Eigenschaft, die den Wert der ausgewählten <option> enthält.

Das <select>-Element hat einige einzigartige Attribute, die Sie verwenden können, um es zu steuern, 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 Formulareingabe-Attribute wie required, disabled, autofocus usw.

Sie können weitere <option>-Elemente innerhalb von <optgroup>-Elementen verschachteln, um separate Gruppen von Optionen innerhalb des Dropdowns zu erstellen. Sie können auch <hr>-Elemente einfügen, um Trennlinien zu erzeugen, die visuelle Unterbrechungen zwischen den Optionen hinzufügen.

Für weitere Beispiele siehe Die nativen Formular-Widgets: Drop-down Inhalte.

Attribute

Dieses Element enthält die globalen Attribute.

autocomplete

Ein String, der einen Hinweis für die Autovervollständigungsfunktion eines User Agents bietet. Siehe Das HTML-Autovervollständigungsattribut für eine vollständige Liste von Werten und Details zur Verwendung der Autovervollständigung.

autofocus

Dieses boolesche Attribut erlaubt es Ihnen zu spezifizieren, dass ein Formular-Steuerelement den Eingabefokus haben sollte, wenn die Seite geladen wird. Nur ein Formularelement in einem Dokument kann das autofocus-Attribut haben.

disabled

Dieses boolesche Attribut zeigt an, dass der Benutzer nicht mit dem Steuerelement interagieren kann. Wenn dieses Attribut nicht angegeben ist, übernimmt das Steuerelement seine Einstellung vom beinhaltenden Element, z.B. <fieldset>; wenn es kein beinhaltendes Element mit gesetztem disabled-Attribut gibt, dann ist das Steuerelement aktiviert.

form

Das <form>-Element, mit dem das <select> verknüpft werden soll (seinem Formulareigentümer). Der Wert dieses Attributs muss die id eines <form> im gleichen Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <select> mit seinem Vorfahren-<form>-Element verknüpft, falls vorhanden.)

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

multiple

Dieses boolesche Attribut zeigt 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 ist, zeigen die meisten Browser ein scrollbares Listenfeld anstelle eines einzeiligen Dropdowns an. Mehrfachausgewählte Optionen werden unter Verwendung der URLSearchParams-Array-Konvention eingereicht, d.h. name=value1&name=value2.

name

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

required

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

size

Falls die Kontrolle als ein scrollbares Listenfeld dargestellt wird (z.B. wenn multiple angegeben ist), repräsentiert dieses Attribut die Anzahl der Zeilen in der Liste, die gleichzeitig sichtbar sein sollen. Browser sind nicht verpflichtet, ein Select-Element als scrollbares Listenfeld darzustellen. Der Standardwert ist 0.

Hinweis: Laut der HTML-Spezifikation sollte der Standardwert für Größe 1 sein; jedoch hat sich in der Praxis gezeigt, dass dies einige Webseiten beeinträchtigt, und kein anderer Browser macht das aktuell, daher hat sich Mozilla entschieden, weiterhin 0 in Firefox zurückzugeben.

Verwendungshinweise

Auswählen mehrerer Optionen

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

Mausbenutzer können die Strg-, Command- oder Umschalt-Taste gedrückt halten (abhängig von Ihrem Betriebssystem) und dann mehrere Optionen anklicken, um sie auszuwählen/abwählen.

Tastaturbenutzer können mehrere zusammenhängende Elemente auswählen, indem sie:

• Den Fokus auf das <select>-Element setzen (z.B. mit Tab).
• Ein Element am Anfang oder Ende des Bereichs auswählen, den sie auswählen möchten, indem sie die Pfeil nach oben und Pfeil nach unten-Tasten verwenden, um durch die Optionen zu navigieren.
• Die Umschalt-Taste gedrückt halten und dann die Pfeil nach oben und Pfeil nach unten-Tasten verwenden, um den ausgewählten Bereich zu vergrößern oder zu verkleinern.

Tastaturbenutzer können mehrere nicht zusammenhängende Elemente auswählen, indem sie:

• Den Fokus auf das <select>-Element setzen (z.B. mit Tab).
• Die Strg-Taste gedrückt halten und dann die Pfeil nach oben und Pfeil nach unten-Tasten verwenden, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie dies tun möchten. Die "fokussierte" Auswahloption ist mit einer gestrichelten Umrandung hervorgehoben, ähnlich wie ein tastaturfokussierter Link.
• Leertaste drücken, um "fokussierte" Auswahloptionen auszuwählen/abwählen.

Styling mit CSS

Das <select>-Element war historisch bekanntlich schwer produktiv mit CSS zu gestalten, daher wurden Funktionen eingeführt, um das Erstellen von voll anpassbaren Auswahl-Elementen zu ermöglichen.

Traditionelles select-Styling

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in älteren Codebasen, wo sie nicht verwendet werden können), sind Sie darauf beschränkt, das Boxmodell, die angezeigte Schriftart usw. zu beeinflussen. Sie können auch die appearance-Eigenschaft verwenden, um das standardmäßige System-Aussehen zu entfernen.

Es ist jedoch schwierig, ein konsistentes Ergebnis in allen Browsern mit traditionellen <select>-Elementen zu erzielen. Wenn Sie die vollständige Kontrolle haben möchten, sollten Sie in Erwägung ziehen, eine Bibliothek mit guten Einrichtungen zur Stilierung von Formular-Widgets zu verwenden oder Ihr eigenes Dropdown-Menü mithilfe von nicht-semantischen Elementen, JavaScript und WAI-ARIA zu erstellen, um Semantik bereitzustellen.

Sie können die :open-Pseudoklasse verwenden, um <select>-Elemente im geöffneten Zustand zu stylen, d.h. wenn die Dropdown-Optionenliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (die mit dem multiple-Attribut gesetzt sind) – sie tendieren dazu, als scrollbare Listenfelder anstatt als Dropdowns dargestellt zu werden, wodurch sie keinen offenen Zustand haben.

Für weitere Informationen zur traditionellen <select>-Stilierung siehe:

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

Barrierefreiheit

Das <hr> innerhalb eines <select> sollte als rein dekorativ angesehen werden, da es derzeit nicht innerhalb des Barrierefreiheitsbaums angezeigt wird und daher nicht für unterstützende Technologien sichtbar ist.

Beispiele

Einfaches select

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

Select mit gruppierten Optionen

Das folgende Beispiel erstellt ein Dropdown-Menü mit Gruppierungen unter Verwendung von <optgroup> und <hr>, um es dem Benutzer zu erleichtern, den Inhalt im Dropdown 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

Erweitertes select mit mehreren Funktionen

Das folgende Beispiel ist komplexer und zeigt mehr Funktionen, die Sie auf 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 feststellen, dass:

• Mehrere Optionen ausgewählt werden können, weil wir das multiple-Attribut hinzugefügt 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, deren Visualisierung im Allgemeinen darin besteht, dass der Gruppenname fett dargestellt und die Optionen eingerückt sind.
• Die "Hamster"-Option enthält ein disabled-Attribut und kann daher überhaupt nicht ausgewählt werden.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Ereignisse, die von <select> abgefeuert werden: change, input
• Das <option>-Element
• Das <optgroup>-Element
• Anpassbare Auswahlelemente