Autocomplete im HTML
Das Formular füllt sich selbst
Name, Adresse, Anmeldung: drei Felder, die autocomplete kennen sollte.
Browserdaten richtig zuordnen
Jedes Feld bekommt sein festes Signal
Das sichtbare Label hilft Menschen. Der autocomplete-Wert leitet Browser und Hilfstechnik zum passenden Inhalt.
Im Browser gespeichert
- Name
- Anna Weber
- anna@example.org
- Telefon
- +49 30 123456
- Straße
- Gartenweg 8
- PLZ
- 10115
- Ort
- Berlin
Im Formular zugeordnet
nameemailtelstreet-addresspostal-codeaddress-level2Der Browser darf passende gespeicherte Werte anbieten. Ob und wie er ausfüllt, hängt von Browser, Einstellungen und vorhandenen Daten ab.
Ein Feld, drei Informationen
Keines dieser Signale ersetzt die anderen
- 1label„E-Mail-Adresse“ benennt das Feld sichtbar.
- 2type="email"legt Datentyp und Eingabeverhalten fest.
- 3autocomplete="email"kennzeichnet den Zweck als E-Mail-Adresse der Person.
<label for="mail">E-Mail-Adresse</label>
<input id="mail" name="mail" type="email"
autocomplete="email">Mehrteilige Werte
Die Reihenfolge der Tokens ist Teil der Syntax
Erst kommt optional eine eigene section-*-Gruppe, dann shipping oder billing, zuletzt der eigentliche Feldzweck.
autocomplete="section-checkout shipping street-address"Die häufigen Werte
Wählen Sie nach Inhalt, nicht nach Feldname im Code
- Vollständiger Name
name- E-Mail-Adresse
email- Telefonnummer
tel
- Straßenanschrift
street-address- Postleitzahl
postal-code- Ort oder Stadt
address-level2
- Kontoname
username- Bestehendes Passwort
current-password- Neues Passwort
new-password- Einmalcode
one-time-code
Vollständiges Beispiel
Adresse und Kontozugang im HTML
Alle Felder haben id, name, ein verbundenes label und den passenden Zweck.
<form action="/profil" method="post">
<label for="name">Vollständiger Name</label>
<input id="name" name="name" autocomplete="name">
<label for="mail">E-Mail-Adresse</label>
<input id="mail" name="mail" type="email"
autocomplete="email">
<label for="tel">Telefonnummer</label>
<input id="tel" name="tel" type="tel"
autocomplete="tel">
<label for="street">Straßenanschrift</label>
<input id="street" name="street"
autocomplete="street-address">
<label for="postal">Postleitzahl</label>
<input id="postal" name="postal"
autocomplete="postal-code">
<label for="city">Ort</label>
<input id="city" name="city"
autocomplete="address-level2">
<label for="user">Kontoname</label>
<input id="user" name="user" autocomplete="username">
<label for="old-password">Aktuelles Passwort</label>
<input id="old-password" name="old-password" type="password"
autocomplete="current-password">
<label for="new-password">Neues Passwort</label>
<input id="new-password" name="new-password" type="password"
autocomplete="new-password">
<label for="code">Einmalcode</label>
<input id="code" name="code" inputmode="numeric"
autocomplete="one-time-code">
<button type="submit">Daten speichern</button>
</form>autocomplete ist nicht aria-autocomplete
autocomplete="email"ordnet persönliche Daten einem Feldzweck zu.
aria-autocomplete="list"beschreibt Vorschläge einer Combobox beim Tippen.
So prüfen Sie es
- Hinterlegen Sie eine Testadresse im Browser.
- Öffnen Sie das Formular und wählen Sie den Adressvorschlag.
- Prüfen Sie, ob jeder Wert im richtigen Feld landet.
- Testen Sie Konto- und Einmalcode-Felder separat.
Aus dem Prüfbericht
Zwei Befunde am selben Feld
Kritisch Ein erfundener Wert im Adressformular Regel autocomplete-valid
autocomplete="berghuette" steht in keiner Liste. Nur die festgelegten Werte wie name oder street-address füllen das Feld.
Kritisch Das Namensfeld hat keinen Namen Regel label
Ohne label bleibt offen, was ins Feld gehört. Ein label mit for verbindet den sichtbaren Text mit dem Eingabefeld.
Zum Mitnehmen
Das Formularfeld, korrigiert
Ein gültiger Eingabezweck und ein verbundenes label.
Korrektur in 2 Schritten ansehen
Gültigen Eingabezweck eintragen
Der Browser erkennt nur die festgelegten Werte. name steht für den vollständigen Namen und füllt das Feld aus gespeicherten Daten.
KorrekturvergleichSchritt 1 · HTML Vorher
<input id="observer" autocomplete="berghuette">Nachher
<input id="observer" autocomplete="name">Markierte Zeilen wurden geändert
So prüfen Sie es Tippen Sie den ersten Buchstaben. Der Browser bietet den gespeicherten Namen an.
Dem Feld ein label geben
Ein label mit for macht den sichtbaren Text zum Namen des Felds. Der Text wird zugleich zur Klickfläche für das Eingabefeld.
KorrekturvergleichSchritt 2 · HTML Vorher
<span>Vollständiger Name</span> <input id="observer" autocomplete="name">Nachher
<label for="observer">Vollständiger Name</label> <input id="observer" autocomplete="name">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf den Text. Springt der Cursor ins Feld, ist das label verbunden.