input-Attribute: datalist und autocomplete

HTML input Attribute

Um Eingabefelder möglichst komfortable für den Benutzer zu gestalten, bietet HTML ein autocomplete und das datalist-Attribut.

18-12-15 SITEMAP

autocomplete – automatisch vervollständigen

Viele Browser speichern Eingaben in Formularfelder für eine erneute Nutzung und bieten ein automatischen Vervollständigen.

input autocomplete steuert das Speichern der Benutzereingaben in individuelle Formularfelder und kann aktiviert oder deaktiviert werden. Passwörter werden allerdings per se nicht gespeichert.

autocomplete="off" unterbindet das Speichern der Eingaben. Zuverlässig funktioniert das Ausschalten des automatischen Vervollständigen allerdings nicht, vor allem nicht bei Email und Passwörtern, da die Browser ihre Passwort-Manager bevorzugen.

<input name="account" type="text" id="account" autocomplete="off" />

list / datalist

Das list-Attribut für input-Felder verweist auf eine Liste von vorgegebenen Werten. Anders als beim select-Feld kann der Benutzer bei einer Liste auch eigene Werte eingeben. Ein input-Element mit Datalist unterbreitet nur Vorschläge, während ein Select die Eingabe auf die Vorgaben beschränkt.

Ein datalist-Tag führt die mögichen Werte auf und ist über die id mit dem list-Attribut des input-Tags verbunden.

<input type="text" list="dliste" value="" />

<datalist id="dliste">
    <option value="Butter">
    <option value="Bier">
    <option value="Brot">
    <option value="Milch">
    …
</datalist>

Chrome, Opera und Safari zeigen die Optionen an, wenn das Eingabefeld in den Fokus kommen. Das sieht so aus:

Auf Lager Butter Bier Brot Milch Magerquark

Firefox zeigt die Optionen, wenn die Taste ↓ gedrückt wird. Aber sowohl Chrome, Opera, Safari als auch Firefox fügen die Optionen der datalist zum Autocomplete hinzu.

Die Unterschiede zwischen einem input type="text" und einem select mit vorgegebenen Optionen geht noch weiter. Für Input mit einer Datalist kann nur nach einem Begriff gesucht werden, während der Benutzer bei einem Select mehrere Optionen auswählen kann. Bei einem Select können das value-Attribut und der angezeigte Text voneinander abweichen, bei einer Datalist gibt es kein value-Attribut. Hier muss der Suchvorschlag im Klartext direkt eingesetzt sein.