<datalist>: Das HTML-Datenlistenelement

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

label {
  display: block;
  margin-bottom: 10px;
}

Um das <datalist>-Element an die Steuerung zu binden, geben wir ihm einen eindeutigen Bezeichner im id-Attribut und fügen dann das list-Attribut zum <input>-Element hinzu, dessen Wert mit demselben Bezeichner übereinstimmt. Nur bestimmte Typen von <input> unterstützen dieses Verhalten, und es kann auch je nach Browser variieren.

Jedes <option>-Element sollte ein value-Attribut haben, das einen Vorschlag darstellt, der in das Eingabefeld eingegeben werden soll. Es kann auch ein label-Attribut haben oder, falls dieses fehlt, einen Textinhalt, der vom Browser möglicherweise statt des value-Attributes angezeigt wird (Firefox) oder zusätzlich zu value (Chrome und Safari, als ergänzender Text). Der genaue Inhalt des Dropdown-Menüs hängt vom Browser ab, aber beim Klicken wird der Inhalt, der in das Steuerfeld eingegeben wird, immer aus dem value-Attribut stammen.

Note: <datalist> ist kein Ersatz für <select>. Ein <datalist> stellt keine Eingabe selbst dar; es ist eine Liste von vorgeschlagenen Werten für eine zugehörige Steuerung. Die Steuerung kann immer noch jeden Wert akzeptieren, der die Validierung besteht, selbst wenn er nicht in dieser Vorschlagsliste enthalten ist.

Dieses Element hat keine anderen Attribute als die globalen Attribute, die allen Elementen gemeinsam sind.

Wenn Sie sich für die Verwendung des <datalist>-Elements entscheiden, sollten Sie auf folgende Barrierefreiheitsthemen achten:

• Die Schriftgröße der Optionen der Dataliste zoomt nicht und bleibt immer in derselben Größe. Der Inhalt der automatischen Vervollständigung wird nicht vergrößert oder verkleinert, wenn der Rest des Inhalts gezoomt wird.
• Da das Anvisieren der Optionenliste mit CSS sehr begrenzt bis nicht existent ist, kann das Rendering nicht für den Hochkontrastmodus gestaltet werden.
• Einige Bildschirmleser-/Browser-Kombinationen, einschließlich NVDA und Firefox, geben den Inhalt des automatischen Vorschlags-Popups nicht bekannt.

Empfohlene Werte in den Typen text, search, url, tel, email und number werden in einem Dropdown-Menü angezeigt, wenn der Benutzer auf die Steuerung klickt oder doppelklickt. Typischerweise wird die rechte Seite einer Steuerung auch einen Pfeil haben, der auf das Vorhandensein vordefinierter Werte hinweist.

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

Die Typen month, week, date, time und datetime-local können eine Oberfläche anzeigen, die eine bequeme Auswahl eines Datums und einer Uhrzeit ermöglicht. Vordefinierte Werte können dort angezeigt werden, die es dem Benutzer ermöglichen, den Steuerwert schnell auszufüllen.

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

Die empfohlenen Werte im range-Typ werden als Reihe von Strichmarkierungen angezeigt, die der Benutzer leicht auswählen kann.

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

Der color-Typ kann vordefinierte Farben in einer browserbasierten Oberfläche anzeigen.

<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

• Das <input>-Element, und genauer gesagt sein list-Attribut;
• Das <option>-Element.