<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 hat ein id-Attribut, um es mit einem <label> für Barrierefreiheitszwecke zu assoziieren, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunktes darzustellen, der an den Server gesendet wird. Jede Menüoption wird durch ein <option>-Element definiert, das innerhalb von <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 wird. Wenn kein value-Attribut enthalten ist, wird standardmäßig der Text innerhalb des Elements als Wert verwendet. Sie können ein selected-Attribut zu einem <option>-Element hinzufügen, um es standardmäßig auszuwählen, 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 dargestellt, und dieses Objekt verfügt über eine value-Eigenschaft, die den Wert der ausgewählten <option> enthält.

Das <select>-Element hat einige einzigartige 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 Formular-Input-Attribute wie required, disabled, autofocus, etc.

Sie können <option>-Elemente weiter innerhalb von <optgroup>-Elementen verschachteln, um separate Gruppen von Optionen im Dropdown-Menü zu erstellen. Sie können auch <hr>-Elemente einfügen, um Trennelemente zu erstellen, die visuelle Unterbrechungen zwischen den Optionen hinzufügen.

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

Dieses Element umfasst die globalen Attribute.

autocomplete

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

autofocus

Dieses Boolean-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 Boolean-Attribut zeigt an, dass der Benutzer nicht mit der Steuerung interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt die Steuerung ihre Einstellung vom umgebenden Element, zum Beispiel <fieldset>; wenn kein umgebendes Element mit dem disabled-Attribut gesetzt ist, dann ist die Steuerung aktiviert.

form

Das <form>-Element, mit dem das <select> verknüpft werden soll (sein 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 assoziiert, 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 Boolean-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 Dropdown-Menüs.

name

Dieses Attribut wird verwendet, um den Namen der Steuerung anzugeben.

required

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

size

Wenn die Steuerung als scrollbare Liste 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 scrollbare Liste darzustellen. Der Standardwert ist 0.

Hinweis: Gemäß der HTML-Spezifikation sollte der Standardwert für size 1 sein; jedoch wurde in der Praxis festgestellt, dass dies einige Websites beschädigt, und kein anderer Browser tut dies derzeit, sodass sich Mozilla entschieden hat, vorerst in Firefox 0 zurückzugeben.

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

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

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

• Fokussierung auf das <select>-Element (z.B. durch Drücken von Tab).
• Auswahl eines Elements am oberen oder unteren Ende des Bereichs, den sie auswählen möchten, indem sie die Tasten Nach oben und Nach unten verwenden, um durch die Optionen nach oben und unten zu gehen.
• Halten der Umschalt-Taste und Verwenden der Tasten Nach oben und Nach unten, um den Bereich der ausgewählten Elemente zu vergrößern oder zu verkleinern.

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

• Fokussierung auf das <select>-Element (z.B. durch Drücken von Tab).
• Halten der Strg-Taste und Verwenden der Tasten Nach oben und Nach unten, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, falls Sie sich dafür entscheiden dies zu tun. Die "fokussierte" Auswahloption wird mit einer gestrichelten Umrandung hervorgehoben, ähnlich wie bei einem tastaturfokussierten Link.
• Drücken der Leertaste, um "fokussierte" Auswahloptionen auszuwählen/abzuwählen.

Das <select>-Element ist berüchtigt dafür, dass es schwierig ist, es produktiv mit CSS zu stylen. Sie können bestimmte Aspekte wie bei jedem Element beeinflussen — zum Beispiel die Box-Modell Manipulation, die angezeigte Schriftart, etc., und Sie können die appearance-Eigenschaft verwenden, um das standardmäßige Systemerscheinungsbild zu entfernen.

Diese Eigenschaften führen jedoch nicht zu einem konsistenten Ergebnis in verschiedenen Browsern, und es ist schwierig, Dinge wie das Ausrichten verschiedener Arten von Formularelementen in einer Spalte zu erledigen. Die interne Struktur des <select>-Elements ist komplex und schwer zu kontrollieren. Wenn Sie die volle Kontrolle haben möchten, sollten Sie überlegen, eine Bibliothek mit guten Möglichkeiten zum Stylen von Formular-Widgets zu verwenden oder versuchen, Ihr eigenes Dropdown-Menü mit nicht-semantischen Elementen, JavaScript und WAI-ARIA zur Bereitstellung von Semantik zu erstellen.

Sie können auch die :open-Pseudo-Klasse verwenden, um ein <select>-Element zu stylen, wenn es sich im offenen Zustand befindet, d.h. wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (d.h. solche mit dem multiple-Attribut) — diese neigen dazu, als scrollbare Listenbox anstelle eines Dropdown-Menüs angezeigt zu werden, daher haben sie keinen offenen Zustand.

Für 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 im Verhältnis zu ihren enthaltenen Optionen dimensioniert werden.

Das <hr> innerhalb eines <select> sollte als rein dekorativ betrachtet werden, da sie derzeit nicht innerhalb des Barrierefreiheitsbaums angezeigt werden und daher nicht für assistive Technologien zugänglich sind.

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, indem <optgroup> und <hr> verwendet werden, um es dem Benutzer leichter zu machen, 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

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

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