<select>: Das HTML Select-Element

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 wird mit einem id-Attribut versehen, um es für Barrierefreiheitszwecke mit einem <label> in Verbindung zu bringen, sowie mit einem name-Attribut, um den Namen des zugehörigen Datenpunkts zu repräsentieren, der an den Server übermittelt wird. Jede Menüoption wird durch ein <option>-Element definiert, das innerhalb des <select> geschachtelt ist.

Jedes <option>-Element sollte ein value-Attribut enthalten, das den zu übermittelnden Datenwert an den Server enthält, wenn diese Option ausgewählt wird. Falls kein value-Attribut enthalten ist, entspricht der Wert standardmäßig dem Text, der im Element enthalten ist. Sie können ein selected-Attribut auf ein <option>-Element setzen, um es standardmäßig auszuwählen, wenn die Seite geladen wird. Falls kein selected-Attribut angegeben ist, wird das erste <option>-Element standardmäßig ausgewählt.

Ein <select>-Element wird in JavaScript durch ein HTMLSelectElement-Objekt repräsentiert, 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 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 weiterhin <option>-Elemente innerhalb von <optgroup>-Elementen schachteln, um separate Gruppen von Optionen im Dropdown-Menü zu erstellen. Sie können auch <hr>-Elemente einfügen, um Trennlinien zu erstellen, die visuelle Unterbrechungen zwischen den Optionen hinzufügen.

Für weitere Beispiele sehen Sie Die nativen Form-Widgets: Dropdown-Inhalte.

Attribute

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 erlaubt 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, z.B. <fieldset>; wenn es kein umgebendes Element mit gesetztem disabled-Attribut gibt, ist die Steuerung aktiviert.

form

Das <form>-Element, mit dem das <select> assoziiert werden soll (dessen Formularbesitzer). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, ist das <select> mit seinem Vorfahren <form>-Element assoziiert, falls vorhanden.)

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

multiple

Dieses Boolean-Attribut zeigt an, dass im Listenfeld mehrere Optionen ausgewählt werden können. Falls es nicht angegeben wird, kann jeweils nur eine Option ausgewählt werden. Wenn multiple angegeben ist, zeigen die meisten Browser eine Liste mit Scrollfunktion anstelle eines einzeiligen Dropdowns an. Mehrere ausgewählte Optionen werden im URLSearchParams-Array-Konvention übermittelt, z.B. name=value1&name=value2.

name

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

required

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

size

Wenn die Steuerung als Liste mit Scrollfunktion präsentiert wird (z.B. wenn multiple angegeben ist), repräsentiert dieses Attribut die Anzahl der in der Liste sichtbaren Zeilen gleichzeitig. Browser sind nicht verpflichtet, ein Select-Element als gescrollte Liste darzustellen. Der Standardwert ist 0.

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

Anmerkungen zur Benutzung

Mehrere Optionen auswählen

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 Tasten Strg, Befehl oder Umschalt (abhängig davon, was für Ihr Betriebssystem sinnvoll ist) gedrückt halten und dann auf mehrere Optionen klicken, um sie auszuwählen/abzuwählen.

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

• Auf das <select>-Element fokussieren (z.B. mit Tab).
• Ein Element am oberen oder unteren Ende des Bereichs auswählen, den sie auswählen möchten, indem sie die Tasten Hoch und Runter verwenden, um die Optionen hoch und runter zu navigieren.
• Die Umschalt-Taste gedrückt halten und dann die Tasten Hoch und Runter 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:

• Auf das <select>-Element fokussieren (z.B. mit Tab).
• Die Strg-Taste gedrückt halten und dann die Tasten Hoch und Runter verwenden, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie sich dafür entscheiden. Die "fokussierte" Auswahloption ist mit einer punktierten Umrandung hervorgehoben, ähnlich wie ein mit der Tastatur fokussierter Link.
• Die Leertaste drücken, um "fokussierte" Auswahloptionen auszuwählen/abzuwählen.

Styling mit CSS

Das <select>-Element war historisch schwer effektiv mit CSS zu stylen. Die folgenden Leitfäden enthalten Informationen über neuere Funktionen, die eingeführt wurden, um vollständig anpassbare Select-Elemente zu ermöglichen:

• Anpassbare Select-Elemente
• Anpassbare Select-Listboxes

Legacy-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 Box-Modell, die angezeigte Schriftart usw. zu manipulieren. Sie können auch die appearance-Eigenschaft verwenden, um das standardmäßige System-Aussehen zu entfernen.

Es ist jedoch schwierig, mit traditionellen <select>-Elementen ein konsistentes Ergebnis über Browser hinweg zu erzielen. Wenn Sie die volle Kontrolle haben möchten, sollten Sie in Erwägung ziehen, eine Bibliothek mit guten Möglichkeiten zum Stylen von Form-Widgets zu verwenden oder versuchen, Ihr eigenes Dropdown-Menü mit 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-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (solche mit dem Attribute multiple) — sie neigen dazu, als scrollbare Liste anstelle eines Dropdowns dargestellt zu werden und haben daher keinen offenen Zustand.

Für weitere Informationen zum Legacy-Select-Styling siehe:

• HTML-Formulare stylen
• Erweitertes Styling 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 betrachtet werden, da sie derzeit nicht im Barrierefreiheitsbaum dargestellt werden und somit nicht für unterstützende Technologien sichtbar sind.

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 Gruppierungsoptionen

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

Fortgeschrittenes Select mit mehreren Funktionen

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 hinzugefügt haben.
• Das size-Attribut bewirkt, dass zu einem Zeitpunkt nur 4 Zeilen angezeigt werden; Sie können scrollen, um alle Optionen zu sehen.
• Wir haben <optgroup>-Elemente eingefügt, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, ihre Visualisierung besteht im Allgemeinen darin, dass der Gruppenname fett formatiert und die Optionen eingerückt sind.
• Die Option "Hamster" 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 Select-Elemente