<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 Datenelements darzustellen, das an den Server übermittelt wird. Jede Menüoption wird durch ein innerhalb des <select> verschachteltes <option>-Element definiert.

Jedes <option>-Element sollte ein value-Attribut enthalten, das den zu übermittelnden Datenwert angibt, wenn diese Option ausgewählt wird. Wenn kein value-Attribut enthalten ist, wird der Standardwert auf den innerhalb des Elements enthaltenen Text gesetzt. Sie können ein selected-Attribut auf einem <option>-Element einfügen, um es standardmäßig auszuwählen, wenn die Seite erstmals geladen wird. Wird kein selected-Attribut angegeben, wird standardmäßig das erste <option>-Element 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 verfügt über einige einzigartige Attribute, die Sie zur Steuerung verwenden können, wie z.B. multiple, um anzugeben, ob mehrere Optionen ausgewählt werden können, und size, um die Anzahl der gleichzeitig angezeigten Optionen zu bestimmen. Es akzeptiert auch die meisten allgemeinen Formular-Input-Attribute wie required, disabled, autofocus, etc.

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

Weitere Beispiele finden Sie unter Die nativen Formular-Widgets: Dropdown-Inhalte.

Dieses Element enthält die globalen Attribute.

autocomplete

Eine Zeichenkette, die einen Hinweis für die Autovervollständigungsfunktion eines User-Agents bietet. Siehe Das HTML-Autocomplete-Attribut für eine vollständige Liste von Werten und Details zur Verwendung von Autocomplete.

autofocus

Mit diesem booleschen Attribut können Sie angeben, dass ein Formularelement 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 der Steuerung interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt die Steuerung die Einstellung von dem umgebenden Element, zum Beispiel <fieldset>; wenn es kein umgebendes Element mit dem gesetzten disabled-Attribut gibt, ist die Steuerung aktiviert.

form

Das mit dieser <select> verknüpfte <form>-Element (sein Formularbesitzer). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird <select> mit seinem übergeordneten <form>-Element verknüpft, sofern vorhanden.)

Dieses Attribut ermöglicht es, <select> Elemente mit <form>s überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein übergeordnetes <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 ein scrollbares Listenfeld anstelle eines einfachen Dropdowns an.

name

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

required

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

size

Wenn die Steuerung als scrollbares Listenfeld dargestellt wird (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 Auswahl-Element als scrollbares Listenfeld darzustellen. Der Standardwert ist 0.

Hinweis: Laut HTML-Spezifikation sollte der Standardwert für die Größe 1 sein; in der Praxis hat sich jedoch herausgestellt, dass dies einige Websites beeinträchtigt, und kein anderer Browser tut dies derzeit, so dass Mozilla sich entschieden hat, vorerst 0 in Firefox weiterhin 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 Tasten Strg, Befehl oder Umschalt (je nach Betriebssystem) gedrückt halten und dann auf mehrere Optionen klicken, um diese 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 Tabulator).

• Ein Element oben oder unten in dem Bereich auswählen, den sie auswählen möchten, indem sie die Aufwärts- und Abwärts-Pfeiltasten verwenden, um durch die Optionen zu navigieren.

• Die Umschalttaste gedrückt halten und dann die Aufwärts-

  • und Abwärts-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 Tabulator).
• Die Strg-Taste gedrückt halten und dann die Aufwärts und Abwärts-Pfeiltasten verwenden, um die "fokussierte" Auswahloption zu ändern, d.h. diejenige, die ausgewählt wird, wenn Sie sich entscheiden, sie auszuwählen. Die "fokussierte" Auswahloption wird mit einem gepunkteten Umriss hervorgehoben, ähnlich wie ein tastaturfokussierter Link.
• Leertaste drücken, um "fokussierte" Auswahloptionen auszuwählen/abzuwählen.

Das <select>-Element ist notorisch schwer mit CSS produktiv zu stylen. Sie können bestimmte Aspekte wie bei jedem anderen Element beeinflussen — z.B. die Manipulation des Box-Modells, der angezeigten Schriftart, etc., und Sie können die appearance-Eigenschaft verwenden, um das Standard-Systemaussehen zu entfernen.

Diese Eigenschaften erzeugen jedoch keine konsistenten Ergebnisse über verschiedene Browser hinweg, und es ist schwierig, Dinge wie das Ausrichten verschiedener Arten von Formularelementen in einer Spalte zu erreichen. Die interne Struktur des <select>-Elements ist komplex und schwer zu steuern. Wenn Sie die volle Kontrolle haben möchten, sollten Sie in Erwägung ziehen, eine Bibliothek mit guten Möglichkeiten zum Stylen von Formular-Widgets zu verwenden oder ein eigenes Dropdown-Menü mit nicht-sematischen Elementen, JavaScript und WAI-ARIA für die semantische Bedeutung zu erstellen.

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 in Bezug auf ihre enthaltenen Optionen dimensioniert werden.

Das <hr> innerhalb eines <select> sollte als rein dekorativ betrachtet werden, da es derzeit nicht innerhalb des Zugänglichkeitbaums angezeigt wird und daher nicht für unterstützende Technologien sichtbar ist.

Das folgende Beispiel erstellt ein sehr einfaches Dropdown-Menü, dessen 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 unter Verwendung 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 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, da das Attribut multiple enthalten ist.
• Das Attribut size bewirkt, dass jeweils 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. Dabei handelt es sich um eine rein visuelle Gruppierung; ihre Visualisierung besteht im Allgemeinen darin, dass der Gruppenname fett dargestellt wird und die Optionen eingerückt sind.
• Die "Hamster"-Option beinhaltet 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