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.
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
Welchen Wert für die automatische Vervollständigung sollten Sie in einem Anmeldeformular im Passwortfeld verwenden?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"