Während die meisten Websites früher für input-Felder in Formularen primär die Typen text und password für das type-Attribut verwendet haben, gibt es spätestens seit der Einführung von HTML5 eine Vielzahl an weiteren Typen, über die Browser besser verstehen können, welche Inhalte ein Nutzer in ein Feld eingeben soll. So können z.B. mobile Browser bei der Eingabe einer Telefonnummer direkt nur die Zahlen-Tastatur anzeigen.
Diese Möglichkeit kann zusätzlich über das Attribut autocomplete so erweitert werden, sodass die automatische Vervollständigung bei der Eingabe durch den Nutzer bzw. das automatische Ausfüllen eines Formulars mit im Browser hinterlegten Daten ("Autofill") fehlerfrei funktioniert.
Werbeblocker aktiv?
Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können. Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? 🙂
Folgendes input-Feld ist beispielsweise als E-Mail-Feld gekennzeichnet, in das der Browser ihm bekannte E-Mail-Adressen eintragen kann:
<input type="email" autocomplete="email" />Weitere Beispiele sind die Eingabe eines Datums, einer Telefonnummer (inkl. Autofill), eines Wertes auf einer Skala und einer Farbe (standardmäßig rot):
<input type="date" /> <input type="tel" autocomplete="tel" /> <input type="range" /> <input type="color" value="#ff0000" />
Übersichten über weitere type- und autocomplete-Werte, u.a. für die Eingaben von Adressen und Kreditkarten-Daten, findet man unter developer.mozilla.org, developers.google.com bzw. developers.google.com, developers.google.com und html.spec.whatwg.org.
In Kombination können diese auch für komplexere Abschnitte, z.B. für die Eingabe einer Lieferanschrift im Rahmen eines Bestellprozesses, genutzt werden:
<input type="text" autocomplete="shipping street-address" placeholder="Straße" /> <input type="text" autocomplete="shipping postal-code" placeholder="Postleitzahl" /> <input type="text" autocomplete="shipping country" placeholder="Land" />
Wichtig zu beachten ist, dass trotz eines bestimmten type-Wertes der Nutzer in den meisten Fällen beliebige Inhalte eingeben kann. Bei einem input-Feld vom Typ tel wird beispielsweise nicht überprüft, ob tatsächlich eine Telefonnummer eingegeben wurde.