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).
Tipp: Mehrere Felder konfigurieren
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-namefü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
autocompleteträ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