<datalist>: Das HTML-Datenlistelement

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 dem <input>-Element mit derselben Kennung als Wert hinzu. Nur bestimmte Typen von <input> unterstützen dieses Verhalten, und es kann je nach Browser unterschiedlich sein.

Jedes <option>-Element sollte ein value-Attribut haben, das einen Vorschlag darstellt, der in die Eingabe eingegeben werden soll. Es kann auch ein label-Attribut haben oder, falls dieses fehlt, etwas Textinhalt, 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, kommt der in das Steuerelementfeld eingegebene Inhalt immer aus dem value-Attribut.

Note: <datalist> ist kein Ersatz für <select>. Ein <datalist> stellt keine Eingabe selbst dar; es ist eine Liste von vorgeschlagenen Werten für ein zugehöriges Steuerelement. Das Steuerelement kann immer noch jeden Wert akzeptieren, der die Validierung besteht, auch 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 entscheiden, das <datalist>-Element zu verwenden, sollten Sie einige Barrierefreiheitsthemen beachten:

• Die Schriftgröße der Optionen der Datenliste wird nicht vergrößert oder verkleinert, sondern bleibt immer gleich groß. Der Inhalt des Autosuggests wird weder vergrößert noch verkleinert, wenn der Rest des Inhalts rein- oder rausgezoomt wird.
• Da das Ansprechen der Optionsliste mit CSS sehr begrenzt bis nicht vorhanden ist, kann die Darstellung nicht für den Hochkontrastmodus gestylt werden.
• Einige Kombinationen aus Bildschirmlesegerät und Browser, einschließlich NVDA und Firefox, geben den Inhalt 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. Normalerweise hat die rechte Seite eines Steuerelements auch einen Pfeil, der auf die Präsenz 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 komfortable Auswahl von Datum und Uhrzeit ermöglicht. Dort können vordefinierte Werte angezeigt werden, die es dem Benutzer ermöglichen, den Steuerungswert 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 eine Reihe von Markierungen 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 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 genauer gesagt sein list-Attribut;
• Das <option>-Element.