Quelle anzeigen

Anwendung

Mit Autocomplete teilen Sie dem Browser mit, welche persönliche Angabe ein Eingabefeld erwartet, zum Beispiel Vorname, Strasse oder E-Mail-Adresse. Der Browser kann das Feld dann aus dem gespeicherten Profil der Person ausfüllen (Autofill). Das spart Tipparbeit und erfüllt das Barrierefreiheits-Kriterium WCAG 1.3.5 «Eingabezweck bestimmen».

Die Einstellung erfolgt pro Feld im Formular-Wizard. Es gibt keine automatische Zuordnung: Felder ohne Einstellung bleiben unverändert.

Voraussetzungen

Feldtypen: Text, Textarea, Zahl, Datum, Datum/Zeit, Passwort, HTML5-Feld (E-Mail, Telefon, URL) und PlugIn. Auch Tabellenspalten mit diesen Typen.
Die Person hat im Browser ein Profil mit Adressdaten gespeichert (z.B. Chrome: Einstellungen → Autofill).

Browser bieten Autofill für Adressen in der Regel erst an, wenn mindestens drei zusammengehörige Adressfelder konfiguriert sind (z.B. Strasse, PLZ, Ort). Ein einzelnes Feld reicht meist nicht.

Einstellung im Wizard

Ein Feld konfigurieren

Öffnen Sie das Formular im Wizard und wählen Sie das Feld aus.
Öffnen Sie in der Feldkonfiguration den Abschnitt Autocomplete. Er erscheint nur bei den unterstützten Feldtypen.
Wählen Sie unter Token 1 den Zweck des Feldes aus der Liste (z.B. given-name für den Vornamen).
Für Telefon- und E-Mail-Felder wählen Sie stattdessen Token 2 (z.B. tel) und optional Kontext (z.B. mobile).
Speichern Sie das Formular und prüfen Sie es in der Vorschau.

Einstellungen im Abschnitt Autocomplete

Einstellung	Werte	Beschreibung
Sektionsname (section-)	freier Text, z.B. `liefer`	Fasst Felder zu einer Gruppe zusammen, damit der Browser zwei Adressen im selben Formular auseinanderhält. Der Browser sieht den Wert als `section-liefer`.
Kontext "shipping\|billing"	`shipping`, `billing`	Kennzeichnet Liefer- oder Rechnungsadresse.
Token 1	Liste nach HTML-Standard, siehe unten	Hauptzweck des Feldes. Für die meisten Felder reicht diese Einstellung allein.
Kontext	`home`, `work`, `mobile`, `fax`, `pager`	Nur zusammen mit Token 2: Art des Kontakts.
Token 2	`tel`, `tel-national`, `email`, `impp` u.a.	Für Kontaktfelder (Telefon, E-Mail, Messenger).
webauthn	ja/nein	Nur für Anmeldefelder mit Passkey-Unterstützung. Für Formulare mit Adressdaten nicht nötig.

Anmerkung: Die Einstellungen werden in dieser Reihenfolge zu einem Wert verbunden: Sektionsname, shipping/billing, Token 1, Kontext, Token 2. Leere Einstellungen entfallen.

Häufige Werte für Token 1

Angabe	Token 1
Vollständiger Name	`name`
Vorname	`given-name`
Nachname	`family-name`
Firma	`organization`
Strasse mit Hausnummer	`street-address`
Postleitzahl	`postal-code`
Ort	`address-level2`
Kanton / Region	`address-level1`
Land (ausgeschrieben)	`country-name`
Land (Code, z.B. CH)	`country`
Geburtsdatum	`bday`
Benutzername	`username`
Neues Passwort	`new-password`

Die vollständige Liste finden Sie in der Auswahl des Wizards; sie entspricht dem HTML-Standard. Die E-Mail-Adresse wählen Sie nicht hier, sondern unter Token 2 mit dem Wert email.

Beispiele

Adressblock

Feld	Token 1	Ergebnis im Browser
Strasse	`street-address`	`autocomplete="street-address"`
PLZ	`postal-code`	`autocomplete="postal-code"`
Ort	`address-level2`	`autocomplete="address-level2"`

Zweite Adresse (Lieferadresse) im selben Formular

Feld	Sektionsname	shipping\|billing	Token 1	Ergebnis im Browser
Strasse	`liefer`	`shipping`	`street-address`	`autocomplete="section-liefer shipping street-address"`
PLZ	`liefer`	`shipping`	`postal-code`	`autocomplete="section-liefer shipping postal-code"`

Mobiltelefon

Feld	Kontext	Token 2	Ergebnis im Browser
Mobiltelefon	`mobile`	`tel`	`autocomplete="mobile tel"`

Ein Beispielformular mit allen drei Fällen finden Sie im Showcase: Formular WIDGETS-WCAG, Seite «Autocomplete (Browser-Autofill)».

Bekannte Probleme

Der Browser bietet kein Autofill an

Problem

Die Felder sind konfiguriert, aber beim Klick ins Feld erscheint kein Vorschlag.

Lösung

Prüfen Sie, ob im Browser ein Profil mit Adressdaten gespeichert ist.
Konfigurieren Sie mindestens drei zusammengehörige Felder (z.B. Strasse, PLZ, Ort).
Prüfen Sie in der Vorschau, ob das Feld das Attribut autocomplete trägt (Browser-Entwicklerwerkzeuge, Element untersuchen).

Zwei Adressen werden vermischt

Problem

Beim Ausfüllen der Lieferadresse überschreibt der Browser auch die Hauptadresse.

Lösung

Geben Sie der zweiten Adresse einen eigenen Sektionsnamen (z.B. liefer) und wählen Sie shipping oder billing.

Enter-Taste im Feld

Problem

Browser senden ein Formular ab, wenn in einem Feld Enter gedrückt wird.

Lösung

Kein Handlungsbedarf. JAXForms unterbindet das Absenden per Enter; die Felder verhalten sich wie bisher.

Stand: 21.10.2026