<select>: Das HTML Select-Element

Das obige Beispiel zeigt die typische Verwendung eines <select>. Es erhält ein id-Attribut, um es aus Gründen der Barrierefreiheit mit einem <label> zu verknüpfen, sowie ein name-Attribut, um den Namen des zugehörigen Datenpunkts zu repräsentieren, 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, welches den Datenwert enthält, der an den Server gesendet 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 zu einem <option>-Element hinzufügen, um es standardmäßig beim ersten Laden der Seite auszuwählen.

Ein <select>-Element wird in JavaScript durch ein HTMLSelectElement Objekt repräsentiert, und dieses Objekt hat eine value Eigenschaft, welche den Wert der ausgewählten <option> enthält.

Das <select>-Element verfügt über einige einzigartige Attribute, mit denen Sie es steuern können, wie zum Beispiel 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, etc.

Sie können zusätzlich <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 Trennungen zu erstellen, die visuelle Unterbrechungen zwischen Optionen hinzufügen.

Für weitere Beispiele, siehe Die nativen Formularelemente: Dropdown-Inhalte.

Dieses Element beinhaltet die globalen Attribute.

autocomplete

Ein String, der einen Hinweis für die Autocomplete-Funktion eines User-Agenten bereitstellt. Siehe Das HTML Autocomplete-Attribut für eine vollständige Liste von Werten und Details zur Nutzung von Autocomplete.

autofocus

Dieses boolesche Attribut ermöglicht es Ihnen, anzugeben, 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 der Steuerung interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt die Steuerung ihre Einstellung vom umgebenden Element, zum Beispiel dem <fieldset>; wenn es kein umgebendes Element mit dem disabled-Attribut gibt, ist die Steuerung aktiviert.

form

Das <form>-Element, mit dem das <select> verknüpft werden soll (sein Formularbesitzer). 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>-Elementen überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahren <form>-Element überschreiben.

multiple

Dieses boolesche Attribut zeigt an, dass mehrere Optionen in der Liste ausgewählt werden können. Wenn es nicht angegeben ist, kann jeweils nur eine Option ausgewählt werden. Wenn multiple angegeben ist, zeigen die meisten Browser eine scrollbare Listbox anstelle eines einzelnen Zeilen-Dropdowns an.

name

Dieses Attribut wird verwendet, um den Namen der Steuerung anzugeben.

required

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

size

Wenn die Steuerung als scrollbare Listbox dargestellt ist (z.B. wenn multiple angegeben ist), repräsentiert dieses Attribut die Anzahl der Zeilen in der Liste, die gleichzeitig sichtbar sein sollten. Browser sind nicht verpflichtet, ein select-Element als scrollbare Listbox darzustellen. Der Standardwert ist 0.

Hinweis: Laut der HTML-Spezifikation sollte der Standardwert für size 1 sein; jedoch hat sich in der Praxis herausgestellt, dass dies einige Websites beeinträchtigt, und kein anderer Browser das derzeit tut, sodass Mozilla beschlossen hat, vorerst weiterhin 0 mit 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-, Befehl- oder Umschalt-Taste gedrückt halten (abhängig von Ihrem Betriebssystem) und dann mehrere Optionen anklicken, um sie auszuwählen/abzuwä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 in dem Bereich, den sie auswählen möchten, auswählen, indem sie die Nach oben und Nach unten Cursortasten verwenden, um durch die Optionen zu navigieren.
• Die Umschalt-Taste gedrückt halten und dann die Nach oben und Nach unten Cursortasten 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 Nach oben und Nach unten Cursortasten verwenden, um die "fokussierte" Auswahloption zu ändern, also diejenige, die ausgewählt wird, wenn Sie sich dafür entscheiden. Die "fokussierte" Auswahloption ist mit einem gepunkteten Umriss hervorgehoben, ähnlich wie ein tastaturfokussierter Link.
• Die Leertaste drücken, um "fokussierte" Auswahloptionen auszuwählen/abzuwählen.

Das <select>-Element ist bekannt dafür, schwierig mit CSS produktiv zu stylen. Sie können gewisse Aspekte wie bei jedem Element beeinflussen — zum Beispiel durch Manipulation des Boxmodells, der angezeigten Schriftart, etc., und Sie können die appearance-Eigenschaft verwenden, um das standardmäßige System-Aussehen zu entfernen.

Diese Eigenschaften ergeben jedoch kein konsistentes Ergebnis über verschiedenen Browser hinweg, und es ist schwer, Dinge wie die Ausrichtung verschiedener Arten von Formularelementen in einer Spalte zu kontrollieren. Die interne Struktur des <select>-Elements ist komplex und schwer zu steuern. Wenn Sie die volle Kontrolle wünschen, sollten Sie in Betracht ziehen, eine Bibliothek mit guten Möglichkeiten zum Stylen von Formularelementen zu verwenden, oder versuchen, Ihr eigenes Dropdown-Menü mit nicht-semantischen Elementen, JavaScript und WAI-ARIA zu erstellen, um Semantik bereitzustellen.

Für weitere nützliche Informationen zum Styling von <select>, siehe:

• Styling von HTML-Formularen
• Erweitertes Styling für HTML-Formulare
• Die field-sizing-Eigenschaft, die steuert, wie <select>-Elemente im Verhältnis zu ihren enthaltenen Optionen dimensioniert werden.

Das <hr> innerhalb eines <select> sollte als rein dekorativ betrachtet werden, da sie derzeit nicht innerhalb des Zugänglichkeitsbaums freigelegt sind und daher nicht an unterstützende Technologien weitergegeben werden.

Das folgende Beispiel erstellt ein sehr einfaches Dropdown-Menü, bei dem 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 Gruppierungen, durch die Verwendung von <optgroup> und <hr> um es für den 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 mehrere 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 inkludiert haben.
• Das size-Attribut bewirkt, dass gleichzeitig nur 4 Zeilen angezeigt werden; Sie können scrollen, um alle Optionen anzuzeigen.
• Wir haben <optgroup>-Elemente eingefügt, um die Optionen in verschiedene Gruppen zu unterteilen. Dies ist eine rein visuelle Gruppierung, deren Darstellung in der Regel darin besteht, 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