Es ist schon ermüdend, deine Adresse zum zehnten Mal neu eingeben zu müssen. Browser und Sie als Entwickler können Nutzern dabei helfen, Daten schneller einzugeben und Daten nicht noch einmal eingeben zu müssen.
In diesem Modul erfährst du, wie Autofill funktioniert und wie autocomplete und andere Elementattribute dafür sorgen können, dass Browser geeignete AutoFill-Optionen bieten.
Wie funktioniert Autofill?
In der Einführung zu Autofill haben Sie bereits die Grundlagen von Autofill kennengelernt. Aber warum bieten Browser Autofill?
Das Ausfüllen von Formularen ist keine interessante Aktivität, aber Sie tun es dennoch häufig. Im Laufe der Zeit füllen Sie viele Formulare aus und geben häufig dieselben Daten an. Nutzer können Formulare z. B. schneller ausfüllen lassen, indem sie ihnen die Option anbieten, Formularfelder automatisch mit zuvor eingegebenen Daten auszufüllen. Das ist Autofill.
Woher wissen Browser, welche Daten automatisch ausgefüllt werden sollen? Sehen Sie sich ein Beispiel- Formularfeld an, um das herauszufinden.
<label for="name">Name</label>
<input name="name" id="name">
Wenn Sie dieses Formularfeld senden, speichern Browser den Wert (die von Ihnen eingegebenen Daten) zusammen mit dem Wert des Attributs name (Name). Einige Browser berücksichtigen beim Speichern und Ausfüllen von Daten auch das Attribut id.
Angenommen, Wochen später füllen Sie ein weiteres Formular auf einer anderen Website aus. Diese Website enthält außerdem ein Formularfeld mit name="name". Ihr Browser kann jetzt Autofill anbieten, da bereits ein Wert für den Namen gespeichert ist.
Autofill ist besonders nützlich bei Formularen, die du regelmäßig verwendest, z. B. bei Registrierungen und Anmeldungen, Zahlungen, Bezahlvorgängen und Formulare, in die du deinen Namen oder deine Adresse eingeben musst.
Wenn Sie die entsprechenden Werte für das Attribut autocomplete verwenden, können Browser die besten Optionen zum automatischen Ausfüllen anbieten. Für autocomplete gibt es viele mögliche Werte. Hier ein Beispiel für Adressen.
Haben Sie in Ihrem Browser bereits eine Adresse gespeichert? Sehr gut! Nachdem Sie mit dem ersten Feld im Adressformular interagiert haben, zeigt der Browser eine Liste der gespeicherten Adressen an. Sie können eines auswählen. Der Browser füllt dann alle Felder im Zusammenhang mit der Adresse aus. Mit Autofill können Sie Formulare schnell und einfach ausfüllen.
Nicht jedes Adressformular enthält dieselben Felder. Außerdem variiert die Reihenfolge der Felder.
Mit den richtigen Werten für autocomplete wird sichergestellt, dass der Browser die richtigen Werte für ein Formular ausfüllt. Es gibt Werte für country, postal-code und viele weitere.
Dafür sorgen, dass sich Nutzer schnell anmelden und sichere Passwörter verwenden können
Viele Menschen können sich keine Passwörter merken. Das häufigste Passwort ist „123456“, gefolgt von anderen einfach zu merkenden Kombinationen. Wie können Sie sichere und einmalige Passwörter verwenden, ohne sie sich alle zu merken?
Browser haben integrierte Passwortmanager zum Erstellen, Speichern und Ausfüllen von Passwörtern. Hier erfahren Sie, wie Sie Browser beim automatischen Ausfüllen von E-Mails und beim Verwalten von Passwörtern unterstützen können.
Sie können autocomplete="email" für ein E-Mail-Feld verwenden, sodass Nutzer die Option zum automatischen Ausfüllen einer E-Mail-Adresse erhalten.
Da es sich um ein Anmeldeformular handelt, sollten Nutzer keine zuvor verwendeten Passwörter eingeben können. Mit autocomplete="new-password" kannst du dafür sorgen, dass Browser ein neues Passwort generieren können.
Im Anmeldeformular kannst du Browser mithilfe von autocomplete="current-password" anweisen, die Option anzubieten, zuvor gespeicherte Passwörter für diese Website einzugeben.
Du kannst die 2-Faktor-Authentifizierung auf vielen Websites einrichten. Zusätzlich zum Passwort wird ein Einmalcode per SMS oder einer Anwendung für die 2-Faktor-Authentifizierung gesendet.
Wäre es nicht großartig, wenn der Code, den Sie in der SMS-Nachricht erhalten haben, von der Bildschirmtastatur vorgeschlagen würde, und Sie ihn direkt auswählen könnten, um den Wert einzugeben? In Safari 14 oder höher können Sie dafür autocomplete="one-time-code" verwenden. In Chrome unter Android kannst du dafür die WebOTP API verwenden.
Weitere Informationen zum Bestätigen von Telefonnummern im Web findest du in den Best Practices für SMS-OTP-Formulare.
Nutzern bei der Eingabe ihrer Kreditkartendaten helfen
Auf vielen E-Commerce-Websites können Sie mit Ihrer Kreditkarte Produkte kaufen. Websites verwenden möglicherweise Zahlungsplattformen von Drittanbietern, die eigene Formulare bereitstellen. Wenn du jedoch deine eigenen Zahlungsformulare erstellen musst, achte darauf, dass Nutzer Zahlungsinformationen einfach eingeben können.
Sie können wieder das Attribut autocomplete verwenden, damit Browser die richtigen Autofill-Optionen anbieten.
Es gibt Werte für die Kreditkartennummer cc-number, das Ablaufdatum der Kreditkarte (cc-exp) und alle anderen Informationen, die für eine Kreditkartenzahlung erforderlich sind.
Geben Sie Zahlen wie Kreditkartennummern und Telefonnummern nur einmal ein, damit die Autofill-Funktion im Browser aktiviert ist. Verwenden Sie Standardformelemente wie <select> für die Datumsangaben der Zahlungskarte anstelle von benutzerdefinierten Elementen, um sicherzustellen, dass die automatische Vervollständigung verfügbar ist.
Sicherstellen, dass Autofill für alle Felder funktioniert
Neben Adressen, Kontoinformationen und Kreditkartendaten gibt es viele weitere Felder, in denen Browser Nutzern beim automatischen Ausfüllen helfen.
Wenn Sie einem Formular ein Telefonfeld hinzufügen, prüfen Sie, ob Sie einen der verfügbaren Werte für die automatische Vervollständigung verwenden können. Sie haben einen geeigneten Wert für das Formularfeld gefunden? Füge ihn hinzu.
Geeignete Werte für das Attribut autocomplete tragen dazu bei, dass Browser die beste AutoFill-Option bieten und Nutzer Formulare schneller ausfüllen.
Browser verstehen, dass ein Feld nicht automatisch ausgefüllt werden sollte
Sie haben gelernt, wie die Funktion „Autofill“ funktioniert, wie Sie Browser dabei unterstützen können und warum sie Nutzern das Ausfüllen von Formularen erleichtert. Manchmal möchten Sie jedoch nicht, dass Browser die Funktion „Autofill“ anbieten.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
Ein Punkt, an dem Autofill nicht hilfreich ist, ist die Eingabe einmaliger, eindeutiger Werte wie ein einmaliges Codefeld. Der Wert ist jedes Mal anders und der Browser sollte keine Werte speichern oder eine Autofill-Option anbieten. Für solche Felder können Sie autocomplete="off" verwenden, um das automatische Ausfüllen zu verhindern.
Ein weiterer Anwendungsfall für autocomplete="off" ist ein Honeypot-Feld (siehe vorheriges Modul). Auch wenn das Feld nicht sichtbar ist, kann es vom Browser automatisch mit den restlichen Feldern ausgefüllt werden. Wenn die AutoFill-Funktion deaktiviert ist, wird ein echter Nutzer nicht als Bot erkannt, da das Feld automatisch ausgefüllt wird.
Du solltest die Funktion nur deaktivieren, wenn du dir sicher bist, dass die Funktion für Nutzer hilfreich ist.
Wissen testen
Testen Sie Ihr Wissen über Autofill
Welchen Wert für die automatische Vervollständigung sollten Sie für das Passwortfeld in einem Anmeldeformular verwenden?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"