<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 für Barrierefreiheitszwecke mit einem <label> verknüpft zu werden, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunkts zu vertreten, 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 enthalten, das den Datenwert enthält, der an den Server übermittelt wird, wenn diese Option ausgewählt ist. Wenn kein value-Attribut enthalten ist, ist der Standardwert der im Element enthaltene Text. Sie können ein selected-Attribut auf einem <option>-Element einfügen, um es standardmäßig beim ersten Laden der Seite auszuwählen. 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 spezifische Attribute, mit denen Sie es steuern 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 Eingabe-Formulareigenschaften wie required, disabled, autofocus usw.

Sie können weiterhin <option>-Elemente innerhalb von <optgroup>-Elementen verschachteln, um separate Gruppen von Optionen innerhalb des Dropdowns zu erstellen. Sie können auch <hr>-Elemente einfügen, um visuelle Trennungen zwischen Optionen zu schaffen.

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

Dieses Element umfasst die globalen Attribute.

autocomplete

Ein String, der einen Hinweis für die Auto-Vervollstä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 boolesche Attribut ermöglicht es Ihnen, festzulegen, dass ein Formular-Steuerelement den Eingabefokus haben soll, wenn die Seite geladen wird. 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 Einstellung vom umgebenden Element, zum Beispiel von <fieldset>; wenn es kein umgebendes Element mit gesetztem disabled-Attribut gibt, ist das Steuerelement aktiviert.

form

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

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

multiple

Dieses boolesche 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 scrollbares Listenfeld anstelle eines einzeiligen Dropdown-Menüs.

name

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

required

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

size

Wenn das Steuerelement als scrollbares Listenfeld präsentiert wird (z. B. wenn multiple angegeben ist), stellt dieses Attribut die Anzahl der Zeilen dar, die gleichzeitig sichtbar sein sollten. Browser sind nicht verpflichtet, ein Select-Element als scrollbares Listenfeld darzustellen. Der Standardwert ist 0.

Hinweis: Laut der 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 macht das derzeit, sodass sich Mozilla entschieden hat, vorerst weiterhin 0 in Firefox zu verwenden.

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 Umschalttaste (je nachdem, was für Ihr Betriebssystem sinnvoll ist) gedrückt halten und dann mehrere Optionen anklicken, um sie auszuwählen/deselektieren.

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

• 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, und dabei die Pfeil–oben und Pfeil–unten-Tasten verwenden, um die Optionen nach oben und unten zu gehen.
• Die Umschalttaste gedrückt halten und dann die Pfeil–oben und Pfeil–unten-Tasten verwenden, um den Bereich der ausgewählten Elemente zu vergrößern oder zu verkleinern.

Tastaturbenutzer können mehrere nicht zusammenhängende Elemente durch folgende Schritte auswählen:

• Das <select>-Element fokussieren (z. B. mit Tab).
• Die Strg-Taste gedrückt halten und die Pfeil–oben und Pfeil–unten-Tasten 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 einer gepunkteten Umrandung hervorgehoben, ähnlich wie bei einem tastaturfokussierten Link.
• Durch Drücken der Leertaste können Sie "fokussierte" Auswahloptionen auswählen/deselektieren.

Das <select>-Element war historisch gesehen notorisch schwer mit CSS produktiv zu gestalten. Daher wurden Funktionen eingeführt, um vollständig anpassbare Select-Elemente zu erstellen.

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in Legacy-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 Systemaussehen zu entfernen.

Es ist jedoch schwierig, mit traditionellen <select>-Elementen ein konsistentes Ergebnis über verschiedene Browser hinweg zu erzielen. Wenn Sie die volle Kontrolle haben möchten, sollten Sie erwägen, eine Bibliothek mit guten Möglichkeiten zur Gestaltung von Form-Widgets zu verwenden oder Ihr eigenes Dropdown-Menü mit nicht-semantischen Elementen, JavaScript und WAI-ARIA zu erstellen, um die Semantik bereitzustellen.

Sie können die :open-Pseudoklasse verwenden, um <select>-Elemente im offenen Zustand zu gestalten, d.h. wenn die Dropdown-Optionsliste angezeigt wird. Dies gilt nicht für mehrzeilige <select>-Elemente (die mit dem gesetzten multiple Attribut); sie werden als scrollbares Listenfeld anstelle eines Dropdowns dargestellt, und haben daher keinen offenen Zustand.

Für mehr Informationen über die Legacy-Stilgestaltung von <select> siehe:

• Gestaltung von HTML-Formularen
• Erweiterte Stilgestaltung 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 und daher nicht zugänglich für unterstützende Technologien ist.

Das folgende Beispiel erstellt ein Dropdown-Menü mit drei Werten, von denen 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 anhand von <optgroup> und <hr>, um es dem Benutzer einfacher zu machen, 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 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, weil wir das multiple Attribut eingeschlossen haben.
• Das size Attribut dafür sorgt, dass nur 4 Zeilen gleichzeitig angezeigt werden; Sie können scrollen, um alle Optionen anzuzeigen.
• Wir <optgroup>-Elemente eingefügt haben, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, die Visualisierung besteht im Allgemeinen darin, dass der Gruppenname fett dargestellt wird und die Optionen eingerückt sind.
• Die "Hamster"-Option 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 Select-Elemente