Autofill

Es ist ermüdend, Ihre Adresse zum zehnten Mal erneut eingeben zu müssen. Browser – und Sie können Nutzer Daten schneller eingeben und müssen die Daten nicht erneut eingeben. In diesem Modul erfährst du, wie Autofill funktioniert und wie autocomplete und andere -Elementattributen können Sie sicherstellen, dass Browser geeignete Autofill-Optionen anbieten.

Wie funktioniert Autofill?

In der Einführung zu Autofill haben Sie bereits die Grundlagen Autofill. Aber warum bieten Browser Autofill?

Das Ausfüllen von Formularen ist keine interessante Aktivität, aber Sie machen es trotzdem. oft. Mit der Zeit füllen Sie viele Formulare aus, und häufig geben Sie dieselben Daten ein. Um Nutzenden dabei zu helfen, Formulare schneller auszufüllen, können Sie ihnen die Option anbieten, Formularfelder automatisch mit zuvor eingegebenen Daten ausfüllen. Das ist Autofill.

Woher wissen Browser, welche Daten automatisch ausgefüllt werden müssen? Sehen Sie sich ein Beispielformular an um dies herauszufinden.

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

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

Angenommen, Sie füllen Wochen später ein weiteres Formular auf einer anderen Website aus. Auch auf dieser Website enthält ein Formularfeld mit name="name". Ihr Browser bietet jetzt Autofill, da bereits ein Wert für „name“ gespeichert ist.

Autofill ist besonders nützlich für Formulare, die Sie regelmäßig verwenden, z. B. Registrierungen und Anmeldung, Zahlung, Bezahlvorgang und Formulare, in die Sie Ihren Namen oder Adresse.

Sie können dazu beitragen, dass Browser die besten Autofill-Optionen anbieten, indem Sie entsprechende Werte für das Attribut autocomplete Für autocomplete gibt es viele mögliche Werte. Hier ist ein Beispiel für Adressen.

Ist in Ihrem Browser bereits eine Adresse für Sie gespeichert? Sehr gut! Nachdem Sie mit dem ersten Feld im Adressformular interagieren, zeigt der Browser eine Liste von gespeicherten Adressen. Sie können eine Option auswählen und der Browser füllt alle Felder aus. die sich auf die Adresse beziehen. Mit Autofill können Sie Formulare schnell und einfach ausfüllen.

Nicht jedes Adressformular hat die gleichen Felder. Außerdem variiert die Reihenfolge der Felder. Durch die Verwendung der richtigen Werte für autocomplete wird sichergestellt, die richtigen Werte für ein Formular. Es gibt Werte für country, postal-code, und viele weitere Informationen.

Nutzer können sich schnell anmelden und sichere Passwörter verwenden

Viele Nutzer erinnern sich nicht gut an Passwörter. Die häufigste Passwort lautet "123456", gefolgt von anderen einfach zu merkenden Kombinationen. Wie können Sie und einzigartige Passwörter speichern, ohne sich alle zu merken?

Browser haben integrierte Passwortmanager, mit denen Passwörter erstellt, gespeichert und ausgefüllt werden können. Passwörter für Sie. Browser mit automatisch ausgefüllten E-Mails unterstützen und Passwörter verwalten.

Sie können autocomplete="email" für ein E-Mail-Feld verwenden, damit Nutzer das Autofill erhalten Option für eine E-Mail-Adresse.

Da es sich um ein Anmeldeformular handelt, sollten die Nutzenden nicht die Möglichkeit haben, die Formulare zuvor auszufüllen. verwendete Passwörter. Mit autocomplete="new-password" können Sie dafür sorgen, dass Browser die Möglichkeit anbieten, ein neues Passwort zu erstellen.

Im Anmeldeformular können Sie autocomplete="current-password" verwenden, um Browser die Möglichkeit bieten, zuvor gespeicherte Passwörter für dieses Konto auszufüllen, Website.

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

Wäre es nicht schön, wenn Ihnen der Code aus der SMS vorgeschlagen wird? Bildschirmtastatur gedrückt, und Sie können sie direkt auswählen, um die Wert? In Safari 14 und höher können Sie autocomplete="one-time-code" um dies zu erreichen. In Chrome unter Android können Sie das WebOTP API mit JavaScript.

Weitere Informationen zum Bestätigen von Telefonnummern im Web mit dem OTP-Formular für SMS Best Practices.

Nutzern bei der Eingabe ihrer Kreditkartendaten helfen

Auf vielen E-Commerce-Websites können Sie mit Ihrer Kreditkarte Produkte kaufen. Websites verwenden unter Umständen Zahlungsplattformen von Drittanbietern, die ihre eigenen Formulare bereitstellen. müssen Sie Ihre eigenen Zahlungsformulare erstellen und sicherstellen, dass Nutzer Zahlungsinformationen.

Sie können das Attribut autocomplete wieder verwenden, damit die Browser Autofill-Optionen zu korrigieren.

Es gibt Werte für die Kreditkartennummer cc-number, das Ablaufdatum der Kreditkarte Datum cc-exp und alle anderen Informationen erforderlich für eine Kreditkartenzahlung.

Für Nummern wie Kreditkarten- und Telefonnummern muss eine Eingabe verwendet werden. um sicherzustellen, dass Browser die Autofill-Funktion nutzen können. Verwenden Sie Standardformularelemente für eine <select> für die Zahlungskartendaten anstelle von benutzerdefinierten Elementen, um sicherzustellen, dass die automatische Vervollständigung verfügbar ist.

Weitere Informationen dazu, wie Sie Nutzern helfen können, die erneute Eingabe von Zahlungen zu vermeiden Daten.

Autofill auf alle Felder anwenden

Neben Adressen, Kontoinformationen und Kreditkarteninformationen Es gibt noch viele weitere Felder, in denen Browser Nutzern beim automatischen Ausfüllen helfen können.

Wenn Sie Ihrem Formular ein Telefonnummernfeld hinzufügen, überprüfen Sie, ob Sie eine der verfügbar Werte für die automatische Vervollständigung. Geeigneter Wert für das Formularfeld gefunden? Fügen Sie ihn hinzu.

Geeignete Werte für das Attribut autocomplete helfen Browsern, die beste Autofill-Option und hilft Nutzern, Formulare schneller auszufüllen.

Browser verstehen, dass ein Feld nicht automatisch ausgefüllt werden sollte

Du hast gelernt, wie Autofill funktioniert, wie du Browser mit Autofill unterstützen kannst und warum. Mit Autofill können Nutzer ganz einfach Formulare ausfüllen. Manchmal dass Browser keine 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">

Bei der Eingabe einmaliger, eindeutiger Werte ist das automatische Ausfüllen nicht hilfreich. wie z. B. ein Einmalcodefeld. Der Wert ist jedes Mal unterschiedlich Der Browser sollte keine Werte speichern und keine Autofill-Option anbieten. Sie können autocomplete="off" für solche Felder, um das automatische Ausfüllen zu verhindern.

Ein weiterer Anwendungsfall für autocomplete="off" ist ein Honigtopffeld (siehe vorherige Modul). Auch wenn das Feld nicht angezeigt wird, wird es möglicherweise vom Browser mit den restlichen Feldern automatisch ausgefüllt. Autofill wird aktiviert dass ein echter Nutzer nicht als Bot identifiziert wird, automatisch abgeschlossen.

Sie sollten die Autofill-Funktion nur deaktivieren, wenn Sie sicher sind, dass sie Nutzern hilft.

Wissen testen

Testen Sie Ihr Wissen über Autofill

Ressourcen

• Die automatische Vervollständigung Attribut
  • Zahlungs- und Adressformular am besten Best Practices