Nachdem ich mehr über die formelement und wie Sie ein Formular erstellen interaktiv, Wie können Sie Nutzenden dabei helfen, Daten nicht erneut einzugeben?
Autofill optimal nutzen
Das Ausfüllen von Formularen kann zeitaufwendig sein. Beispielsweise ist es kein gutes Einkaufserlebnis, wenn Sie Ihre Adresse auf jeder Website, auf der Sie etwas kaufen möchten, wiederholt eingeben.
Autofill kann Ihnen dabei helfen. Sie geben Ihre Adresse einmal ein. Ihr Browser bietet Ihnen von nun an die Option, dieselbe Adresse automatisch in andere Formulare einzugeben.
Bist du in eine andere Stadt gezogen? Sie müssen nicht immer die alte Adresse als Option erhalten. Sie können die Adressdaten bearbeiten, die Ihr Browser für Sie gespeichert hat, um sie auf dem neuesten Stand zu halten.
Wie funktioniert Autofill im Browser?
Ein Adressfeld kann auf verschiedenen Websites sehr unterschiedlich aussehen. Woher weiß ein Browser, dass es sich um ein Adressfeld handelt?
Browser verwenden
Heuristiken verwenden,
um ein Adressfeld zu identifizieren.
Wie lauten die Werte der Attribute name, type und id?
Enthält das Formularsteuerelement ein autocomplete-Attribut?
Basierend auf diesen Informationen Browser können die Option anbieten, ein Feld mit zuvor eingegebenen Daten desselben Typs automatisch auszufüllen. Browser können sogar anbieten, ganze Formulare automatisch auszufüllen.
Hilfe für Browser mit Autofill
Sehen wir uns an, wie Sie dafür sorgen können, dass Browser die richtigen Autofill-Optionen anbieten.
Sinnvolle Attributwerte verwenden
Wie Sie wissen, können Browser den Datentyp anhand der Attribute eines Formularsteuerelements ermitteln.
<label for="email">Email</label>
<input type="email" name="email" id="email">
Haben Sie ein Feld, in das Nutzer ihre E-Mail-Adresse eingeben müssen?
Verwenden Sie email als Wert für die Attribute name, id und type.
Drei Hinweise für den Browser, dass dies ein E-Mail-Feld ist.
Das Attribut „Automatische Vervollständigung“
Es gibt andere Beispiele, bei denen Browser den Datentyp immer noch nur schwer über die Attribute name, id und type identifizieren können.
Dabei können Sie das Attribut autocomplete verwenden.
Haben Sie schon einmal einen Namen in den Browser eingegeben, den Sie verwenden? Der Browser wird Ihnen wahrscheinlich die Option anbieten, das Feld in der Demo erneut auszufüllen.
Weitere Informationen zur Verwendung von automatische Vervollständigung und Autofill verwenden.
Wissen testen
Testen Sie Ihr Wissen über Autofill
Welche Attribute wird für Autofill angeboten?
name.typeautocomplete