HTML-Attribut: autocomplete

Das HTML-Attribut autocomplete ermöglicht es Webentwicklern, anzugeben, ob und in welcher Form der User-Agent automatisierte Unterstützung beim Ausfüllen von Formularfeldern bieten darf. Es gibt zudem dem Browser Hinweise darauf, welche Art von Informationen im Feld erwartet werden.

Es ist verfügbar für die <input>-Elemente, die Text- oder numerische Werte als Eingabe akzeptieren, <textarea>-Elemente, <select>-Elemente und <form>-Elemente.

Probieren Sie es aus

<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" type="text" autocomplete="family-name" />

<label for="email">Email:</label>
<input name="email" id="email" type="email" autocomplete="off" />

label {
  display: block;
  margin-top: 1rem;
}

Beschreibung

Das autocomplete-Attribut bietet dem User-Agent einen Hinweis darauf, wie oder ob ein Formularfeld vorab ausgefüllt werden soll. Der Attributwert ist entweder das Schlüsselwort off oder on, oder eine geordnete Liste von mit Leerzeichen getrennten Tokens.

html

<input autocomplete="off" />
<input autocomplete="on" />
<input autocomplete="shipping street-address" />
<input autocomplete="section-user1 billing postal-code" />

Wenn ein <input>, <select> oder <textarea>-Element kein autocomplete-Attribut hat, wird der Browser das autocomplete-Attribut der besitzenden Form des Elements verwenden. Die besitzende Form ist entweder das <form>-Element, das mit der durch das form-Attribut des Elements angegebenen id übereinstimmt (falls vorhanden), oder, häufiger, das <form>, in dem das Element eingebettet ist.

Hinweis: Um Autovervollständigung bereitzustellen, könnten User-Agents verlangen, dass <input>/<select>/<textarea>-Elemente:

Ein name- und/oder id-Attribut haben
Nachkommen eines <form>-Elements sind
Von einer Form mit einem submit-Button besessen werden

Wenn dieselbe Liste von Tokens in mehr als einem Formularelement verwendet wird, wird der User-Agent alle Vorkommen desselben autocomplete-Wertes mit demselben Datenwert autovervollständigen.

Einige Tokens könnten mehrmals mit potenziell unterschiedlichen erwarteten Werten verwendet werden, wie das zip-code-Token in einem Formular, das sowohl Liefer- als auch Rechnungsadressen enthält. Die Aufnahme mehrerer unterschiedlicher Tokens in einer durch Leerzeichen getrennten Liste führt dazu, dass den zugehörigen Formularelementen eindeutige Autocomplete-Werte zugewiesen werden: in diesem Fall autocomplete="shipping zip-code" und autocomplete="billing zip-code".

Einige Autocomplete-Werte müssen möglicherweise mehrmals wiederverwendet werden. Zum Beispiel könnte ein Formular mehrere Lieferadressen enthalten und daher mehrere Vorkommen von "shipping zip-code" erwarten, während dennoch unterschiedliche Werte erwartet werden. Um den Autocomplete-Wert in diesen Fällen eindeutig zu machen, kann das erste Token in der durch Leerzeichen getrennten Liste von Tokens ein section-*-Token sein, wobei die ersten acht Zeichen des Tokens immer der String "section-", gefolgt von einem alphanumerischen String, sind. Alle Formularfelder, die das section-*-Token mit demselben alphanumerischen String erhalten, gehören zur selben benannten Gruppe.

Wenn das autocomplete-Attribut für hidden-Eingabefelder (<input type="hidden">) verwendet wird, muss der Wert eine geordnete Liste von mit Leerzeichen getrennten Tokens sein; die Schlüsselwörter on und off sind nicht erlaubt.

Die Quelle der vorgeschlagenen Werte wird im Allgemeinen vom Browser bestimmt; typischerweise stammen die Werte aus zuvor vom Benutzer eingegebenen Werten, sie können jedoch auch aus vorkonfigurierten Werten stammen. Beispielsweise könnte ein Browser dem Benutzer erlauben, seinen Namen, seine Adresse, Telefonnummer und E-Mail-Adressen für Autovervollständigungszwecke zu speichern. Der Browser könnte auch die Möglichkeit bieten, verschlüsselte Kreditkarteninformationen zu speichern, um diese nach einem Authentifizierungsverfahren automatisch auszufüllen.

Hinweis: Das autocomplete-Attribut steuert auch, ob Firefox — im Gegensatz zu anderen Browsern — den dynamischen deaktivierten Zustand und (falls zutreffend) die dynamische Markierung eines <input>-Elements, <textarea>-Elements oder ganzen <form> über Seitenladungen hinweg beibehält. Die Persistenzfunktion ist standardmäßig aktiviert. Durch Setzen des Wertes des autocomplete-Attributs auf off wird diese Funktion deaktiviert. Dies funktioniert sogar, wenn das autocomplete-Attribut normalerweise aufgrund seines type nicht angewendet werden würde. Siehe Firefox-Bug 654072.

Werte

Der Attributwert ist entweder das Schlüsselwort off oder on, oder eine durch Leerzeichen getrennte <token-list>, die die Bedeutung des Autovervollständigungswertes beschreibt.

off: Der Browser darf diesen Wert nicht automatisch in das Feld eintragen oder auswählen. Es ist möglich, dass das Dokument oder die Anwendung eine eigene Autovervollständigungsfunktion bietet oder Sicherheitsbedenken es erforderlich machen, dass der Wert des Feldes nicht automatisch eingetragen wird.

Hinweis: In den meisten modernen Browsern verhindert das Setzen von autocomplete auf "off" nicht, dass ein Passwort-Manager den Benutzer fragt, ob er Benutzernamen und Passwort speichern möchte, oder diese Werte automatisch in ein Anmeldeformular der Website einträgt. Siehe Verwalten der automatischen Ausfüllung für Anmeldefelder.
on: Der Browser darf die Eingabe automatisch vervollständigen. Es werden keine Hinweise zur erwarteten Art der Daten im Feld gegeben, sodass der Browser sein eigenes Urteil verwenden kann.
<token-list>: Eine geordnete Menge von durch Leerzeichen getrennten Tokens, bestehend aus Autovervollständigungs-Detailtokens, die optional durch Abschnitts- und entweder Rechnungs- oder Versandgruppentokens vorangestellt sind. Telefonnummern, E-Mail-Adressen und Messaging-Protokolltokens werden durch ein Token gekennzeichnet, das den Typ des Empfängers identifiziert.

Weitere ausführliche Informationen finden Sie im WHATWG-Standard.

Token-Listen-Tokens

Die Optionen der <token-list> umfassen, in dieser Reihenfolge:

Gruppenbenennungstoken
Gruppenkennzeichen
Detailtokens
Webautorisierung

Benannte Gruppen

Um eine benannte Gruppe von Formularfeldern zu erstellen, kann das optionale section-*-Token verwendet werden. Wenn vorhanden, muss dieses Token das erste Token in der durch Leerzeichen getrennten Liste von Tokens sein.

section-*: Definiert den Namen für eine Gruppe von Formularelementen. Ein Token, dessen erste acht Zeichen der String "section-", nicht case-sensitiv, gefolgt von zusätzlichen Zeichen sind. Alle Formularelemente, die mit demselben Token beginnen, gehören zur benannten Gruppe.

Gruppenkennzeichen

Ein optionales shipping- oder billing-Gruppenkennzeichen

shipping: Das durch die nachfolgenden Tokens identifizierte Feld gehört zur Versandadresse oder Kontaktinformationen
billing: Das durch die nachfolgenden Tokens identifizierte Feld gehört zur Rechnungsadresse oder Kontaktinformationen

Detailtokens

Jede durch Leerzeichen getrennte Liste von Detailtokens enthält entweder einen Empfängertyp mit digitalen Kontaktinformationen, in dieser Reihenfolge, oder eine durch Leerzeichen getrennte Tokenliste anderer Tokens.

Empfängertyp

Die Tokens, die den Typ des Empfängers identifizieren, umfassen:

home: Der durch die nachfolgenden Tokens identifizierte Kontakttyp dient dazu, den Empfänger an seiner Wohnadresse zu kontaktieren.
work: Der durch die nachfolgenden Tokens identifizierte Kontakttyp dient dazu, den Empfänger an seiner Arbeitsadresse zu kontaktieren.
mobile: Der durch die nachfolgenden Tokens identifizierte Kontakttyp dient dazu, den Empfänger unabhängig von dessen Aufenthaltsort zu kontaktieren.
fax: Der durch die nachfolgenden Tokens identifizierte Empfänger ist ein Faxgerät.
page: Der durch die nachfolgenden Tokens identifizierte Empfänger ist ein Pager oder ein Funkrufempfänger.

Digitale Kontakttokens

Das Token oder die Gruppe von Tokens für Telefonnummern oder deren Komponenten, Durchwahlen, E-Mail-Adressen oder Instant-Messaging-Protokolle.

tel

Eine vollständige Telefonnummer, einschließlich der Landesvorwahl. Wenn Sie die Telefonnummer in ihre Komponenten aufteilen müssen, können Sie diese Werte für die entsprechenden Felder verwenden:

tel-country-code: Die Landesvorwahl, wie "1" für die Vereinigten Staaten, Kanada und andere Gebiete in Nordamerika und Teilen der Karibik.
tel-national: Die gesamte Telefonnummer ohne die Landesvorwahl, einschließlich eines landesinternen Präfixes. Für die Telefonnummer "1-855-555-6502" wäre der Wert dieses Feldes "855-555-6502".
tel-area-code: Die Vorwahl, mit einem landesinternen Präfix, falls zutreffend.
tel-local: Die Telefonnummer ohne Landes- oder Vorwahl. Diese kann weiter in zwei Teile aufgeteilt werden, für Telefonnummern, die eine Vermittlungsnummer und eine nachgelagerte Nummer haben. Für die Telefonnummer "555-6502" verwenden Sie tel-local-prefix für "555" und tel-local-suffix für "6502".

tel-extension

Ein Durchwahlcode innerhalb der Telefonnummer, wie zum Beispiel eine Zimmernummer in einem Hotel oder eine Büronummer in einem Unternehmen.

email

Eine E-Mail-Adresse.

impp

Eine URL für einen Instant-Messaging-Protokoll-Endpunkt, wie xmpp:username@example.net.

Andere Tokens

Wenn das Formularfeld keine Telefonnummer, E-Mail-Adresse oder ein Instant-Messaging-Protokoll ist, wird die durch Leerzeichen getrennte Liste von Tokens nicht durch einen Kontakttyp vorangestellt:

name

Das Feld erwartet den Wert mit dem vollen Namen einer Person. Die Verwendung von name anstelle der Aufteilung in Komponenten wird allgemein bevorzugt, da so die Vielfalt menschlicher Namen und ihre Struktur vermieden wird; wenn Sie jedoch den Namen in seine Komponenten aufteilen müssen, können Sie folgende autocomplete-Werte verwenden:

honorific-prefix: Das Präfix oder der Titel, wie "Mrs.", "Mr.", "Miss", "Ms.", "Dr." oder "Mlle.".
given-name: Der Vorname.
additional-name: Der zweite Vorname.
family-name: Der Nachname.
honorific-suffix: Das Suffix, wie "Jr.", "B.Sc.", "PhD.", "MBASW" oder "IV".
nickname: Ein Spitzname oder Pseudonym.

username

Ein Benutzername oder Kontoname.

new-password

Ein neues Passwort. Beim Erstellen eines neuen Kontos oder Ändern von Passwörtern sollte dies für ein Feld "Geben Sie Ihr neues Passwort ein" oder "Neues Passwort bestätigen" verwendet werden, im Gegensatz zu einem allgemeinen Feld "Geben Sie Ihr aktuelles Passwort ein", das vorhanden sein könnte. Dies könnte vom Browser verwendet werden, um sowohl das versehentliche Ausfüllen eines vorhandenen Passworts zu vermeiden, als auch Unterstützung beim Erstellen eines sicheren Passworts zu bieten.

current-password

Das aktuelle Passwort des Benutzers.

one-time-code

Ein Einmalpasswort (OTP) zur Benutzeridentitätsverifizierung, das als zusätzlicher Faktor im Anmeldefluss verwendet wird. Meistens ist dies ein Code, der über einen außerhalb des Kanals liegenden Mechanismus, wie SMS, E-Mail oder Authentifikator-Anwendung, empfangen wird.

organization-title

Eine Berufsbezeichnung oder der Titel, den eine Person innerhalb einer Organisation hat, wie "Senior Technical Writer", "President" oder "Assistant Troop Leader".

organization

Ein Firmen- oder Organisationsname, wie "Acme Widget Company" oder "Girl Scouts of America".

street-address

Eine Straßenadresse. Diese kann mehrere Textzeilen umfassen und sollte den Standort der Adresse innerhalb der zweiten administrativen Ebene (in der Regel eine Stadt oder Gemeinde) vollständig identifizieren, aber nicht den Stadtnamen, die Postleitzahl oder den Ländernamen enthalten.

address-line1, address-line2, address-line3: Jede einzelne Zeile der Straßenadresse. Diese sollten nur vorhanden sein, wenn die street-address nicht präsent ist.

address-level4

Die feinste Verwaltungsebene in Adressen, die vier Ebenen haben.

address-level3

Die dritte Verwaltungsebene in Adressen mit mindestens drei Verwaltungsebenen.

address-level2

Die zweite Verwaltungsebene in Adressen mit mindestens zwei Ebenen. In Ländern mit zwei Verwaltungsebenen wäre dies in der Regel die Stadt, das Dorf oder eine andere Ortschaft, in der sich die Adresse befindet.

address-level1

Die erste Verwaltungsebene der Adresse. Dies ist in der Regel die Provinz, in der sich die Adresse befindet. In den USA wäre dies der Bundesstaat. In der Schweiz der Kanton. Im Vereinigten Königreich die Grafschaft.

country

Ein Ländercode oder Territoriumscode.

country-name

Ein Ländername oder Territoriumsname.

postal-code

Eine Postleitzahl (in den USA ist dies die ZIP-Code).

cc-name

Der volle Name, wie er auf einem Zahlungsinstrument wie einer Kreditkarte aufgedruckt oder damit verknüpft ist. Die Verwendung eines vollständigen Namensfeldes wird im Allgemeinen bevorzugt, statt den Namen in Teile aufzubrechen.

cc-given-name: Ein Vorname, wie er auf einem Zahlungsinstrument wie einer Kreditkarte angegeben ist.
cc-additional-name: Ein zweiter Vorname, wie er auf einem Zahlungsinstrument oder einer Kreditkarte angegeben ist.
cc-family-name: Ein Nachname, wie er auf einer Kreditkarte angegeben ist.

cc-number

Eine Kreditkartennummer oder eine andere Nummer, die ein Zahlungsmittel identifiziert, wie eine Kontonummer.

cc-exp

Ein Ablaufdatum des Zahlungsmittels, normalerweise im Format "MM/YY" oder "MM/YYYY".

cc-exp-month: Der Monat, in dem das Zahlungsmittel abläuft.
cc-exp-year: Das Jahr, in dem das Zahlungsmittel abläuft.

cc-csc

Der Sicherheitscode für das Zahlungsinstrument; auf Kreditkarten ist dies die dreistellige Prüfziffer auf der Rückseite der Karte.

cc-type

Der Typ des Zahlungsinstruments (wie "Visa" oder "Master Card").

transaction-currency

Die Währung, in der die Transaktion stattfinden soll.

transaction-amount

Der Betrag der Transaktion, angegeben in der durch transaction-currency bestimmten Währung, bei einem Zahlungsformular.

language

Eine bevorzugte Sprache, angegeben als gültiger BCP 47 Sprachcode.

bday

Ein Geburtsdatum, als vollständiges Datum.

bday-day: Der Tag des Monats eines Geburtsdatums.
bday-month: Der Monat des Jahres eines Geburtsdatums.
bday-year: Das Jahr eines Geburtsdatums.

sex

Eine Geschlechtsidentität (wie "Weiblich", "Fa'afafine", "Hijra", "Männlich", "Nicht-binär"), als freiform Text ohne Zeilenumbrüche.

url

Eine URL, wie eine Homepage oder Firmenwebadresse, je nach Kontext der anderen Felder im Formular.

photo

Die URL eines Bildes, das die Person, das Unternehmen oder Kontaktinformationen darstellt, die in den anderen Feldern des Formulars angegeben sind.

Web-Autorisierungstoken

Mit <input>- und <textarea>-Elementen kann das webauthn-Token zuletzt eingefügt werden, um anzuzeigen, dass der User-Agent bei der Interaktion mit dem Kontrollelement öffentliche Schlüsselanmeldungen anzeigen soll.

webauthn Experimentell: Von der Web Authentication API generierte Zugangsschlüssel, wie von einem bedingten navigator.credentials.get()-Aufruf (also einen, der mediation: 'conditional' beinhaltet) angefordert. Wenn eingefügt, ist dies das letzte Token in der durch Leerzeichen getrennten Tokenliste. Weitere Details siehe Anmeldung mit einem Zugangsschlüssel durch Formularautovervollständigung.

Beispiele

html

<div>
  <label for="cc-number">Enter your credit card number</label>
  <input name="cc-number" id="cc-number" autocomplete="off" />
</div>

Administrative Ebenen in Adressen

Die vier administrativen Ebenenfelder (address-level1 bis address-level4) beschreiben die Adresse in Bezug auf zunehmende Genauigkeit innerhalb des Landes, in dem die Adresse liegt. Jedes Land hat sein eigenes System von Verwaltungsebenen und kann die Ebenen in unterschiedlichen Reihenfolgen anordnen, wenn Adressen geschrieben werden.

address-level1 repräsentiert immer die breiteste Verwaltungseinheit; es ist der wenig spezifischste Teil der Adresse, abgesehen vom Ländernamen.

Flexibilität des Formularlayouts

Da verschiedene Länder ihre Adressen auf verschiedene Weise schreiben, mit jedem Feld an unterschiedlichen Stellen innerhalb der Adresse und sogar unterschiedlichen Sets und Anzahlen von Feldern, kann es hilfreich sein, wenn Ihre Website in der Lage ist, bei Präsentation eines Adresseneingabeformulars in das vom Benutzer erwartete Layout umzuschalten, gemäß dem Land, in dem sich die Adresse befindet.

Varianten

Die Art und Weise, wie jede Verwaltungsebene genutzt wird, variiert von Land zu Land. Hier sind einige Beispiele; dies ist nicht als erschöpfende Liste gedacht.

Vereinigte Staaten

Eine typische Heimadresse in den Vereinigten Staaten sieht so aus:

432 Anywhere St Exampleville CA 95555

In den Vereinigten Staaten ist der wenig spezifischste Teil der Adresse der Bundesstaat, in diesem Fall "CA" (die offizielle Abkürzung des US-Postdienstes für "Kalifornien"). Daher ist address-level1 der Bundesstaat, oder "CA" in diesem Beispiel.

Der zweitwenig spezifische Teil der Adresse ist der Stadt- oder Ortsname, so dass address-level2 in diesem Beispiel "Exampleville" ist.

US-Adressen verwenden keine Stufen 3 und höher.

Vereinigtes Königreich

Adresseneingabeformulare im Vereinigten Königreich sollten ein oder zwei Adresslevels und eine, zwei oder drei Adresslinien enthalten, abhängig von der Adresse. Eine vollständige Adresse würde so aussehen:

103 Frogmarch Street Upper-Wapping Winchelsea Whereshire TN99 8ZZ

Die Adresslevels sind:

address-level1: Die Grafschaft — "Whereshire" in diesem Fall.
address-level2: Die Poststadt — "Winchelsea" in diesem Fall.
address-line2: Der Ortsteil — "Upper-Wapping" in diesem Fall.
address-line1: Die Haus-/Straßenangaben — "103 Frogmarch Street".

Die Postleitzahl ist separat. Beachten Sie, dass Sie tatsächlich nur die Postleitzahl und address-line1 verwenden können, um Post im Vereinigten Königreich erfolgreich zuzustellen, also sollten dies die einzigen obligatorischen Elemente sein, aber normalerweise neigen Menschen dazu, mehr Details bereitzustellen.

China

China kann bis zu drei Verwaltungsebenen verwenden: die Provinz, die Stadt und den Bezirk.

Der sechsstellige Postcode ist nicht immer notwendig, aber wenn er angegeben wird, wird er separat mit einer Bezeichnung zur Klarheit platziert. Zum Beispiel:

北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元邮编：100005

Japan

Eine Adresse in Japan wird typischerweise in einer Zeile geschrieben, in einer Reihenfolge von den am wenigsten spezifischen zu den spezifischeren Teilen (in umgekehrter Reihenfolge zu den USA). Es gibt zwei oder drei administrative Ebenen in einer Adresse. Eine zusätzliche Linie kann verwendet werden, um Gebäudenamen und Raumnummern anzuzeigen. Der Postcode ist separat. Zum Beispiel:

〒 381-0000 長野県長野市某町 123

"〒" und die folgenden sieben Ziffern zeigen den Postcode an.

address-level1 wird für Präfekturen oder die Präfektur Tokyo verwendet; "長野県" (Präfektur Nagano) ist in diesem Fall gegeben. address-level2 wird typischerweise für Städte, Landkreise, Dörfer und Gemeinden verwendet; "長野市" (Stadt Nagano) in diesem Fall. "某町 123" ist address-line1, welches aus einem Gebietsnamen und einer Losnummer besteht.

Spezifikationen

Specification
HTML # attr-form-autocomplete
HTML # attr-fe-autocomplete

Das <input>-Element
Das <select>-Element
Das <textarea>-Element
Das <form>-Element
HTML-Formulare
Alle globalen Attribute