Autofill

Es ist mühsam, die Adresse zum zehnten Mal eingeben zu müssen. Browser und Sie als Entwickler können Nutzern helfen, Daten schneller einzugeben und die erneute Eingabe von Daten zu vermeiden. In diesem Modul erfahren Sie, wie die Autofill-Funktion funktioniert und wie Sie mit autocomplete und anderen Elementattributen dafür sorgen können, dass Browser geeignete Autofill-Optionen anbieten.

Wie funktioniert Autofill?

In der Einführung zum automatischen Ausfüllen haben Sie bereits die Grundlagen des automatischen Ausfüllens kennengelernt. Aber warum bieten Browser Autofill an?

Formulare auszufüllen ist nicht gerade spannend, aber trotzdem etwas, das Sie oft tun. Im Laufe der Zeit füllen Sie viele Formulare aus und geben dabei oft dieselben Daten an. Eine Möglichkeit, Nutzern das Ausfüllen von Formularen zu erleichtern, besteht darin, ihnen die Option zu bieten, Formularfelder automatisch mit zuvor eingegebenen Daten ausfüllen zu lassen. Das ist die Funktion „Automatisches Ausfüllen“.

Woher wissen Browser, welche Daten automatisch ausgefüllt werden sollen? Sehen Sie sich ein Beispiel für ein Formularfeld an.

<label for="name">Name</label>
<input name="name" id="name">

Wenn Sie dieses Formularfeld einreichen, speichern Browser den Wert (die von Ihnen eingegebenen Daten) zusammen mit dem Wert des Attributs name (Name). Einige Browser berücksichtigen auch das Attribut id beim Speichern und Ausfüllen von Daten.

Angenommen, Sie füllen Wochen später ein weiteres Formular auf einer anderen Website aus. Diese Website enthält auch ein Formularfeld mit name="name". Ihr Browser kann jetzt die Autofill-Funktion anbieten, da bereits ein Wert für „name“ gespeichert ist.

Autofill ist besonders nützlich in Formularen, die Sie regelmäßig verwenden, z. B. für die Registrierung und Anmeldung, für Zahlungen, für den Checkout und in Formularen, in denen Sie Ihren Namen oder Ihre Adresse eingeben müssen.

Sie können Browsern helfen, die besten Optionen für das automatische Ausfüllen anzubieten, indem Sie geeignete Werte für das Attribut autocomplete verwenden. Es gibt viele mögliche Werte für autocomplete. Hier ist ein Beispiel für Adressen.

Ist in Ihrem Browser bereits eine Adresse für Sie gespeichert? Sehr gut! Nachdem Sie das erste Feld im Adressformular ausgefüllt haben, zeigt der Browser eine Liste der gespeicherten Adressen an. Sie können eine auswählen und der Browser füllt alle Felder aus, die sich auf die Adresse beziehen. Mit AutoFill lassen sich Formulare schneller und einfacher ausfüllen.

Nicht jedes Adressformular hat dieselben Felder und die Reihenfolge der Felder variiert ebenfalls. Wenn Sie die richtigen Werte für autocomplete verwenden, füllt der Browser die richtigen Werte für ein Formular aus. Es gibt Werte für country, postal-code und viele weitere.

Sorgen Sie dafür, dass Nutzer sich schnell anmelden und sichere Passwörter verwenden können.

Viele Menschen können sich Passwörter nur schwer merken. Das häufigste Passwort ist „123456“, gefolgt von anderen leicht zu merkenden Kombinationen. Wie können Sie sichere und individuelle Passwörter verwenden, ohne sich alle merken zu müssen?

Browser haben integrierte Passwortmanager, die Passwörter für Sie generieren, speichern und ausfüllen. So können Sie Browsern beim automatischen Ausfüllen von E‑Mail-Adressen und Verwalten von Passwörtern helfen.

Sie können autocomplete="email" für ein E‑Mail-Feld verwenden, damit Nutzer die Option zum automatischen Ausfüllen einer E‑Mail-Adresse erhalten.

Da es sich um ein Registrierungsformular handelt, sollten Nutzer nicht die Möglichkeit haben, zuvor verwendete Passwörter einzugeben. Mit autocomplete="new-password" können Sie dafür sorgen, dass Browser die Option zum Generieren eines neuen Passworts anbieten.

Im Anmeldeformular können Sie mit autocomplete="current-password" Browser anweisen, die Option zum Ausfüllen zuvor gespeicherter Passwörter für diese Website anzubieten.

Sie können die 2‑Faktor-Authentifizierung auf vielen Websites einrichten. Zusätzlich zum Passwort wird ein Einmalcode per SMS oder über eine App für die 2‑Faktor-Authentifizierung gesendet.

Wäre es nicht toll, wenn der Code, den Sie in der SMS erhalten haben, von der Bildschirmtastatur vorgeschlagen würde und Sie ihn direkt auswählen könnten, um den Wert einzufügen? In Safari 14 oder höher können Sie dafür autocomplete="one-time-code" verwenden. In Chrome für Android können Sie die WebOTP API verwenden, um dies mit JavaScript zu erreichen.

Weitere Informationen zum Bestätigen von Telefonnummern im Web mit dem SMS-OTP-Formular

Achtung: SMS ist an sich nicht die sicherste Authentifizierungsmethode, da Telefonnummern wiederverwendet und gehackt werden können. Erwägen Sie die Verwendung anderer Methoden zur Zwei-Faktor-Authentifizierung oder Multi-Faktor-Authentifizierung.

Nutzern beim Ausfüllen ihrer Kreditkartendaten helfen

Auf vielen E-Commerce-Websites können Sie Produkte mit Ihrer Kreditkarte kaufen. Websites können Zahlungsplattformen von Drittanbietern verwenden, die eigene Formulare bereitstellen. Wenn Sie jedoch eigene Zahlungsformulare erstellen müssen, achten Sie darauf, dass Nutzer Zahlungsinformationen einfach eingeben können.

Sie können das Attribut autocomplete noch einmal 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 für eine Kreditkartenzahlung erforderlichen Informationen.

Verwenden Sie ein einzelnes Eingabefeld für Nummern wie Kreditkartennummern und Telefonnummern, damit Browser das automatische Ausfüllen anbieten. Verwenden Sie Standardformularelemente wie <select> für die Daten der Zahlungskarte anstelle von benutzerdefinierten Elementen, damit die Funktion „Autocomplete“ verfügbar ist.

Weitere Informationen

Prüfen, ob die AutoFill-Funktion für alle Felder funktioniert

Neben Adressen, Kontoinformationen und Kreditkartendaten gibt es viele weitere Felder, in denen Browser Nutzern mit Autofill helfen können.

Wenn Sie Ihrem Formular ein Telefonfeld hinzufügen, prüfen Sie, ob Sie einen der verfügbaren Werte für die automatische Vervollständigung verwenden können. Haben Sie einen passenden Wert für Ihr Formularfeld gefunden? Fügen Sie es hinzu.

Wenn Sie geeignete Werte für das Attribut autocomplete verwenden, können Browser die beste Option für die automatische Vervollständigung anbieten und Nutzer Formulare schneller ausfüllen.

Browsern mitteilen, dass ein Feld nicht automatisch ausgefüllt werden soll

Sie haben gelernt, wie Autofill funktioniert, wie Sie Browsern bei Autofill helfen können und warum Autofill das Ausfüllen von Formularen für Nutzer erleichtert. Manchmal möchten Sie jedoch nicht, dass Browser die Autofill-Funktion anbieten.

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

Die Autofill-Funktion ist nicht hilfreich, wenn Sie einmalige, eindeutige Werte eingeben, z. B. in ein Feld für einen Einmalcode. Der Wert ist jedes Mal unterschiedlich und der Browser sollte keine Werte speichern oder eine Autofill-Option anbieten. Sie können autocomplete="off" für solche Felder 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, füllen Browser es möglicherweise automatisch mit den restlichen Feldern aus. Wenn Sie die automatische Vervollständigung deaktivieren, wird ein echter Nutzer nicht als Bot identifiziert, weil das Feld automatisch ausgefüllt wird.

Sie sollten das automatische Ausfüllen nur deaktivieren, wenn Sie sicher sind, dass dies Nutzern hilft.

Wissen testen

Wissen zu Autofill testen

Ressourcen

• Das autocomplete-Attribut.
  • Best Practices für Zahlungs- und Adressformulare