Nachdem Sie das Formularelement und die Interaktivität von Formularen kennengelernt haben, sehen wir uns an, wie Sie Nutzern das erneute Eingeben von Daten ersparen können.
Automatisches Ausfüllen optimal nutzen
Das Ausfüllen von Formularen kann zeitaufwendig sein. Es ist beispielsweise nicht sehr praktisch, wenn Sie Ihre Adresse auf jeder Website, auf der Sie etwas kaufen möchten, immer wieder eingeben müssen.
Hier kann die Funktion „Autofill“ helfen. Sie geben Ihre Adresse nur einmal ein. Ab sofort bietet Ihnen Ihr Browser die Möglichkeit, dieselbe Adresse automatisch in anderen Formularen einzugeben.
Sie sind in eine andere Stadt umgezogen? Keine Sorge, die alte Adresse wird nicht ewig als Option angezeigt. Sie können die von Ihrem Browser gespeicherten Adressdaten bearbeiten, 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, um ein Adressfeld zu identifizieren.
Wie lauten die Werte der Attribute name, type und id?
Ist das Attribut autocomplete für das Formularkontrollelement vorhanden?
Anhand dieser Informationen können Browser die Option zum automatischen Ausfüllen eines Felds mit zuvor eingegebenen Daten desselben Typs anbieten. Browser können sogar anbieten, ein ganzes Formular automatisch auszufüllen.
Browsern bei der Autofill-Funktion helfen
Sehen wir uns an, was Sie tun können, damit Browser die richtigen Autofill-Optionen anbieten.
Vernünftige Attributwerte verwenden
Wie Sie wissen, können Browser den Datentyp anhand der Attribute eines Formularkontrollelements 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 sollen?
Verwenden Sie email als Wert für die Attribute name, id und type.
Drei Hinweise für den Browser, dass es sich um ein E-Mail-Feld handelt.
Das Attribut „autocomplete“
Es gibt noch weitere Beispiele, in denen es für Browser schwierig sein kann, den Datentyp nur anhand der Attribute name, id und type zu ermitteln.
Hier können Sie mit dem Attribut autocomplete helfen.
Haben Sie in dem von Ihnen verwendeten Browser schon einmal einen Namen eingegeben? Der Browser bietet Ihnen wahrscheinlich die Möglichkeit, das Feld in der Demo noch einmal auszufüllen.
Weitere Informationen zur Verwendung von Autocomplete und Autofill finden Sie in einem späteren Modul.
Wissen testen
Ihr Wissen über das automatische Ausfüllen testen
Anhand welcher Attribute wird die automatische Vervollständigung angeboten?
name.type-Attributautocomplete-Attribut