<select> 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 erhält ein id-Attribut, um für Barrierefreiheitszwecke mit einem <label> in Verbindung gebracht werden zu können, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunktes zu repräsentieren, der an den Server gesendet wird. Jede Menüoption wird durch ein <option>-Element definiert, das innerhalb des <select> verschachtelt 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. Wenn kein value-Attribut enthalten ist, wird der Wert standardmäßig auf den im Element enthaltenen Text gesetzt. Sie können ein selected-Attribut an einem <option>-Element einschließen, um es standardmäßig auszuwählen, wenn die Seite erstmals 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 besitzt eine value-Eigenschaft, die den Wert des 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 festzulegen, wie viele Optionen gleichzeitig angezeigt werden sollen. Es akzeptiert auch die meisten der allgemeinen Formular-Eingabe-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 Trennlinien zu erstellen, die visuelle Unterbrechungen zwischen den Optionen hinzufügen.

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

Attribute

Dieses Element enthält 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 ermöglicht Ihnen anzugeben, dass ein Formularfeld beim Laden der Seite den Eingabefokus haben sollte. Nur ein einziges 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 umschließenden Element, zum Beispiel <fieldset>; wenn kein umschließendes Element mit gesetztem disabled-Attribut vorhanden ist, ist das Steuerelement aktiviert.

form

Das <form>-Element, mit dem das <select>-Element 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 seinem Vorfahren <form>-Element verknüpft, falls vorhanden.)

Dieses Attribut ermöglicht es, <select>-Elemente mit <form>s an beliebiger Stelle 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 ausgewählt werden. Wenn multiple angegeben ist, wird in den meisten Browsern eine scrollbare Listbox anstelle eines einzeiligen Dropdown-Menüs angezeigt. Mehrfach ausgewählte Optionen werden unter Verwendung 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 Zeichenfolgenwert ausgewählt werden muss.

size

Wenn das Steuerelement als Scroll-Liste präsentiert wird (z.B. wenn multiple angegeben ist), repräsentiert dieses Attribut die Anzahl der Zeilen in der Liste, die gleichzeitig sichtbar sein sollen. Browser müssen ein Select-Element nicht als Scroll-Liste präsentieren. Der Standardwert ist 0.

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

Anwendungshinweise

Mehrere Optionen auswählen

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

Mausbenutzer können die Tasten Strg, Befehl oder Umschalt drücken (abhängig von Ihrem Betriebssystem) und dann auf mehrere Optionen klicken, um sie auszuwählen/abzuwählen.

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

• Das <select>-Element fokussieren (z.B. durch Drücken von Tab).
• Ein Element am oberen oder unteren Ende des Bereichs auswählen, den sie auswählen möchten, indem sie die Pfeiltasten Nach oben und Nach unten verwenden, um zwischen den Optionen nach oben und unten zu navigieren.
• Die Umschalttaste gedrückt halten und dann die Pfeiltasten Nach oben und Nach unten verwenden, um den Bereich der ausgewählten Elemente zu vergrößern oder zu verkleinern.

Tastaturnutzer können mehrere nicht-zusammenhängende Elemente auswählen, indem sie:

• Das <select>-Element fokussieren (z.B. durch Drücken von Tab).
• Die Strg-Taste gedrückt halten und dann die Pfeiltasten Nach oben und Nach unten verwenden, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie sich dafür entscheiden. Die "fokussierte" Auswahloption wird mit einem gepunkteten Umriss hervorgehoben, ähnlich wie ein link, der über die Tastatur fokussiert wird.
• Die Leertaste drücken, um "fokussierte" Auswahloptionen auszuwählen/abzuwählen.

Stilierung mit CSS

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

• Anpassbare Select-Elemente
• Anpassbare Auswahllisten-Boxen

Legacy Select-Stilierung

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

Es ist jedoch schwer, ein konsistentes Ergebnis über verschiedene Browser hinweg mit traditionell <select>-Elementen zu erzielen. Wenn Sie die volle Kontrolle haben möchten, sollten Sie erwägen, eine Bibliothek mit guten Möglichkeiten zur Stilierung 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 stilisieren, also wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (diejenigen mit dem multiple-Attribut), da sie in der Regel als Scroll-Liste angezeigt werden und daher keinen offenen Zustand haben.

Für weitere Informationen zur Legacy-<select>-Stilierung siehe:

• HTML-Formulare stilisieren
• Erweiterte Stilierung 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>-Elements sollte als rein dekorativ betrachtet werden, da es derzeit nicht innerhalb der Barrierefreiheitsstruktur angezeigt wird und daher nicht an unterstützende Technologien weitergegeben wird.

Beispiele

Einfaches 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 gruppierten Optionen

Das folgende Beispiel erstellt ein Dropdown-Menü mit Gruppierungen 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

Erweitertes Select mit mehreren Funktionen

Das folgende Beispiel ist komplexer und zeigt weitere Funktionen, die Sie in 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 Linien gleichzeitig angezeigt werden. Benutzer können scrollen, um alle Optionen anzuzeigen.
• Zwei <optgroup>-Elemente sind enthalten und schaffen zwei visuelle Gruppierungen, generell mit dem Gruppennamen fettgedruckt und den verschachtelten Optionen eingerückt.
• Das disabled-Attribut ist auf der "Hamster"-Option enthalten, was bedeutet, dass diese Option nicht wä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 Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

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