Datalist-Element

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, während er auch die Möglichkeit hat, einen eigenen Wert einzugeben, wenn er möchte. Die Liste der vordefinierten Werte bleibt verborgen, bis der Benutzer beginnt, im zugehörigen Textfeld zu tippen. Das <datalist> wird mit einem id-Attribut gepaart, und das <input> wird mit ihm über das list-Attribut verknüpft.

Insgesamt kann das <datalist>-Element eine hilfreiche Möglichkeit sein, eine vordefinierte Liste von Optionen bereitzustellen, aus der Benutzer auswählen können, während sie dennoch die Flexibilität haben, bei Bedarf einen eigenen Wert einzugeben.

Beispiel

Wenn der Benutzer beginnt, im Eingabefeld Kategorie zu tippen, zeigt der Browser die vordefinierten Kategorien aus der datalist an. Wenn keine der Optionen mit der Eingabe des Benutzers übereinstimmt, kann er dennoch seine eigene Kategorie eingeben. Dies ermöglicht es dem Benutzer, aus einer Liste auszuwählen und bei Bedarf manuell einen Wert einzugeben.

• <label for="category">: kennzeichnet das Eingabefeld und zeigt dem Benutzer an, dass er eine Produktkategorie auswählen oder eingeben soll;
• <input type="text" name="category" id="category" list="categories"/>: das Eingabefeld, in dem der Benutzer entweder eine Kategorie eingeben oder aus den verfügbaren Optionen auswählen kann. Das Attribut list="categories" verknüpft diese Eingabe mit der datalist mit der ID categories;
• <datalist id="categories">: enthält eine Liste vordefinierter Produktkategorien. Diese Optionen werden als Vorschläge angezeigt, wenn 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, wenn dieser mit keiner der Optionen übereinstimmt.