<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 eine typische Verwendung von <select>. Es wird ein id-Attribut zugewiesen, damit es aus Gründen der Barrierefreiheit mit einem <label> verknüpft werden kann, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunktes darzustellen, der an den Server übermittelt wird. Jede Menüoption wird durch ein <option>-Element definiert, das innerhalb des <select> verschachtelt ist.

Jedes <option>-Element sollte ein value-Attribut haben, das den Datenwert enthält, der an den Server übermittelt wird, wenn diese Option ausgewählt ist. Wenn kein value-Attribut enthalten ist, wird der Wert standardmäßig auf den innerhalb des Elements enthaltenen Text gesetzt. Sie können ein selected-Attribut auf ein <option>-Element anwenden, um es standardmäßig ausgewählt zu machen, wenn die Seite erstmalig 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 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 allgemeinen Formulareingabe-Attribute wie required, disabled, autofocus usw.

Sie können weiterhin <option>-Elemente innerhalb von <optgroup>-Elementen verschachteln, um separate Gruppen von Optionen innerhalb des Dropdown-Menüs zu erstellen. Sie können auch <hr>-Elemente einschließen, um Trennlinien hinzuzufügen, die visuelle Pausen zwischen den Optionen schaffen.

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

Attribute

Dieses Element beinhaltet die globalen Attribute.

autocomplete

Ein String, der einen Hinweis für die Autovervollständigungsfunktion eines User-Agents bereitstellt. 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, festzulegen, 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 Boolean-Attribut gibt an, dass der Benutzer nicht mit dem Steuerelement interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt das Steuerelement seine Einstellung vom umgebenden Element, zum Beispiel <fieldset>; wenn kein umgebendes Element mit dem disabled-Attribut gesetzt ist, ist das Steuerelement aktiviert.

form

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

Dieses Attribut ermöglicht es, <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 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 ein scrollendes Listenfeld anstelle eines einzeiligen Dropdown-Menüs. Mehrere ausgewählte Optionen werden nach der URLSearchParams-Array-Konvention übermittelt, d.h. name=value1&name=value2.

name

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

required

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

size

Wenn das Steuerelement als scrollende Liste dargestellt wird (z. B. wenn multiple angegeben ist), gibt dieses Attribut die Anzahl der Zeilen in der Liste an, die gleichzeitig sichtbar sein sollten. Browser müssen ein Select-Element nicht zwangsläufig als scrollendes Listenfeld präsentieren. Der Standardwert ist 0.

Hinweis: Laut HTML-Spezifikation sollte der Standardwert für size 1 sein; in der Praxis wurde jedoch festgestellt, dass dies einige Webseiten bricht, und kein anderer Browser macht das derzeit so, daher hat sich Mozilla entschieden, vorerst weiterhin 0 in Firefox zurückzugeben.

Hinweise zur Verwendung

Auswählen mehrerer Optionen

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-, Befehlstaste- oder Umschalt-Tasten gedrückt halten (abhängig davon, was für Ihr Betriebssystem sinnvoll ist) und dann mehrere Optionen anklicken, um diese auszuwählen/abwä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 nach oben und unten durch die Optionen zu navigieren.
• Die Umschalt-Taste 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" Auswahloption zu ändern, d.h. die, die ausgewählt wird, wenn Sie sich entscheiden, dies zu tun. Die "fokussierte" Auswahloption ist mit einem gepunkteten Umriss hervorgehoben, ähnlich wie ein tastaturfokussierter Link.
• Die Leertaste drücken, um die "fokussierte" Auswahloption 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 Funktionen, die vollständig anpassbare Select-Elemente ermöglichen:

• Anpassbare Select-Elemente
• Anpassbare Select-Listboxen

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 Boxmodell, 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 schwer, ein konsistentes Ergebnis über Browser hinweg mit traditionellen <select>-Elementen zu erzielen. Wenn Sie die vollständige Kontrolle haben möchten, sollten Sie in Betracht ziehen, eine Bibliothek mit guten Möglichkeiten zur Gestaltung von Formular-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 offenen Zustand zu stylen, d.h. wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt jedoch nicht für mehrzeilige <select>-Elemente (solche mit dem multiple-Attribut), da diese dazu neigen, als scrollende Liste anstelle eines Dropdowns gerendert zu werden und daher keinen offenen Zustand haben.

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

• Styling HTML-Formulare
• Erweitertes Styling für HTML-Formulare
• Die field-sizing-Eigenschaft, die kontrolliert, wie <select>-Elemente in Bezug auf ihre enthaltenen Optionen dimensioniert werden.

Barrierefreiheit

Das <hr> innerhalb eines <select> sollte als rein dekorativ betrachtet werden, da es derzeit nicht innerhalb des Barrierefreiheitsbaums zugänglich gemacht wird und daher nicht für unterstützende Technologien sichtbar ist.

Beispiele

Basis-Select

Das folgende Beispiel erstellt ein Dropdown-Menü mit drei Werten. Die zweite Option enthält das selected-Attribut, wodurch diese Option standardmäßig ausgewählt wird.

<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 mittels <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

Erweitertes Select mit mehreren Funktionen

Das folgende Beispiel ist komplexer und zeigt mehr Funktionen, die Sie auf einem <select>-Element verwenden können:

• Das multiple-Attribut ermöglicht die Auswahl von mehr als einer Option.
• Das size-Attribut ist auf 4 gesetzt, was bedeutet, dass 4 Zeilen gleichzeitig angezeigt werden. Benutzer können scrollen, um alle Optionen anzuzeigen.
• Zwei <optgroup>-Elemente sind enthalten, die zwei visuelle Gruppierungen erzeugen, wobei der Gruppenname in der Regel fett und die verschachtelten Optionen eingerückt sind.
• Das disabled-Attribut ist bei der Option "Hamster" enthalten, wodurch diese Option nicht auswählbar ist.

<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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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