<select>: Das HTML Select-Element

<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 hat ein id-Attribut, um es aus Barrierefreiheitsgründen mit einem <label> zu verknüpfen, sowie ein name-Attribut, das den Namen des an den Server gesendeten zugehörigen Datenpunkts darstellt. 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 gesendet werden soll, wenn diese Option ausgewählt wird. Wenn kein value-Attribut enthalten ist, entspricht der Wert standardmäßig dem im Element enthaltenen Text. Sie können einem <option>-Element ein selected-Attribut hinzufügen, um es standardmäßig ausgewählt zu machen, wenn die Seite zum ersten Mal 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 hat eine value-Eigenschaft, die den Wert des 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 auf einmal angezeigt werden sollen. Es akzeptiert auch die meisten allgemeinen Formulareingabeattribute wie required, disabled, autofocus usw.

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

Für weitere Beispiele siehe Die nativen Formular-Widgets: Drop-down-Inhalte.

Dieses Element umfasst die globalen Attribute.

autocomplete

Ein Zeichenfolgenhinweis für die Autovervollständigungsfunktion eines Benutzeragenten. Siehe Das HTML-Autovervollständigungsattribut für eine vollständige Liste der Werte und Details zur Verwendung von Autovervollständigung.

autofocus

Dieses boolesche Attribut lässt Sie angeben, dass ein Formularelement beim Laden der Seite den Eingabefokus haben soll. Nur ein Formularelement in einem Dokument kann das autofocus-Attribut haben.

disabled

Dieses boolesche Attribut zeigt an, dass der Benutzer nicht mit dem Steuerelement interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt das Steuerelement seine Einstellungen vom umgebenden Element, z.B. <fieldset>; wenn kein enthaltenes Element mit dem gesetzten disabled-Attribut vorhanden ist, ist das Steuerelement aktiviert.

form

Das mit dem <select> zu assoziierende <form>-Element (sein Formular-Eigentümer). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <select> mit seinem übergeordneten <form>-Element assoziiert, falls vorhanden.)

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

multiple

Dieses boolesche Attribut gibt an, dass mehrere Optionen in der Liste ausgewählt werden können. Wird es nicht spezifiziert, kann jeweils nur eine Option ausgewählt werden. Wenn multiple angegeben ist, zeigen die meisten Browser statt eines einzeiligen Dropdowns ein Scrolllistenfeld an.

name

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

required

Ein boolesches Attribut, das darauf hinweist, dass eine Option mit einem nicht leeren Zeichenfolgenwert ausgewählt werden muss.

size

Wenn das Steuerungsfeld als Scrolllistenfeld 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 sind nicht verpflichtet, ein Select-Element als Scrolllistenfeld darzustellen. 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 Websites stört und kein anderer Browser dies derzeit tut. Daher hat Mozilla beschlossen, vorerst weiterhin 0 mit Firefox zurückzugeben.

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-, Befehl- oder Shift-Tasten (je nachdem, was für Ihr Betriebssystem sinnvoll ist) gedrückt halten und dann auf mehrere Optionen klicken, um sie auszuwählen/abwählen.

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

• Den Fokus auf das <select>-Element legen (z.B. mit Tab).
• Ein Element am oberen oder unteren Ende des Bereichs, den sie auswählen möchten, auswählen, indem sie die Hoch- und Runter-Pfeiltasten verwenden, um zwischen den Optionen zu wechseln.
• Die Shift-Taste gedrückt halten und dann die Hoch- und Runter-Pfeiltasten 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:

• Den Fokus auf das <select>-Element legen (z.B. mit Tab).
• Die Strg-Taste gedrückt halten und dann die Hoch- und Runter-Pfeiltasten verwenden, um die "fokussierte" Auswahlelement zu ändern, d.h. das, das ausgewählt wird, falls Sie es tun möchten. Die "fokussierte" Auswahlelement ist mit einer gepunkteten Umrandung hervorgehoben, ähnlich wie ein über die Tastatur fokussierter Link.
• Leertaste drücken, um "fokussierte" Auswahlelemente auszuwählen/abwählen.

Historisch war es notorisch schwierig, das <select>-Element produktiv mit CSS zu stylen, daher wurden Funktionen eingeführt, um vollständig anpassbare Auswahlelemente zu erstellen.

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in alten Codebasen, wo diese 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 Standard-Systemerscheinungsbild zu entfernen.

Es ist jedoch schwierig, mit traditionellen <select>-Elementen ein konsistentes Ergebnis über verschiedene Browser hinweg zu erzielen. Wenn Sie volle Kontrolle erreichen möchten, sollten Sie erwägen, eine Bibliothek mit guten Möglichkeiten zum Stylen von Formular-Widgets zu verwenden oder versuchen, Ihr eigenes Dropdown-Menü mit nicht-semantischen Elementen, JavaScript und WAI-ARIA zur Bereitstellung von Semantiken zu erstellen.

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 nicht für mehrzeilige <select>-Elemente (diejenigen mit gesetztem multiple-Attribut) — sie tendieren dazu, als Scrolllistenfeld statt als Dropdown dargestellt zu werden, daher haben sie keinen offenen Zustand.

Für weitere Informationen zur alten <select>-Gestaltung 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.

Das <hr> innerhalb eines <select> sollte als rein dekorativ angesehen werden, da es derzeit nicht im Barrierefreiheitsbaum sichtbar ist und daher nicht für unterstützende Technologien zugänglich ist.

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

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

Das folgende Beispiel ist komplexer und zeigt mehr 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 ausgewählt werden können, da wir das multiple-Attribut beigefügt 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 hinzugefügt, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, ihre Darstellung besteht in der Regel darin, dass der Gruppenname fett hervorgehoben wird und die Optionen eingerückt sind.
• Die Option "Hamster" enthält ein disabled-Attribut und kann daher überhaupt nicht ausgewählt werden.

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