HTML-Attribut: autocomplete

Das HTML-Attribut autocomplete ermöglicht es Webentwicklern festzulegen, ob und in welchem Umfang der User-Agent automatisierte Unterstützung beim Ausfüllen von Formularfeldern bieten darf, sowie dem Browser einen Hinweis auf die erwartete Art der Informationen im Feld zu geben.

Es ist verfügbar bei <input>-Elementen, die Text- oder numerische Werte als Eingabe annehmen, <textarea>-Elementen, <select>-Elementen und <form>-Elementen.

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 gibt dem User-Agent einen Hinweis, ob und wie ein Formularfeld vorab ausgefüllt werden soll. Der Attributwert ist entweder das Schlüsselwort off oder on, oder eine geordnete Liste von durch 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, verwendet der Browser das autocomplete-Attribut des dazugehörigen Formulars. Das zugehörige Formular ist entweder das <form>, das zur id passt, die vom form-Attribut des Elements angegeben wird (falls vorhanden), oder, häufiger, das <form>, in dem das Element eingebettet ist.

Hinweis: Um Autovervollständigung zu ermöglichen, müssen User-Agents möglicherweise <input>/<select>/<textarea>-Elemente:

Über ein name- und/oder id-Attribut verfügen
Abkömmlinge eines <form>-Elements sein
Zu einem Formular mit einem submit-Button gehören

Wenn dieselbe Liste von Tokens in mehr als einem Formularfeld verwendet wird, vervollständigt der User-Agent alle Vorkommen des gleichen autocomplete-Wertes mit demselben Datensatz.

Einige Tokens können mehrmals verwendet werden, möglicherweise mit unterschiedlichen erwarteten Werten, wie das Token zip-code in einem Formular, das sowohl Versand- als auch Rechnungsadressen enthält. Das Einfügen mehrerer unterschiedlicher Tokens in eine durch Leerzeichen getrennte Liste führt dazu, dass die zugehörigen Formularfelder eindeutige Autocomplete-Werte erhalten: in diesem Fall autocomplete="shipping zip-code" und autocomplete="billing zip-code".

Einige Autocomplete-Werte müssen möglicherweise mehrfach verwendet werden. Zum Beispiel kann ein Formular mehrere Versandadressen enthalten und daher mehrere Vorkommen von "shipping zip-code" erwarten, während immer noch unterschiedliche Werte verlangt werden. Um den Autocomplete-Wert in diesen Fällen eindeutig zu machen, kann das erste Token in der durch Leerzeichen getrennten Tokenliste ein section-* Token sein, wobei die ersten acht Zeichen des Tokens immer der String "section-" sind, gefolgt von einer alphanumerischen Zeichenfolge. Alle Formularfelder, die das section-*-Token mit derselben alphanumerischen Zeichenfolge haben, gehören zur gleichen benannten Gruppe.

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

Die Quelle der vorgeschlagenen Werte liegt allgemein beim Browser; typischerweise stammen Werte aus in der Vergangenheit vom Benutzer eingegebenen Werten, können jedoch auch aus vorkonfigurierten Werten stammen. Beispielsweise könnte ein Browser dem Benutzer erlauben, seinen Namen, Adresse, Telefonnummer und E-Mail-Adressen für Autovervollständigungszwecke zu speichern. Der Browser kann auch die Möglichkeit bieten, verschlüsselte Kreditkarteninformationen zu speichern, um sie nach einem Authentifizierungsverfahren automatisch zu vervollständigen.

Hinweis: Das autocomplete-Attribut steuert auch, ob Firefox – im Gegensatz zu anderen Browsern – den [dynamischen deaktivierten Zustand und (falls zutreffend) die dynamische Auswahl] (https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) eines <input>-Elements, <textarea>-Elements oder eines gesamten <form> über Seitenladevorgänge hinweg speichert. Die Speichervorrichtung ist standardmäßig aktiviert. Die Einstellung des Wertes des autocomplete-Attributs auf off deaktiviert diese Funktion. Dies funktioniert auch dann, wenn das autocomplete-Attribut normalerweise aufgrund seines type nicht gelten 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 für dieses Feld keinen Wert automatisch eingeben oder auswählen. Es ist möglich, dass das Dokument oder die Anwendung ihre eigene Autovervollständigungsfunktion bietet oder dass Sicherheitsbedenken erfordern, dass der Wert des Feldes nicht automatisch eingegeben wird.

Hinweis: In den meisten modernen Browsern wird durch die Einstellung von autocomplete auf "off" ein Passwortmanager nicht daran gehindert, den Benutzer zu fragen, ob er Benutzernamen und Passwortinformationen speichern möchte oder diese automatisch in das Anmeldeformular einer Website einfügen möchte. Siehe Verwalten der automatischen Ausfüllung für Anmeldefelder.
on: Der Browser darf die Eingabe automatisch vervollständigen. Es werden keine Hinweise auf die Art der im Feld erwarteten Daten gegeben, sodass der Browser nach eigenem Ermessen verfahren kann.
<token-list>: Ein geordnetes Set von durch Leerzeichen getrennten Tokens, bestehend aus Tokens für die Details der automatischen Vervollständigung, die optional von Abschnitts- und entweder Abrechnungs- oder Versand-Gruppierungstokens vorangestellt werden. Telefonnummern, E-Mail-Adressen und Messaging-Protokoll-Tokens werden von einem Token zur Identifizierung der Art des Empfängers vorangestellt.

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

Token-Liste-Tokens

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

Gruppennamen-Token
Gruppierungskennung
Detail-Tokens
Web-Authentifizierungstoken

Benannte Gruppen

Um eine benannte Gruppe von Formularfeldern zu erstellen, kann das optionale section-*-Token verwendet werden. Falls 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 Formularsteuerelementen. Ein Token, dessen erste acht Zeichen die Zeichenfolge "section-" sind, unabhängig von der Groß- und Kleinschreibung, gefolgt von zusätzlichen Zeichen. Alle Formularfelder, die mit demselben Token beginnen, gehören zur benannten Gruppe.

Gruppierungskennung

Ein optionales shipping oder billing Gruppierungsmerkmal

shipping: Das Feld, das durch nachfolgende Tokens identifiziert wird, ist Teil der Versandadresse oder der Kontaktdaten
billing: Das Feld, das durch nachfolgende Tokens identifiziert wird, ist Teil der Rechnungsadresse oder der Kontaktdaten

Detail-Tokens

Jede durch Leerzeichen getrennte Detall-Tokensliste enthält entweder einen Empfängertyp mit digitalen Kontaktdaten in dieser Reihenfolge oder eine durch Leerzeichen getrennte Liste anderer Tokens.

Empfängertyp

Die Tokens, die die Art des Empfängers identifizieren, umfassen:

home: Der Kontakt, der durch nachfolgende Tokens identifiziert wird, ist für den Kontaktieren des Empfängers an seinem Wohnsitz.
work: Der Kontakt, der durch nachfolgende Tokens identifiziert wird, ist für den Kontaktieren des Empfängers bei seiner Arbeit.
mobile: Der Kontakt, der durch nachfolgende Tokens identifiziert wird, ist für den Kontaktieren des Empfängers unabhängig von seinem Standort.
fax: Der Empfänger, der durch nachfolgende Tokens identifiziert wird, ist für ein Faxgerät.
page: Der Empfänger, der durch nachfolgende Tokens identifiziert wird, ist für einen Pager oder Piepser.

Digitale Kontakttokens

Das Token oder die Gruppe von Tokens für Telefonnummern oder die einzelnen Bestandteile einer Nummer, Durchwahlen, E-Mail-Adressen oder Instant Messaging-Protokolle.

tel

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

tel-country-code: Die Landesvorwahl, wie "1" für die Vereinigten Staaten, Kanada und andere Gebiete in Nordamerika sowie Teilen der Karibik.
tel-national: Die gesamte Telefonnummer ohne die Komponenten der Landesvorwahl, einschließlich eines landesinternen Präfixes. Für die Telefonnummer "1-855-555-6502" wäre der Wert dieses Felds "855-555-6502".
tel-area-code: Die Vorwahl, mit gegebenenfalls angewendetem landesinternen Präfix.
tel-local: Die Telefonnummer ohne Landes- oder Vorwahl. Dies kann weiter in zwei Teile aufgeteilt werden, für Telefonnummern, die eine Vermittlungsnummer und dann eine Nummer innerhalb der Vermittlung 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 Code für eine Durchwahl innerhalb der Telefonnummer, wie eine Zimmer- oder Büronummer in einem Hotel oder einer Firma.

email

Eine E-Mail-Adresse.

impp

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

Andere Tokens

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

name

Das Feld erwartet den Wert als vollständigen Namen einer Person. Die Verwendung von name anstelle der Aufteilung des Namens in seine Bestandteile wird generell bevorzugt, da es die Vielfalt der menschlichen Namen und deren Struktur vermeidet; jedoch können Sie die folgenden autocomplete-Werte verwenden, wenn Sie den Namen in seine Bestandteile aufteilen müssen:

honorific-prefix: Der Präfix oder der Titel, wie "Frau", "Herr", "Fräulein", "Dr." oder "Mlle.".
given-name: Der Vorname.
additional-name: Der Zweitname.
family-name: Der Familienname bzw. Nachname.
honorific-suffix: Der Suffix, wie "Jr.", "B.Sc.", "PhD." oder "IV".
nickname: Ein Spitzname oder Benutzername.

username

Ein Benutzername oder Kontoname.

new-password

Ein neues Passwort. Wenn ein neues Konto erstellt oder Passwörter geändert werden, sollte dies für ein Feld "Neues Passwort eingeben" oder "Neues Passwort bestätigen" verwendet werden, im Gegensatz zu einem allgemeinen "Geben Sie Ihr aktuelles Passwort ein" Feld, das möglicherweise vorhanden ist. Dies kann vom Browser sowohl verwendet werden, um versehentliches Ausfüllen eines bestehenden Passworts zu vermeiden, als auch um Unterstützung bei der Erstellung eines sicheren Passworts zu bieten.

current-password

Das aktuelle Passwort des Benutzers.

one-time-code

Ein einmaliges Passwort (OTP) zur Verifizierung der Benutzeridentität, das als zusätzlicher Faktor in einem Anmeldevorgang verwendet wird. Wird meist ein Code sein, der über einen externen Mechanismus wie SMS, E-Mail oder Authentifizierungsanwendung 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 Unternehmens- oder Organisationsname, wie "Acme Widget Company" oder "Girl Scouts of America".

street-address

Eine Straßenadresse. Dies kann mehrere Textzeilen umfassen und sollte den Standort der Adresse innerhalb ihrer zweiten Verwaltungsebene (normalerweise ein Stadt- oder Ortsname) vollständig identifizieren, jedoch nicht den Ortsnamen, 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 vorhanden ist.

address-level4

Die feinste Verwaltungsebene im Adressensystem, in Adressen, die vier Ebenen haben.

address-level3

Die dritte Verwaltungsebene im Adressensystem mit mindestens drei Verwaltungsebenen.

address-level2

Die zweite Verwaltungsebene im Adresssystem mit mindestens zwei Ebenen. In Ländern mit zwei Verwaltungsebenen würde dies typischerweise die Stadt, der Ort oder das Dorf sein, in dem die Adresse liegt.

address-level1

Die erste Verwaltungsebene im Adresssystem. Dies ist typischerweise die Provinz, in der sich die Adresse befindet: In den Vereinigten Staaten wäre es der Staat, in der Schweiz der Kanton, im Vereinigten Königreich die Grafschaft.

country

Ein Ländercode oder Gebietscode.

country-name

Ein Ländername oder Gebietsname.

postal-code

Eine Postleitzahl (in den USA ist dies der PLZ-Code).

cc-name

Der vollständige Name, wie er auf oder mit einem Zahlungsmittel wie einer Kreditkarte gedruckt oder verbunden ist. Der vollständige Name wird normalerweise bevorzugt gegenüber einer Aufteilung des Namens in Einzelteile.

cc-given-name: Ein Vorname, wie auf einem Zahlungsmittel wie einer Kreditkarte angegeben.
cc-additional-name: Ein Mittlerer Name, wie auf einem Zahlungsmittel oder Kreditkarte angegeben.
cc-family-name: Ein Nachname, wie auf einer Kreditkarte angegeben.

cc-number

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

cc-exp

Ein Ablaufdatum eines Zahlungsmittels, typischerweise in der Form "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 Zahlungsmittel; auf Kreditkarten ist dies die dreistellige Prüfnummer auf der Rückseite der Karte.

cc-type

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

transaction-currency

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

transaction-amount

Der Betrag, angegeben in der Währung, die durch transaction-currency angegeben ist, der Transaktion, für ein Zahlungsformular.

language

Eine bevorzugte Sprache, angegeben als gültiger BCP 47 Sprach-Tag.

bday

Ein Geburtsdatum, als komplettes 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 Freitext ohne Zeilenumbrüche.

url

Eine URL, wie eine Startseite oder Unternehmenswebsite, passend zum Kontext der anderen Felder im Formular.

photo

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

Web-Authentifizierungstoken

Mit <input> und <textarea> kann das webauthn-Token zuletzt hinzugefügt werden, um anzugeben, dass der User-Agent öffentliche Schlüsselberechtigungen anzeigen sollte, wenn der Benutzer mit dem Steuerelement interagiert.

webauthn: Passkeys, die von der Web Authentication API generiert werden, wie sie von einem konditionalen navigator.credentials.get() Anruf angefordert werden (d.h. einem, der mediation: 'conditional' enthält). Falls enthalten, ist dies das letzte Token in der durch Leerzeichen getrennten Tokenliste. Weitere Details finden Sie unter Anmeldung mit einem Passkey über Formular-Autovervollständigung.

Beispiele

html

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

Verwaltungsebenen in Adressen

Die vier Verwaltungsebenenfelder (address-level1 bis address-level4) beschreiben die Adresse im Hinblick auf zunehmende Präzision innerhalb des Landes, in dem sich die Adresse befindet. Jedes Land hat sein eigenes System von Verwaltungsebenen und kann die Ebenen in verschiedene Reihenfolgen arrangieren, wenn Adressen geschrieben werden.

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

Flexibilität des Formulardesigns

Da verschiedene Länder ihre Adresse auf unterschiedliche Weise schreiben, mit jedem Feld an unterschiedlichen Stellen innerhalb der Adresse und sogar mit völlig unterschiedlichen und unterschiedlich vielen Feldern, kann es hilfreich sein, wenn Ihre Seite in der Lage ist, auf das Layout zu wechseln, das von Ihren Benutzern erwartet wird, wenn Sie ein Adresseneingabeformular präsentieren, abhängig vom Land, in dem sich die Adresse befindet.

Variationen

Die Verwendung jeder Verwaltungsebene variiert von Land zu Land. Nachfolgend sind einige Beispiele aufgeführt; dies ist nicht als vollständige Liste gedacht.

Vereinigte Staaten

Eine typische Wohnadresse innerhalb der Vereinigten Staaten sieht so aus:

432 Anywhere St Exampleville CA 95555

In den Vereinigten Staaten ist der am wenigsten spezifische Teil der Adresse der Staat, in diesem Fall "CA" (die offizielle US-Postdienst-Abkürzung für "California"). Somit ist address-level1 der Staat, oder "CA" in diesem Fall.

Der zweitwenig spezifische Teil der Adresse ist der Stadtnamen, sodass address-level2 "Exampleville" in dieser Beispieladresse ist.

Adressen in den Vereinigten Staaten verwenden keine Ebenen 3 und höher.

Vereinigtes Königreich

Adresseingabeformulare im Vereinigten Königreich sollten eine oder zwei Adresslevel und eine, zwei oder drei Adresslinien enthalten, je nach Adresse. Eine vollständige Adresse könnte ungefähr so aussehen:

103 Frogmarch Street Upper-Wapping Winchelsea Whereshire TN99 8ZZ

Die Adresslevel sind:

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

Die Postleitzahl ist separat. Beachten Sie, dass Sie im Vereinigten Königreich tatsächlich nur die Postleitzahl und address-line1 verwenden können, um Post erfolgreich zuzustellen, daher sollten sie die einzigen Pflichtangaben sein. Aber in der Regel neigen Menschen dazu, umfassendere Angaben zu machen.

China

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

Der 6-stellige Postcode ist nicht immer erforderlich, wird aber, wenn er bereitgestellt wird, getrennt mit einer Beschriftung 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 Vereinigten Staaten). Zusätzliche Zeilen können verwendet werden, um Gebäudenamen und Zimmernummern anzuzeigen. Der Postcode ist separat. Zum Beispiel:

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

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

address-level1 wird für Präfekturen oder die Metropole Tokio verwendet; "長野県" (Präfektur Nagano) in diesem Fall. address-level2 wird typischerweise für Städte, Bezirke, Städte und Dörfer verwendet; "長野市" (Stadt Nagano) in diesem Fall. "某町 123" ist address-line1, das aus einem Gebietsnamen und einer Grundstücksnummer 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