<select>: Das HTML-Auswahlelement

Das <select> HTML Element stellt ein Steuerelement dar, das ein Menü mit Auswahlmöglichkeiten bietet.

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 die typische Verwendung von <select>. Es hat ein id-Attribut, um es aus Gründen der Barrierefreiheit mit einem <label> zu verbinden, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunkts darzustellen, der an den Server gesendet wird. Jede Menüoption wird durch ein verschachteltes <option>-Element innerhalb des <select> definiert.

Jedes <option>-Element sollte ein value-Attribut enthalten, das den zu übermittelnden Datenwert enthält, wenn diese Option ausgewählt ist. Wenn kein value-Attribut enthalten ist, wird der Wert standardmäßig auf den Text innerhalb des Elements gesetzt. Sie können ein selected-Attribut in einem <option>-Element hinzufügen, um es standardmäßig auszuwählen, wenn die Seite 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 repräsentiert, 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 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 der allgemeinen Formulareingabeattribute wie required, disabled, autofocus usw.

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

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

Attribute

Dieses Element beinhaltet die globalen Attribute.

autocomplete

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

autofocus

Dieses boolesche Attribut lässt Sie festlegen, dass ein Formularelement den Eingabefokus erhält, 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 der Steuerung interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt die Steuerung ihre Einstellung vom umschließenden Element, beispielsweise <fieldset>; wenn es kein umschließendes Element mit dem disabled-Attribut gibt, ist die Steuerung aktiviert.

form

Das <form> Element, mit dem das <select> verknüpft ist (sein Formular-Eigentümer). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, ist das <select> mit einem Vorfahren <form>-Element verknüpft, falls vorhanden.)

Dieses Attribut ermöglicht es, <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 eine scrollende Listbox anstelle eines einzeiligen Dropdowns.

name

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

required

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

size

Wenn die Steuerung als scrollende Listbox dargestellt wird (z. B. wenn multiple angegeben ist), steht dieses Attribut für die Anzahl der Zeilen in der Liste, die gleichzeitig sichtbar sein sollen. Browser sind nicht verpflichtet, ein Auswahl-Element als gescrollte Listbox darzustellen. Der Standardwert ist 0.

Hinweis: Laut der HTML-Spezifikation sollte der Standardwert für size 1 sein; jedoch hat sich in der Praxis gezeigt, dass dies einige Webseiten beeinträchtigt, und kein anderer Browser tut das derzeit, daher hat sich Mozilla entschieden, für die aktuelle Zeit in Firefox 0 beizubehalten.

Verwendungshinweise

Auswählen mehrerer Optionen

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

Mausbenutzer können die Strg-, Befehlstaste- oder Umschalttaste (je nach Betriebssystem) 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 am oberen oder unteren Ende des Bereichs, den sie auswählen möchten, mit den Pfeiltasten Pfeil nach oben und Pfeil nach unten auswählen.
• Die Umschalttaste gedrückt halten und dann die Pfeiltasten Pfeil nach oben und Pfeil nach unten verwenden, um den Bereich der ausgewählten Elemente zu erhöhen oder zu verringern.

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 Pfeiltasten Pfeil nach oben und Pfeil nach unten verwenden, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie dies tun. Die "fokussierte" Auswahloption wird mit einem gepunkteten Umriss hervorgehoben, ähnlich wie ein mit der Tastatur fokussierter Link.
• Leertaste drücken, um "fokussierte" Auswahloptionen auszuwählen/abzuwählen.

Styling mit CSS

Das <select>-Element war historisch gesehen notorisch schwer produktiv mit CSS zu stylen, daher werden Funktionen eingeführt, um die Erstellung von vollständig anpassbaren Auswahl-Elementen zu ermöglichen.

Legacy-Select-Styling

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

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

Sie können die :open Pseudoklasse verwenden, um <select>-Elemente im offenen Zustand zu stylen, das heißt, wenn die Dropdown-Optionenliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (die mit dem multiple-Attribut gesetzt sind) - sie neigen dazu, als scrollende Listbox statt als Dropdown gerendert zu werden und haben daher keinen offenen Zustand.

Für weitere Informationen über legacy <select>-Styling siehe:

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

Barrierefreiheit

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

Beispiele

Grundlegendes 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 Gruppierung unter Verwendung von <optgroup> und <hr>, um es Benutzern einfacher 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

Erweitertes Select mit mehreren Funktionen

Das folgende Beispiel ist komplexer und zeigt mehr Funktionen, 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 auswählbar sind, da 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 hinzugefügt, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, deren Visualisierung besteht im Allgemeinen darin, dass der Gruppenname fettgedruckt ist und die Optionen eingerückt sind.
• Die "Hamster"-Option beinhaltet ein disabled-Attribut und kann daher überhaupt nicht ausgewählt werden.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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