<select>: Das HTML Select-Element

<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 die 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 zugehörigen an den Server gesendeten Datenpunkts darzustellen. Jede Menüoption wird durch ein verschachteltes <option>-Element im <select> definiert.

Jedes <option>-Element sollte ein value-Attribut enthalten, das den Datenwert zum Senden an den Server enthält, wenn diese Option ausgewählt ist. Wenn kein value-Attribut enthalten ist, wird der Wert standardmäßig auf den Text im Innern des Elements gesetzt. Sie können ein selected-Attribut auf einem <option>-Element einschließen, um es standardmäßig auszuwählen, wenn die Seite zuerst geladen wird. Wenn kein selected-Attribut angegeben ist, wird standardmäßig das erste <option>-Element 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 eindeutige Attribute, mit denen Sie es steuern können, wie multiple, um anzugeben, ob mehrere Optionen ausgewählt werden können, und size, um festzulegen, wie viele Optionen gleichzeitig angezeigt werden sollen. Es akzeptiert auch die meisten allgemeinen Formulareingabeattribute wie required, disabled, autofocus, etc.

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

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

Dieses Element umfasst die globalen Attribute.

autocomplete

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

autofocus

Dieses boolesche Attribut ermöglicht es Ihnen, anzugeben, dass ein Formularelement den Eingabefokus haben soll, wenn die Seite geladen wird. Nur ein Formularelement in einem Dokument kann das autofocus-Attribut haben.

disabled

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

form

Das <form>-Element, mit dem das <select> verknüpft werden soll (sein Formular-Eigentü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>-Elementen überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahren <form>-Element überschreiben.

multiple

Dieses boolesche 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 ist, zeigen die meisten Browser eine scrollbare Listenbox anstelle eines einzelnen Zeilen-Dropdowns. Mehrere ausgewählte Optionen werden mit dem URLSearchParams-Array-Konvention eingereicht, z.B. name=value1&name=value2.

name

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

required

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

size

Wenn das Steuerelement als scrollbare Listenbox dargestellt wird (z.B. wenn multiple angegeben ist), repräsentiert dieses Attribut die Anzahl der Zeilen in der Liste, die gleichzeitig sichtbar sein sollten. Browser sind nicht verpflichtet, ein Select-Element als scrollbare Listenbox darzustellen. Der Standardwert ist 0.

Hinweis: Laut der HTML-Spezifikation sollte der Standardwert für Größe 1 sein; jedoch wurde in der Praxis festgestellt, dass dies einige Websites bricht, und kein anderer Browser macht das derzeit, daher hat sich Mozilla entschieden, für die Zeit mit Firefox weiterhin 0 zurückzugeben.

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

Mausbenutzer können die Strg-, Befehlstaste- oder Umschalttaste (je nachdem, was für Ihr Betriebssystem sinnvoll ist) gedrückt halten und dann mehrere Optionen anklicken, um sie auszuwählen/abzuwählen.

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

• Das <select>-Element fokussieren (z.B. mit Tab).
• Ein Element oben oder unten im Bereich auswählen, den sie auswählen möchten, indem sie die Pfeil hoch und Pfeil runter-Tasten verwenden, um die Optionen zu durchlaufen.
• Die Umschalttaste gedrückt halten und dann die Pfeil hoch und Pfeil runter-Tasten verwenden, um den Bereich der ausgewählten Elemente zu vergrößern oder zu verkleinern.

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

• Das <select>-Element fokussieren (z.B. mit Tab).
• Die Strg-Taste gedrückt halten und dann die Pfeil hoch und Pfeil runter-Tasten verwenden, um die "fokussierte" Auswahlmöglichkeit zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie sich dafür entscheiden. Die "fokussierte" Auswahlmöglichkeit ist mit einer gepunkteten Linie hervorgehoben, ähnlich wie ein per Tastatur fokussierter Link.
• Die Leertaste drücken, um "fokussierte" Auswahlmöglichkeiten auszuwählen/abzuwählen.

Das <select>-Element war historisch schwer mit CSS produktiv zu stylen, daher werden Funktionen eingeführt, um vollständig anpassbare Select-Elemente zu erstellen.

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in alten Codebasen, wo sie nicht verwendet werden können), sind Sie darauf beschränkt, das Box-Modell, die angezeigte Schriftart, etc. zu manipulieren. Sie können auch die appearance-Eigenschaft verwenden, um das Standard-Systemaussehen zu entfernen.

Es ist jedoch schwierig, ein konsistentes Ergebnis über Browser hinweg mit traditionellen <select>-Elementen zu erzielen. Wenn Sie die volle Kontrolle haben möchten, sollten Sie eine Bibliothek mit guten Möglichkeiten zum Styling von Formular-Widgets verwenden oder Ihr eigenes Dropdown-Menü mit nicht-semantischen Elementen, JavaScript und WAI-ARIA für semantische Informationen erstellen.

Sie können die :open-Pseudoklasse verwenden, um <select>-Elemente im offenen Zustand zu stylen, d.h. wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (die mit dem multiple-Attribut versehen sind) – sie werden eher als scrollbare Listenbox dargestellt als wie ein Dropdown und haben daher keinen offenen Zustand.

Für mehr Informationen zum Legacy-<select>-Styling siehe:

• HTML-Formulare stylen
• Erweitertes Styling für HTML-Formulare
• Die field-sizing-Eigenschaft, die steuert, wie <select>-Elemente im Verhältnis zu den enthaltenen Optionen dimensioniert werden.

Das <hr> innerhalb eines <select> sollte als rein dekorativ angesehen werden, da sie derzeit nicht innerhalb des Barrierefreiheitstrees ausgesetzt sind und daher von unterstützenden Technologien nicht angezeigt werden.

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 Gruppierungen mithilfe von <optgroup> und <hr>, um dem Benutzer das Verständnis der Inhalte im Dropdown zu 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

Das folgende Beispiel ist komplexer und zeigt mehr Funktionen auf, die Sie in 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 sind auswählbar, da wir das multiple-Attribut hinzugefügt haben.
• Das size-Attribut sorgt dafür, dass nur 4 Zeilen gleichzeitig angezeigt werden; Sie können scrollen, um alle Optionen zu sehen.
• Wir haben <optgroup>-Elemente hinzugefügt, um die Optionen in verschiedenen Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, die Visualisierung besteht im Allgemeinen darin, dass der Gruppenname fett gedruckt ist und die Optionen eingerückt sind.
• Die "Hamster"-Option enthält ein disabled-Attribut und kann daher überhaupt nicht ausgewählt werden.

• Ereignisse, die von <select> ausgelöst werden: change, input
• Das <option>-Element
• Das <optgroup>-Element
• Anpassbare Select-Elemente