<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 dem Steuerelement zu verbinden, geben wir ihm ein eindeutiges Kennzeichen im id-Attribut und fügen dann das list-Attribut zum <input>-Element hinzu, wobei derselbe Bezeichner als Wert verwendet wird. 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 darstellt, der in die Eingabe eingegeben werden soll. Es kann auch ein label-Attribut haben oder, wenn dieses fehlt, einen 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 beim Klicken wird der Inhalt, der in das Steuerelementfeld eingegeben wird, immer aus dem value-Attribut stammen.

Dieses Element hat keine weiteren Attribute außer den globalen Attributen, die allen Elementen gemeinsam sind.

Wenn Sie das <datalist>-Element verwenden möchten, sollten Sie sich folgender Barrierefreiheitsprobleme bewusst sein:

• Die Schriftgröße der Optionen der Datalist wird nicht vergrößert und bleibt immer gleich groß. Die Inhalte der automatischen Vorschläge wachsen oder schrumpfen nicht, wenn die übrigen Inhalte vergrößert oder verkleinert werden.
• Da das Ansprechen der Liste von Optionen mit CSS sehr eingeschränkt bis nicht vorhanden ist, kann das Rendering nicht für den Hochkontrastmodus gestaltet werden.
• Einige Screenreader/Browser-Kombinationen, einschließlich NVDA und Firefox, kündigen die Inhalte des automatischen Vorschlagspopups nicht an.

Empfohlene Werte bei Typen text, search, url, tel, email und number werden in einem Dropdown-Menü angezeigt, wenn der Benutzer auf das Steuerelement klickt oder doppelklickt. Typisch 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 Oberfläche anzeigen, die eine bequeme Auswahl eines Datums und einer Zeit ermöglicht. Vordefinierte Werte können dort angezeigt werden, wodurch der Benutzer das Steuerelementwert schnell 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 bei <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 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" 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 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 dessen list-Attribut;
• Das <option>-Element.