Das <datalist>-Element in HTML wird verwendet, um eine vordefinierte Liste von Optionen für ein <input>-Element zu erstellen. Es ermöglicht dem Benutzer, eine Option aus der Liste auszuwählen, bietet jedoch gleichzeitig die Möglichkeit, einen eigenen Wert einzugeben. Die Liste der vordefinierten Werte bleibt verborgen, bis der Benutzer beginnt, im zugehörigen Textfeld zu tippen. Das <datalist>-Element wird mit einem id-Attribut versehen, und das <input>-Element wird über das list-Attribut damit verknüpft.

Insgesamt kann das <datalist>-Element eine hilfreiche Möglichkeit sein, Benutzern eine vordefinierte Auswahlliste bereitzustellen und ihnen dennoch die Flexibilität zu geben, bei Bedarf einen eigenen Wert einzugeben.

Beispiel

Wenn der Benutzer beginnt, im Eingabefeld category zu tippen, zeigt der Browser die vordefinierten Kategorien aus der datalist an. Falls keine der Optionen zur Eingabe des Benutzers passt, kann dennoch eine eigene Kategorie eingegeben werden. Dies ermöglicht es dem Benutzer, aus einer Liste auszuwählen oder bei Bedarf einen eigenen Wert einzugeben.

• <label for="category">: kennzeichnet das Eingabefeld und zeigt dem Benutzer an, dass eine Produktkategorie ausgewählt oder eingegeben werden soll;

• <input type="text" name="category" id="category" list="categories"/>: das Eingabefeld, in das der Benutzer entweder eine Kategorie eingeben oder aus den verfügbaren Optionen auswählen kann. Das Attribut list="categories" verknüpft dieses Eingabefeld mit der datalist mit der ID categories;

• <datalist id="categories">: enthält eine Liste vordefinierter Produktkategorien. Diese Optionen werden als Vorschläge angezeigt, sobald der Benutzer im Eingabefeld zu tippen beginnt;

• <option value="...">: jede option repräsentiert eine Produktkategorie in der Liste. Der Benutzer kann eine dieser Kategorien auswählen oder einen eigenen Wert eingeben, falls keine Option passt.