<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 hat ein id-Attribut, um es mit einem <label> zu assoziieren, um die Zugänglichkeit zu verbessern, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunktes, der an den Server gesendet wird, darzustellen. Jede Menüoption wird durch ein verschachteltes <option>-Element innerhalb von <select> definiert.

Jedes <option>-Element sollte ein value-Attribut enthalten, das den Datenwert angibt, der an den Server gesendet wird, wenn diese Option ausgewählt ist. Wenn kein value-Attribut enthalten ist, wird der Wert standardmäßig auf den Text im Element selbst gesetzt. Sie können ein selected-Attribut in einem <option>-Element einfügen, um es beim ersten Laden der Seite standardmäßig auszuwählen. 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 einzigartige Attribute, die Sie zur Steuerung verwenden können, wie multiple, um anzugeben, ob mehrere Optionen ausgewählt werden können, und size, um anzugeben, wie viele Optionen auf einmal angezeigt werden sollen. Es akzeptiert auch die meisten allgemeinen Formulareingabe-Attribute wie required, disabled, autofocus usw.

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

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

Attribute

Dieses Element enthält die globalen Attribute.

autocomplete

Ein String, das einen Hinweis für die Autocomplete-Funktion eines User-Agents bietet. Siehe Das HTML-Autocomplete-Attribut für eine vollständige Liste von Werten und Details zur Verwendung von Autocomplete.

autofocus

Dieses Boolean-Attribut ermöglicht es Ihnen, anzugeben, dass ein Formularelement beim Laden der Seite den Eingabefokus haben soll. Nur ein Formularelement in einem Dokument kann das autofocus-Attribut haben.

disabled

Dieses Boolean-Attribut gibt 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 es kein umgebendes Element mit gesetztem disabled-Attribut gibt, ist die Steuerung aktiviert.

form

Das <form>-Element, das dem <select> zugeordnet ist (sein Formular-Besitzer). Der Wert dieses Attributs muss das id einer <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <select> seinem übergeordneten <form>-Element zugeordnet, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen, <select>-Elemente überall im Dokument <form>-Elementen zuzuordnen, nicht nur innerhalb eines <form>. Es kann auch ein übergeordnetes <form>-Element überschreiben.

multiple

Dieses Boolean-Attribut zeigt an, dass mehrere Optionen in der Liste ausgewählt werden können. Wenn es nicht spezifiziert ist, kann nur eine Option gleichzeitig ausgewählt werden. Wenn multiple angegeben ist, zeigen die meisten Browser stattdessen ein scrollbares Listenfeld anstelle eines einzeiligen Dropdowns an. Mehrfach ausgewählte Optionen werden unter Verwendung des URLSearchParams-Array-Konvents übermittelt, d.h. name=value1&name=value2.

name

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

required

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

size

Wenn die Steuerung als scrollbares Listenfeld dargestellt wird (z.B. wenn multiple angegeben ist), repräsentiert dieses Attribut die Anzahl der Zeilen in der Liste, die auf einmal sichtbar sein sollen. Browser sind nicht verpflichtet, ein Auswahlfeld als scrollbare Listenbox darzustellen. Der Standardwert ist 0.

Hinweis: Laut der HTML-Spezifikation sollte der Standardwert für die Größe 1 sein; in der Praxis wurde jedoch festgestellt, dass dies einige Websites beeinträchtigt, und kein anderer Browser tut dies derzeit, daher hat sich Mozilla entschieden, vorerst weiterhin 0 in Firefox zu verwenden.

Verwendungshinweise

Mehrere Optionen auswählen

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

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

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

• Fokussieren des <select>-Elements (z.B. mit Tab).
• Auswählen eines Elements am oberen oder unteren Ende des Bereichs, den sie auswählen möchten, mit den Tasten Nach oben und Nach unten, um durch die Optionen zu navigieren.
• Gedrückt halten der Umschalt-Taste und dann Verwenden der Tasten Nach oben und Nach unten, um den Bereich der ausgewählten Elemente zu erweitern oder zu verkleinern.

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

• Fokussieren des <select>-Elements (z.B. mit Tab).
• Gedrückt halten der Strg-Taste und dann Verwenden der Tasten Nach oben und Nach unten, um die "fokussierte" Auswahlauswahl zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie dies wählen. Die "fokussierte" Auswahlauswahl ist mit einer gepunkteten Umrandung hervorgehoben, ähnlich wie ein tastaturfokussierter Link.
• Drücken von Leertaste, um "fokussierte" Auswahlauswahlen auszuwählen/abzuwählen.

Styling mit CSS

Das <select>-Element war historisch gesehen schwierig, effektiv mit CSS zu gestalten. Die folgenden Leitfäden bieten Informationen über Funktionen, die vollständig anpassbare Auswahl-Elemente ermöglichen:

• Anpassbare Auswahl-Elemente
• Anpassbare Auswahl-Listenfelder

Veraltetes Auswahl-Styling

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

Es ist jedoch schwierig, ein konsistentes Ergebnis über verschiedene Browser hinweg mit traditionellen <select>-Elementen zu erzielen. Wenn Sie volle Kontrolle haben möchten, sollten Sie in Erwägung ziehen, eine Bibliothek mit guten Einrichtungen für das Styling von Formular-Widgets zu verwenden oder Ihr eigenes Dropdown-Menü mit nicht-sematischen Elementen, JavaScript und WAI-ARIA zu erstellen, um Semantik bereitzustellen.

Sie können die Pseudoklasse :open verwenden, um <select>-Elemente im geöffneten Zustand zu stylen, d.h. wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (diejenigen mit gesetztem multiple-Attribut) — diese werden in der Regel als scrollbare Listenbox angezeigt und haben daher keinen offenen Zustand.

Für weitere Informationen zum Styling von veralteten <select>-Elementen 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.

Barrierefreiheit

Das <hr> innerhalb eines <select> sollte als rein dekorativ betrachtet werden, da es derzeit nicht im Zugänglichkeitsbaum exponiert und daher nicht für assistive Technologien zugänglich ist.

Beispiele

Basis-Auswahl

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

Auswahl mit Gruppenoptionen

Das folgende Beispiel erstellt ein Dropdown-Menü mit Gruppenbildung unter Verwendung von <optgroup> und <hr>, um dem Benutzer das Verständnis des Inhalts im Dropdown-Menü 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

Erweiterte Auswahl 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 sehen:

• Mehrere Optionen sind auswählbar, da wir das multiple-Attribut aufgenommen haben.
• Das size-Attribut bewirkt, dass nur 4 Zeilen gleichzeitig angezeigt werden; Sie können scrollen, um alle Optionen zu sehen.
• Wir haben <optgroup>-Elemente aufgenommen, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, die Visualisierung besteht in der Regel darin, dass der Gruppenname fett gedruckt wird und die Optionen eingezogen 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> ausgelöst werden: change, input
• Das <option>-Element
• Das <optgroup>-Element
• Anpassbare Auswahl-Elemente