<datalist>: Das HTML-Datenlisten-Element

<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 mit der Steuerung zu verbinden, geben wir ihm einen eindeutigen Bezeichner im id-Attribut und fügen dann das list-Attribut dem <input>-Element mit demselben Bezeichner als Wert hinzu. Nur bestimmte Arten von <input> unterstützen dieses Verhalten, und es kann auch von Browser zu Browser unterschiedlich sein.

Jedes <option>-Element sollte ein value-Attribut haben, das einen Vorschlag darstellt, der im Eingabefeld eingegeben werden soll. Es kann auch ein label-Attribut oder, falls dieses fehlt, etwas Textinhalt haben, der möglicherweise vom Browser anstelle von value (Firefox) oder zusätzlich zu value (Chrome und Safari, als Ergänzungstext) angezeigt wird. Der genaue Inhalt des Drop-down-Menüs hängt vom Browser ab, aber beim Anklicken kommt der Inhalt, der ins Steuerungsfeld eingegeben wird, immer aus dem value-Attribut.

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, bedenken Sie folgende Barrierefreiheitsprobleme:

• Die Schriftgröße der Optionen der Datenliste wird beim Zoomen nicht angepasst und bleibt immer gleich groß. Der Inhalt des Autosuggest wird nicht größer oder kleiner, wenn der Rest des Inhalts vergrößert oder verkleinert wird.
• Da das Ansprechen der Optionsliste mit CSS sehr eingeschränkt bis nicht vorhanden ist, kann die Darstellung nicht für den Hochkontrastmodus gestaltet werden.
• Einige Bildschirmleser-/Browser-Kombinationen, einschließlich NVDA und Firefox, geben den Inhalt des Autosuggest-Popup nicht wieder.

Empfohlene Werte in Typen wie text, search, url, tel, email und number werden in einem Drop-down-Menü angezeigt, wenn der Benutzer auf die Steuerung klickt oder doppelklickt. Typischerweise wird auf der rechten Seite einer Steuerung ein Pfeil angezeigt, der auf die Anwesenheit 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 Benutzeroberfläche anzeigen, die eine bequeme Auswahl von Datum und Uhrzeit ermöglicht. Vordefinierte Werte können dort angezeigt werden, sodass der Benutzer schnell den Steuerungswert ausfüllen kann.

<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 Strichen 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 vom Browser bereitgestellten Benutzeroberflä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 speziell dessen list-Attribut;
• Das <option>-Element.