HTML Autocomplete-Attribut
Das HTML autocomplete-Attribut: on/off, benannte Autofill-Tokens wie email und new-password, Sicherheits- und Barrierefreiheitshinweise.
Das autocomplete-Attribut steuert, ob der Browser ein Formularfeld automatisch für den Benutzer ausfüllen darf. Wenn es aktiviert ist und der Benutzer mit der Eingabe beginnt, schlägt der Browser Werte vor, die er aus früheren Übermittlungen gespeichert hat (Namen, E-Mail-Adressen, Postanschriften usw.), sodass das Feld mit einem Tippen oder Klick vervollständigt werden kann.
Diese Seite behandelt die beiden Grundwerte (on und off), die benannten Autofill-Tokens, die dem Browser genau mitteilen, welche Art von Daten ein Feld enthält, wann Autocomplete deaktiviert werden sollte und welche Sicherheits- und Barrierefreiheitskompromisse damit verbunden sind.
Hinweis: Das autocomplete-Attribut funktioniert mit <input>-Typen wie text, search, tel, url, password, email, range und color.
Syntax
Syntax des HTML Autocomplete-Attributs
<input autocomplete="on|off">Statt on/off kann auch ein benanntes Token verwendet werden, das den genauen Feldzweck beschreibt:
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="new-password">| Gilt für | <form> und <input>-Elemente. |
|---|
Beispiel des HTML autocomplete-Attributs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get" autocomplete="on">
<div>
<label for="name">Enter Your Name:</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="phone">Enter Your Phone Number:</label>
<input type="number" id="phone" name="phone-number" />
<br />
</div>
<input type="submit" value="Send" />
</form>
</body>
</html>Beispiel des HTML <form>-Tags mit aktiviertem autocomplete-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
display: block;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" autocomplete="on">
<input type="text" name="name" placeholder="Enter your Name" autofocus />
<input type="text" name="surname" placeholder="Enter your Surname" />
<input type="number" name="age" placeholder="Enter your Age" />
<input type="submit" value="Send" />
</form>
</body>
</html>Benannte Autofill-Tokens verwenden
Statt nur on oder off kann jedem Feld ein Token gegeben werden, das beschreibt, welche Art von Wert es enthält. Der Browser bietet dann die passend gespeicherten Daten an (die E-Mail-Adresse des Benutzers, seine Lieferadresse, ein neu zu generierendes Passwort usw.). Benannte Tokens machen Autofill deutlich präziser als ein generisches on.
Das folgende Beispiel kombiniert ein Adressformular mit einem Anmeldebereich. Beachten Sie autocomplete="email" für das E-Mail-Feld und autocomplete="new-password" für das Passwort bei der Registrierung – damit signalisiert man dem Browser, ein frisch generiertes Passwort vorzuschlagen, statt ein vorhandenes.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label { display: block; margin-top: 10px; }
input { padding: 8px; width: 240px; }
</style>
</head>
<body>
<form action="/form/submit" method="post" autocomplete="on">
<label for="fullname">Full name</label>
<input type="text" id="fullname" name="fullname" autocomplete="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" />
<label for="street">Street address</label>
<input type="text" id="street" name="street" autocomplete="address-line1" />
<label for="city">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" />
<label for="zip">Postal code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" />
<label for="password">Create a password</label>
<input type="password" id="password" name="password" autocomplete="new-password" />
<input type="submit" value="Sign up" />
</form>
</body>
</html>Häufige Autofill-Tokens
Der HTML-Standard definiert mehr als 50 Autofill-Tokens. Die nachfolgende Tabelle listet die am häufigsten verwendeten auf. Die vollständige, maßgebliche Liste findet sich in der WHATWG-Autofill-Spezifikation.
| Token | Feldzweck |
|---|---|
name | Vollständiger Name |
given-name | Vorname |
family-name | Nachname (Familienname) |
nickname | Spitzname oder Anzeigename |
username | Kontoname (Login) |
email | E-Mail-Adresse |
tel | Vollständige Telefonnummer |
street-address | Vollständige Straßenadresse (mehrzeilig) |
address-line1 | Erste Zeile der Straßenadresse |
address-line2 | Zweite Zeile (Wohnung, Suite) |
address-level2 | Stadt oder Gemeinde |
address-level1 | Bundesland, Provinz oder Region |
postal-code | Postleitzahl |
country | Ländercode (z. B. DE) |
country-name | Ländername |
cc-name | Name auf der Zahlungskarte |
cc-number | Zahlungskartennummer |
cc-exp | Ablaufdatum der Karte |
cc-csc | Kartensicherheitscode (CVC/CVV) |
current-password | Bestehendes Passwort (für Login) |
new-password | Neues Passwort (bei Registrierung oder Änderung) |
one-time-code | Einmaliger Bestätigungscode (OTP) |
bday | Vollständiges Geburtsdatum |
Wann (und warum) Autocomplete deaktiviert werden sollte
Meistens sollte Autocomplete aktiviert bleiben, da es Tippaufwand spart und Fehler reduziert. Es gibt einige legitime Gründe, es zu deaktivieren:
- Einmalige und sensible Codes. Felder für Einmalpasswörter, CAPTCHA-Antworten oder andere Werte, die niemals gespeichert werden sollen, kommen dafür infrage. Bei einem OTP-Feld empfiehlt sich
autocomplete="one-time-code"anstelle vonoff, damit Mobilgeräte den Code aus einer SMS vorschlagen können, ohne ihn dauerhaft zu speichern. - Benutzerdefinierte Autofill-Oberfläche. Wenn die App ein eigenes Vorschlag-Dropdown bereitstellt (z. B. eine Stadt- oder Produktsuche mit
<datalist>oder einem JavaScript-Widget), kann das native Autofill des Browsers stören – in diesem Fall darf man es deaktivieren. - Gemeinsam genutzte oder Kiosk-Geräte, Datenschutz. An öffentlichen Terminals möchte man ggf. verhindern, dass der Browser persönliche Daten für den nächsten Benutzer speichert oder vorab ausfüllt.
Achtung: autocomplete="off" ist nur ein Hinweis. Bei Passwortfeldern ignorieren Chrome und Safari ihn häufig, damit ihre integrierten Passwort-Manager weiterhin funktionieren – dies gilt als Sicherheitsmerkmal. Um zu verhindern, dass der Browser ein vorhandenes gespeichertes Passwort vorschlägt, sollte man autocomplete="new-password" am betreffenden Feld verwenden, anstatt off.
Sicherheitshinweis: Das Deaktivieren von Autocomplete macht ein Formular nicht sicherer. Gespeicherte Daten verbleiben im Passwort-Manager des Browsers, und wenn Benutzer gezwungen werden, lange Passwörter von Hand einzugeben, begünstigt das schwache, wiederverwendete Passwörter. Das sicherere Muster ist, Felder mit den richtigen Tokens zu kennzeichnen (current-password, new-password, one-time-code), damit Passwort-Manager und Browser die Daten sinnvoll verwalten.
Barrierefreiheit und UX
Benannte Autofill-Tokens sind ein Barrierefreiheitsmerkmal und nicht nur eine Bequemlichkeit:
- Sie erfüllen das WCAG 2.1 Erfolgskriterium 1.3.5 „Eingabezweck bestimmen", das fordert, dass der Zweck gängiger Formularfelder programmatisch erkennbar ist.
- Sie ermöglichen Passwort-Managern, Anmeldedaten zuverlässig auszufüllen, und helfen mobilen Browsern, die richtige Bildschirmtastatur anzuzeigen.
- Das Deaktivieren von Autocomplete kann eine Barriere für Benutzer mit kognitiven Beeinträchtigungen, motorischen Einschränkungen oder Gedächtnisschwierigkeiten darstellen, die auf gespeicherte Werte angewiesen sind, um Formulare auszufüllen. Es sollte daher nur deaktiviert werden, wenn ein triftiger Grund dafür vorliegt.
Verwandt: autofocus setzt den Cursor beim Laden in ein Feld, und das <input>-Kapitel behandelt die Feldtypen, mit denen diese Tokens zusammen verwendet werden.