<datalist>: Das HTML Datenlisten-Element

Um das <datalist>-Element an das Steuerelement zu binden, geben wir ihm eine eindeutige Kennung im id-Attribut und fügen dann das list-Attribut zum <input>-Element mit derselben Kennung als Wert hinzu. Nur bestimmte Arten 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 kann. Es kann auch ein label-Attribut oder, falls dieses fehlt, einen Textinhalt haben, der möglicherweise vom Browser anstelle von value (Firefox) oder zusätzlich zu value (Chrome und Safari, als ergänzender Text) angezeigt wird. Der genaue Inhalt des Dropdown-Menüs hängt vom Browser ab, aber wenn darauf geklickt wird, stammt der in das Steuerelement eingegebene Inhalt immer aus dem value-Attribut.

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

Beim Einsatz des <datalist>-Elements sollten Sie folgende Barrierefreiheitsprobleme beachten:

• Die Schriftgröße der Optionen der Datenliste zoomt nicht mit, sondern bleibt immer gleich groß. Die Inhalte der Autosuggest-Funktion wachsen oder schrumpfen nicht, wenn die übrigen Inhalte gezoomt werden.
• Da das Ansprechen der Optionsliste mit CSS sehr eingeschränkt bis nicht vorhanden ist, kann die Darstellung nicht im Hochkontrastmodus gestaltet werden.
• Einige Kombinationen aus Screenreader/Browser, einschließlich NVDA und Firefox, geben die Inhalte des Autosuggest-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 das Steuerelement klickt oder doppelklickt. Typischerweise hat die rechte Seite eines Steuerelements 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. Dort können vordefinierte Werte angezeigt werden, die dem Benutzer die schnelle Eingabe des Steuerwerts ermöglichen.

<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 von Browser bereitgestellten 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 insbesondere sein list-Attribut;
• Das <option>-Element.