<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 an die Steuerung zu binden, geben wir ihm eine eindeutige Kennung im id-Attribut und fügen dann das list-Attribut zum <input>-Element mit der gleichen Kennung als Wert hinzu. Nur bestimmte Typen von <input> unterstützen dieses Verhalten, und es kann auch von Browser zu Browser variieren.

Jedes <option>-Element sollte ein value-Attribut haben, das einen Vorschlag repräsentiert, der in die Eingabe eingegeben werden soll. Es kann auch ein label-Attribut haben oder, wenn es fehlt, etwas Textinhalt, der vom Browser anstelle von value (Firefox) oder zusätzlich zu value (Chrome und Safari, als ergänzender Text) angezeigt werden kann. Der genaue Inhalt des Drop-down-Menüs hängt vom Browser ab, aber beim Klicken wird der Inhalt, der in das Steuerungsfeld eingegeben wurde, immer aus dem value-Attribut stammen.

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

Wenn Sie sich entscheiden, das <datalist>-Element zu verwenden, sind hier einige Barrierefreiheitsthemen, die Sie beachten sollten:

• Die Schriftgröße der Optionen der Datenliste zoomt nicht, bleibt immer gleich groß. Die Inhalte des Autosuggests wachsen oder schrumpfen nicht, wenn der Rest der Inhalte vergrößert oder verkleinert wird.
• Da das Anvisieren der Optionsliste mit CSS sehr begrenzt bis nicht vorhanden ist, kann das Rendering nicht für den Hochkontrastmodus gestylt werden.
• Einige Kombinationen aus Bildschirmleser/Browser, einschließlich NVDA und Firefox, geben die Inhalte des Autosuggest-Popups nicht bekannt.

Empfohlene Werte in Typen text, search, url, tel, email und number werden in einem Drop-down-Menü angezeigt, wenn der Benutzer auf die Steuerung klickt oder doppelklickt. Typischerweise hat die rechte Seite einer Steuerung auch einen Pfeil, 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 Schnittstelle anzeigen, die eine bequeme Auswahl eines Datums und einer 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>

Wenn value-Attribute auf <option>-Elementen enthalten sind, die für eine Datalist bereitgestellt werden, die mit einem range-Eingabetyp verknüpft ist, werden sie als eine Reihe von Tickmarks 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" label="0%"></option>
  <option value="10" label="Minimum Tip"></option>
  <option value="20" label="Standard"></option>
  <option value="30" label="Generous"></option>
  <option value="50" label="Very Generous"></option>
</datalist>

Der color-Typ kann vordefinierte Farben in einer vom Browser bereitgestellten Schnittstelle 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 insbesondere dessen list-Attribut;
• Das <option>-Element.