HTML-Autocomplete - Den Browser das Formular verstehen lassen

Ein Formular kann für Menschen vollkommen verständlich und für einen Browser trotzdem mehrdeutig sein. Eine Beschriftung wie „E-Mail“ sagt dem Leser, was einzugeben ist, aber nicht immer, ob das Feld die E-Mail-Adresse des Besuchers oder die einer anderen Person erwartet. Genau dieses kleine Problem soll das HTML-Attribut autocomplete verringern.

Das Attribut wird oft als Schalter zum Ein- oder Ausschalten von Autofill verstanden. Das ist ein unvollständiges Modell. Häufiger beschreibt es die Bedeutung eines Feldes mit einem Vokabular, das Browser und assistive Technologien erkennen können. Der Browser entscheidet danach selbst, ob er einen gespeicherten Wert anbietet. Die Website bleibt für Beschriftungen, Validierung, Datenschutz und Sicherheit auf dem Server verantwortlich.

Autocomplete ist ein Hinweis, kein Versprechen

Der HTML Standard beschreibt autocomplete als Hinweis für den User Agent auf die erwartete Art des Wertes und auf die mögliche automatische Unterstützung. Das Attribut kann bei Textfeldern, Textareas und Selects sowie beim Formularelement verwendet werden.

Die Seite kann nicht befehlen, dass ein Feld sofort ausgefüllt wird, und sie kann die private Autofill-Datenbank des Browsers nicht auslesen. Der Browser kann einen Vorschlag anzeigen, eine Gruppe von Feldern nach einer Profilauswahl ausfüllen oder nichts tun. Einstellungen, Nutzerentscheidung, Feldstruktur und Datentyp beeinflussen das Ergebnis.

Es gibt drei grundlegende Wertformen:

• on erlaubt automatische Vervollständigung ohne einen genauen Datentyp zu benennen.
• off bittet den Browser, gewöhnliche Autocomplete-Daten für dieses Feld oder Formular nicht anzubieten oder zu speichern.
• Eine Tokenliste bezeichnet den erwarteten Zweck, zum Beispiel email oder postal-code.

Bei Feldern für bekannte persönliche Informationen ist eine Tokenliste meist nützlicher als nur on. Sie beschreibt die Bedeutung des Feldes, statt den Browser aus Beschriftung, id oder name raten zu lassen.

Die Bedeutung des Feldes ist wichtiger als die sichtbare Beschriftung

Ein einfaches Kontaktformular kann so aussehen:

<form method="post" action="/contact">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email">
  <button type="submit">Send</button>
</form>

Die sichtbaren Beschriftungen bleiben notwendig. Die Werte von autocomplete ergänzen eine maschinenlesbare Beschreibung. Die MDN-Referenz dokumentiert außerdem given-name, family-name, username, tel, url und organization.

type="email" beschreibt weiterhin den allgemeinen Eingabetyp und ermöglicht passende Validierung. Es beschreibt aber nicht immer den vollständigen Zweck. Die E-Mail des Nutzers und die E-Mail eines Empfängers können denselben Typ, aber unterschiedliche Bedeutungen haben.

Auch die Reihenfolge der Token hat Bedeutung

Autocomplete-Werte sind keine frei erfundenen Bezeichnungen jeder Website. Sie sind eine geordnete Liste definierter Token. Optionale Token können einen Abschnitt oder eine Gruppe wie shipping oder billing bezeichnen, gefolgt von einem Detail-Token.

<label for="shipping-postal">Shipping postal code</label>
<input id="shipping-postal" name="shipping_postal"
       autocomplete="shipping postal-code">
<label for="billing-postal">Billing postal code</label>
<input id="billing-postal" name="billing_postal"
       autocomplete="billing postal-code">

Das Detail-Token ist postal-code; das vorherige Gruppierungs-Token liefert den Kontext. Für wiederholte Adressgruppen kann ein section--Token eine Gruppe benennen. Der Standard verlangt es am Anfang der Liste.

Das Grundprinzip ist einfach: Autocomplete-Metadaten sollen das Datenmodell des Formulars beschreiben, nicht nur seine sichtbare Anordnung.

Passwörter brauchen den richtigen Zweck

Passwortfelder machen die Vorstellung „Autofill abschalten“ besonders oft irreführend. Registrierung und Anmeldung fragen nicht nach demselben Passwortzweck.

<!-- Account creation or password replacement -->
<label for="new-password">New password</label>
<input id="new-password" name="password" type="password"
       autocomplete="new-password">
<!-- Existing account sign-in -->
<label for="current-password">Password</label>
<input id="current-password" name="password" type="password"
       autocomplete="current-password">

new-password teilt dem Browser mit, dass ein vorhandenes gespeichertes Passwort nicht erwartet wird und eine Passwortgenerierung passen kann. current-password bezeichnet ein Anmeldepasswort. Diese Token ersetzen weder Passwort-Hashing noch Transportsicherheit, Session-Schutz oder andere Kontrollen auf dem Server.

Die Sicherheitshinweise von MDN erklären außerdem, warum autocomplete="off" kein universeller Schalter für Passwortmanager ist. Moderne Browser können gespeicherte Anmeldedaten weiterhin anbieten. Eine Website sollte nicht annehmen, dass ein Attribut die Entscheidung des Nutzers im Passwortmanager überschreibt.

Einmalcodes sind etwas anderes als wiederverwendete Daten

Ein einmaliger Bestätigungscode ist kein Profildetail wie Name oder Adresse. Dafür gibt es das Token one-time-code:

<label for="verification-code">Verification code</label>
<input id="verification-code" name="code" inputmode="numeric"
       autocomplete="one-time-code">

Damit wird dem User Agent die erwartete Wertart mitgeteilt. Das authentifiziert den Code nicht, beweist seine Herkunft nicht und macht SMS nicht sicher. Der Server muss den Code weiterhin prüfen, Ablauf und Fehlversuche passend behandeln und den Verifikationsablauf schützen.

Wenn ein Feld tatsächlich nicht mit gewöhnlichen gespeicherten Formulardaten ausgefüllt werden soll, kann off passend sein. Ein Einmalcode ist dafür ein klareres Beispiel als ein Namens- oder Adressfeld. Das Attribut ist aber weiterhin eine Bitte an den User Agent und keine Sicherheitsgrenze.

Barrierefreiheit ist mehr als Komfort

Die W3C-Erklärung zu WCAG 2.2 Success Criterion 1.3.5 unterscheidet eine sichtbare Beschriftung von einem programmatisch bestimmbaren Eingabezweck. Software sowie assistive Technologien sollen den Zweck üblicher Felder für persönliche Informationen erkennen und passend darstellen können.

Das verringert wiederholtes Tippen, ist aber nicht nur bequem. Menschen mit Einschränkungen von Gedächtnis, Kognition, Sprache oder Motorik können von einer konsistenten Beschreibung profitieren. Die festen Token sind außerdem unabhängig von der Sprache einer sichtbaren Beschriftung.

Eine wichtige Nuance: WCAG verlangt nicht, dass ein Browser das Feld ausfüllt. Der Zweck muss bei unterstützter Technologie programmatisch erkennbar sein. Ein Browser darf keinen Vorschlag anzeigen und das Markup kann trotzdem korrekt sein. Eine zufällig richtige Heuristik ist nicht dasselbe wie eine explizite Angabe des Autors.

Was dieses Attribut nicht leisten kann

Autocomplete validiert keine Werte auf dem Server, schützt keine Passwörter oder Codes während der Übertragung, garantiert kein Ausfüllen oder Nichtausfüllen, ersetzt keine Beschriftung und macht keinen veränderten Client vertrauenswürdig. Verwende keine erfundenen Werte, um Autofill zu verwirren. Wenn es ein passendes Standard-Token gibt, sollte es verwendet werden; der Server bleibt die letzte Autorität.

Eine kurze Checkliste

1. Hat jedes Control eine klare sichtbare Beschriftung?
2. Beschreibt type den allgemeinen Eingabetyp?
3. Gibt es ein passendes autocomplete-Token für den tatsächlichen Zweck?
4. Sind wiederholte Adress- oder Kontaktgruppen eindeutig kontextualisiert?
5. Sind Anmeldung, Registrierung und Einmalcode unterschieden?
6. Wird off nur aus einem echten Einmal- oder Datenschutzgrund verwendet?
7. Validiert und schützt der Server weiterhin jeden übermittelten Wert?

Fazit

autocomplete ist ein kleines HTML-Detail an einer interessanten Grenze zwischen Website und Browser. Eine Website kann den Zweck eines Feldes beschreiben, ohne die private Datenspeicherung des Browsers zu übernehmen. Präzise eingesetzt, werden Formulare leichter ausfüllbar und für assistive Technologien verständlicher. Als vermeintlicher Sicherheitsschalter erzeugt das Attribut dagegen falsches Vertrauen.

Der praktische Ansatz lautet: sichtbare Beschriftungen behalten, das passende Standard-Token wählen, verwandte Felder bewusst gruppieren und die endgültige Entscheidung dem Browser überlassen. Ein hilfreiches Formular versucht nicht, jeden User Agent zu kontrollieren, sondern liefert klare Informationen und überlässt Sicherheit den Schichten, die sie tatsächlich durchsetzen können.

References

• HTML Standard: Autofilling form controls, WHATWG.
• autocomplete HTML attribute, MDN Web Docs.
• Understanding Success Criterion 1.3.5: Identify Input Purpose, W3C WAI.
• How to turn off form autocompletion, MDN Web Docs.
• Learn Forms: Autofill, web.dev.