HTML `<datalist>`-Element

Das <datalist>-Element ist eines der HTML5-Elemente. Es wird verwendet, um eine Liste von Eingabeoptionen zu erstellen, die innerhalb des <datalist>-Elements definiert und über das list-Attribut mit einem <input>-Feld verknüpft sind. Anfangs sind die Optionen ausgeblendet, und die Liste wird verfügbar, sobald der Benutzer mit der Eingabe beginnt. Das list-Attribut des <input>-Tags muss mit der id des <datalist>-Elements übereinstimmen.

Vordefinierte Optionen für die Eingabe sind in verschachtelten <option>-Elementen enthalten.

Syntax

Das <datalist>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<datalist>) und dem schließenden (</datalist>) Tag geschrieben.

Beispiel für das HTML `<datalist>`-Tag:

HTML <datalist>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>Choose browser</div>
    <input list="browsers" />
    <!-- The list attribute value matches the datalist id -->
    <datalist id="browsers">
      <option value="Opera">
      <option value="Safari">
      <option value="Firefox">
      <option value="Google Chrome">
      <option value="Maxthon">
    </datalist>
  </body>
</html>

Try it Yourself »

Ergebnis

Choose browser

Attribute

Das <datalist>-Element unterstützt Globale Attribute und Ereignisattribute.

Praxis

Wofür wird das HTML <datalist>-Tag verwendet?

Es definiert eine Liste vordefinierter Optionen für ein <input>-Element.Es wird verwendet, um Bilder in eine Webseite einzufügen.Es definiert eine Bildunterschrift für ein <figure>-Element.Es bietet eine Autovervollständigungsfunktion für Formularfelder.Es wird verwendet, um animierte Grafiken zu erstellen.

HTML <datalist>-Element ​

Syntax ​

Beispiel für das HTML <datalist>-Tag: ​

Ergebnis ​