Das<select>HTML-Element repräsentiert ein Steuerelement, das ein Menü mit Auswahlmöglichkeiten bietet.

Probieren Sie es aus

<label for="pet-select">Choose a pet:</label><select name="pets">  <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 einid-Attribut zugewiesen, um es aus Gründen der Barrierefreiheit mit einem<label> zu verknüpfen, sowie einname-Attribut, um den Namen des zur serverseitigen Weiterverarbeitung zu übermittelnden Datenelements darzustellen. Jede Auswahlmöglichkeit im Menü wird durch ein im<select> verschachteltes<option>-Element definiert.

Jedes<option>-Element sollte einvalue-Attribut enthalten, das den Datenwert enthält, der beim Auswählen dieser Option an den Server übermittelt werden soll. Wenn keinvalue-Attribut enthalten ist, wird standardmäßig der im Element enthaltene Text als Wert verwendet. Sie können einem<option>-Element einselected-Attribut hinzufügen, damit es standardmäßig ausgewählt ist, wenn die Seite geladen wird. Wenn keinselected-Attribut angegeben ist, wird standardmäßig das erste<option>-Element ausgewählt.

Ein<select>-Element wird in JavaScript durch einHTMLSelectElement-Objekt repräsentiert, und dieses Objekt verfügt über einevalue-Eigenschaft, die den Wert der ausgewählten<option> enthält.

Das<select>-Element hat einige einzigartige Attribute, die Sie zur Steuerung verwenden können, wiemultiple, um anzugeben, ob mehrere Optionen ausgewählt werden können, undsize, um anzugeben, wie viele Optionen gleichzeitig angezeigt werden sollen. Es akzeptiert auch die meisten allgemeinen Formular-Eingabeattribute wierequired,disabled,autofocus usw.

Sie können außerdem<option>-Elemente weiter innerhalb von<optgroup>-Elementen verschachteln, um getrennte Gruppen von Optionen innerhalb des Dropdowns zu erstellen. Sie können auch<hr>-Elemente einfügen, um Trennlinien zu schaffen, die visuelle Unterbrechungen zwischen Optionen hinzufügen.

Für weitere Beispiele, sieheDie nativen Formular-Widgets: Drop-down-Inhalte.

Attribute

Dieses Element umfasst dieglobalen Attribute.

autocomplete

Ein String, der einen Hinweis für die Autovervollständigungsfunktion einesUser-Agents liefert. SieheDas HTML-Autocomplete-Attribut für eine vollständige Liste der Werte und Details zur Verwendung von Autocomplete.

autofocus

Dieses Boolean-Attribut ermöglicht es, dass ein Formularelement bei Seitenaufruf den Eingabefokus hat. Nur ein Formularelement in einem Dokument kann dasautofocus-Attribut haben.

disabled

Dieses Boolean-Attribut zeigt an, dass der Benutzer nicht mit dem Steuerelement interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt das Steuerelement seine Einstellung vom umgebenden Element, beispielsweise<fieldset>; wenn es kein umgebendes Element mit dem gesetztendisabled-Attribut gibt, ist das Steuerelement aktiviert.

form

Das<form>-Element, mit dem das<select> verbunden werden soll (seinFormularbesitzer). Der Wert dieses Attributs muss dieid eines<form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das<select> seinem Vorfahren<form>-Element zugeordnet, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen,<select>-Elemente mit<form>s überall im Dokument zu verbinden, 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 angegeben ist, kann nur eine Option zur gleichen Zeit ausgewählt werden. Wennmultiple angegeben ist, zeigen die meisten Browser statt eines einzeiligen Dropdowns ein Scrollfeld an. Mehrere ausgewählte Optionen werden unter Verwendung desURLSearchParams-Arraykonvention gesendet, d.h.name=value1&name=value2.

name

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

required

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

size

Wenn das Steuerelement als Scrollfeld dargestellt ist (z.B., wennmultiple festgelegt ist), stellt dieses Attribut die Anzahl der Zeilen in der Liste dar, die gleichzeitig sichtbar sein sollen. Browser sind nicht verpflichtet, ein Select-Element als Scrollfeld darzustellen. Der Standardwert ist0.

Hinweis:Gemäß der HTML-Spezifikation sollte der Standardwert für die Größe1 sein; jedoch wurde in der Praxis festgestellt, dass dies einige Websites beschädigen kann. Kein anderer Browser tut dies derzeit, daher hat Mozilla sich entschieden, vorerst in Firefox weiterhin0 zurückzugeben.

Anwendungshinweise

Auswählen mehrerer Optionen

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

Mausnutzende können dieStrg-,Befehlstaste oderUmschalttaste gedrückt halten (abhängig davon, was für Ihr Betriebssystem sinnvoll ist) und dann auf mehrere Optionen klicken, um diese auszuwählen/abzuwählen.

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

• Den Fokus auf das<select>-Element legen (z.B. mitTab).
• Ein Element oben oder unten im gewünschten Bereich auswählen, indem sie dieNach oben undNach unten Pfeiltasten verwenden, um durch die Optionen zu navigieren.
• DieUmschalttaste gedrückt halten und dann dieNach oben undNach unten Pfeiltasten verwenden, um den Bereich der ausgewählten Elemente zu erweitern oder zu verringern.

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

• Den Fokus auf das<select>-Element legen (z.B. mitTab).
• DieStrg-Taste gedrückt halten und dann dieNach oben undNach unten Pfeiltasten verwenden, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie sich entscheiden, dies zu tun. Die "fokussierte" Auswahlmöglichkeit wird mit einem gepunkteten Umriss hervorgehoben, ähnlich wie ein tastaturfokussierter Link.
• Leertaste drücken, um "fokussierte" Auswahlmöglichkeiten auszuwählen/abzuwählen.

Styling mit CSS

Das<select>-Element ist traditionell bekannt dafür, dass es schwierig ist, es produktiv mit CSS zu stylen. Daher wurden Features eingeführt, um die Erstellung vonvollständig anpassbaren Auswahl-Elementen zu ermöglichen.

Styling von Legacy-Select

In Browsern, die die modernen Anpassungsfeatures nicht unterstützen (oder in älteren Codebasen, in denen sie nicht verwendet werden können), sind Sie darauf beschränkt, dasBoxmodell, dieangezeigte Schriftart usw. zu manipulieren. Sie können auch dieappearance-Eigenschaft verwenden, um das Standard-Systemaussehen zu entfernen.

Es ist jedoch schwer, ein konsistentes Ergebnis über verschiedene Browser mit traditionellen<select>-Elementen zu erzielen. Wenn Sie volle Kontrolle haben möchten, sollten Sie in Betracht ziehen, eine Bibliothek mit guten Möglichkeiten zum Stylen von Formular-Widgets zu verwenden, oder versuchen, Ihre eigene Dropdown-Menü mit nicht-semantischen Elementen, JavaScript undWAI-ARIA zu erstellen, um Semantik zu bieten.

Sie können die:open-Pseudoklasse verwenden, um<select>-Elemente im offenen Zustand zu stylen, das heißt, wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige<select>-Elemente ( diejenigen mit demmultiple Attribut gesetzt) — sie werden in der Regel als Scrollfeld gerendert und haben daher keinen offenen Zustand.

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

• Styling von HTML-Formularen
• Erweitertes Styling für HTML-Formulare
• Diefield-sizing-Eigenschaft, die steuert, wie<select>-Elemente in Bezug auf ihre enthaltenen Optionen dimensioniert werden.

Barrierefreiheit

Das<hr> innerhalb eines<select> sollte rein dekorativ betrachtet werden, da sie derzeit nicht im Barrierefreiheitsbaum sichtbar sind und daher nicht assistiven Technologien zugänglich gemacht werden.

Beispiele

Basis-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 Gruppenoptionen

Das folgende Beispiel erstellt ein Dropdown-Menü mit Gruppen durch die Verwendung von<optgroup> und<hr>, um dem Benutzer das Verständnis des Inhalts im Dropdown zu erleichtern.

<label for="hr-select">Your favorite food</label> <br /><select name="foods">  <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 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 dasmultiple-Attribut hinzugefügt haben.
• Dassize-Attribut sorgt dafür, dass nur 4 Zeilen gleichzeitig 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, bei der der Gruppenname normalerweise fett dargestellt wird und die Optionen eingerückt sind.
• Die Option "Hamster" enthält eindisabled-Attribut und kann daher überhaupt nicht ausgewählt werden.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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