HTML-Attribut: autocomplete

Das HTML-Attribut autocomplete ermöglicht es Webentwicklern, anzugeben, welche Berechtigung der User Agent hat, um automatisierte Unterstützung beim Ausfüllen von Formularfeldern zu bieten, sowie die Art der erwarteten Informationen im Feld an den Browser weiterzugeben.

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

Probieren Sie es aus

Beschreibung

Das autocomplete-Attribut gibt dem User Agent einen Hinweis, wie oder ob ein Formularsteuerfeld 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 zugehörigen Formulars. Das zugehörige Formular ist entweder das <form>, das mit der im form-Attribut angegebenen id übereinstimmt (falls vorhanden), oder, häufiger, das <form>, in das das Element eingebettet ist.

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

  1. Ein name- und/oder id-Attribut haben
  2. Nachfahren eines <form>-Elements sind
  3. Zu einem Formular gehören, das einen submit-Button beinhaltet

Wenn dieselbe Liste von Tokens in mehr als einem Formularsteuerfeld verwendet wird, vervollständigt der User-Agent alle Vorkommen desselben autocomplete-Werts mit demselben Datenwert.

Einige Tokens können mehr als einmal mit potenziell unterschiedlichen erwarteten Werten verwendet werden, wie das zip-code-Token in einem Formular, das sowohl Liefer- als auch Rechnungsadressen enthält. Das Einbeziehen mehrerer verschiedener Tokens in eine durch Leerzeichen getrennte Liste führt dazu, dass die zugehörigen Formularsteuerfelder eindeutige Autovervollständigungswerte 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 Lieferadressen und somit mehrere Vorkommen von "shipping zip-code" enthalten, 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 ein section-*-Token sein, wobei die ersten acht Zeichen des Tokens immer die Zeichenfolge "section-" sind, gefolgt von einer alphanumerischen Zeichenfolge. Alle Formularfelder, die das section-*-Token mit derselben alphanumerischen Zeichenfolge haben, gehören zur selben benannten Gruppe.

Wenn das autocomplete-Attribut auf hidden-Input-Elementen (<input type="hidden">) eingebettet ist, 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 im Allgemeinen im Ermessen des Browsers; typischerweise stammen die Werte aus vergangenen Eingaben des Benutzers, sie können jedoch auch aus vorkonfigurierten Werten stammen. Zum Beispiel könnte ein Browser den Benutzer seine Namen, Adresse, Telefonnummer und E-Mail-Adressen für Autovervollständigungszwecke speichern lassen. Der Browser kann auch die Möglichkeit bieten, verschlüsselte Kreditkarteninformationen zu speichern, um sie nach einem Authentifizierungsverfahren automatisch auszufüllen.

Hinweis: Das autocomplete-Attribut steuert auch, ob Firefox — anders als andere Browser — den dynamischen deaktivierten Zustand und (falls zutreffend) die dynamische Aktivierung eines <input>-Elements, <textarea>-Elements oder eines gesamten <form> über Seitenladevorgänge hinweg speichert. Die Speicherfunktion ist standardmäßig aktiviert. Durch Setzen des Werts des autocomplete-Attributs auf off wird diese Funktion deaktiviert. Dies funktioniert selbst dann, wenn das autocomplete-Attribut normalerweise aufgrund seines type nicht zutreffen würde. Weitere Informationen finden Sie in 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ändigungswerts beschreibt.

off

Der Browser darf nicht automatisch einen Wert für dieses Feld eingeben oder auswählen. Es ist möglich, dass das Dokument oder die Anwendung eine eigene Autovervollständigungsfunktion bietet oder dass Sicherheitsbedenken erfordern, dass der Wert des Feldes nicht automatisch eingetragen wird.

Hinweis: In den meisten modernen Browsern wird das Einstellen von autocomplete auf "off" den Passwort-Manager nicht daran hindern, den Benutzer zu fragen, ob er Benutzername- und Passwortinformationen speichern möchte, oder diese Werte automatisch in einem Anmeldeformular der Website auszufüllen. Siehe Verwaltung der automatischen Eingabe für Anmeldefelder.

on

Der Browser darf die Eingabe automatisch ausfüllen. Es werden keine Richtlinien bezüglich der Art der im Feld erwarteten Daten gegeben, sodass der Browser seinen eigenen Ermessen nutzen kann.

<token-list>

Ein geordnetes Set aus Leerzeichen-getrennten Tokens, bestehend aus Autovervollständigungsdetail-Tokens, denen optionale Abschnitts- und entweder Rechnungs- oder Versandgruppierungs-Tokens vorausgehen. Telefonnummern, E-Mail-Adressen und Messaging-Protokoll-Tokens gehen ein Token voraus, das den Empfängertyp identifiziert.

Weitere detaillierte Informationen finden Sie im WHATWG Standard.

Tokenlisten-Tokens

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

  1. Benennungs-Token für Gruppen
  2. Gruppierungs-Identifikator
  3. Detail-Tokens
  4. Web-Authentifizierungstoken

Benannte Gruppen

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

section-*

Definiert den Namen für eine Gruppe von Formularsteuerelementen. Ein Token, dessen erste acht Zeichen die Zeichenfolge "section-" sind, ohne Rücksicht auf Groß- und Kleinschreibung, gefolgt von zusätzlichen Zeichen. Alle Formularsteuerelemente, die mit demselben Token beginnen, gehören zur benannten Gruppe.

Gruppierungs-Identifikator

Ein optionaler Gruppierungs-Identifikator shipping oder billing.

shipping

Das Feld, das durch darauffolgende Tokens identifiziert wird, gehört zur Lieferadresse oder den Kontaktinformationen.

billing

Das Feld, das durch darauffolgende Tokens identifiziert wird, gehört zur Rechnungsadresse oder den Kontaktinformationen.

Detail-Tokens

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

Empfängertyp

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

home

Die durch nachfolgende Tokens identifizierten Kontaktdaten sind für den Kontakt des Empfängers in seiner Wohnung.

work

Die durch nachfolgende Tokens identifizierten Kontaktdaten sind für den Kontakt des Empfängers an seinem Arbeitsplatz.

mobile

Die durch nachfolgende Tokens identifizierten Kontaktdaten sind für den Kontakt des Empfängers unabhängig von seinem Standort.

fax

Der durch nachfolgende Tokens identifizierte Empfänger ist für ein Faxgerät.

page

Der durch nachfolgende Tokens identifizierte Empfänger ist für einen Pager oder Piepser.

Digitale Kontakt-Tokens

Das Token oder die Gruppe von Tokens für Telefonnummern oder die Komponententeile einer Telefonnummer, Telefonnummernerweiterungen, E-Mail-Adressen oder Instant-Messaging-Protokolle.

tel

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

tel-country-code

Der Ländervorwahl, wie "1" für die Vereinigten Staaten, Kanada und andere Gebiete in Nordamerika und Teilen der Karibik.

tel-national

Die gesamte Telefonnummer ohne den Ländervorwahl, einschließlich einer landesspezifischen Präfix. Für die Telefonnummer "1-855-555-6502" wäre der Wert dieses Feldes "855-555-6502".

tel-area-code

Die Ortsvorwahl, mit angewendetem landesspezifischem Präfix, falls zutreffend.

tel-local

Die Telefonnummer ohne Land- oder Ortsvorwahl. Dies kann in zwei Teile weiter 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 Telefonanschlusscode innerhalb der Telefonnummer, wie eine Zimmer- oder Suitenummer in einem Hotel oder eine Bürodurchwahl in einem Unternehmen.

email

Eine E-Mail-Adresse.

impp

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

Andere Tokens

Wenn das Formularfeld keine Telefonnummer, E-Mail-Adresse oder Instant-Messaging-Protokoll ist, geht der durch Leerzeichen getrennten Tokenliste kein Kontakttyp voraus:

name

Das Feld erwartet, dass der Wert der vollständige Name einer Person ist. Es wird im Allgemeinen bevorzugt, name zu verwenden, anstatt den Namen in seine Bestandteile zu zerlegen, da dies den Umgang mit der Vielfalt menschlicher Namen und deren Struktur vermeidet; wenn Sie jedoch müssen, können Sie die folgenden autocomplete-Werte verwenden, um den Namen in seine Komponenten zu zerlegen:

honorific-prefix

Der Präfix oder Titel, wie "Frau", "Herr", "Fräulein", "Ms.", "Dr." oder "Mlle.".

given-name

Der Vorname.

additional-name

Der zweite Vorname.

family-name

Der Nachname.

honorific-suffix

Der Suffix, wie "Jr.", "B.Sc.", "PhD.", "MBASW" oder "IV".

nickname

Ein Spitzname oder Pseudonym.

username

Ein Benutzername oder Kontoname.

new-password

Ein neues Passwort. Bei der Erstellung eines neuen Kontos oder beim Ändern von Passwörtern sollte dies für ein Feld "Ihr neues Passwort eingeben" oder "Neues Passwort bestätigen" verwendet werden, im Gegensatz zu einem allgemeinen Feld "Ihr aktuelles Passwort eingeben", das möglicherweise vorhanden ist. Dies kann vom Browser sowohl verwendet werden, um zu vermeiden, versehentlich ein bestehendes Passwort auszufüllen, als auch um bei der Erstellung eines sicheren Passworts zu helfen.

current-password

Das aktuelle Passwort des Benutzers.

one-time-code

Ein Einmalpasswort (OTP) zur Verifizierung der Benutzeridentität, das als zusätzlicher Faktor in einem Anmeldedurchlauf verwendet wird. Meistens ist dies ein Code, der über einen außerkapazitiven Mechanismus wie SMS, E-Mail oder Authentifikator-App empfangen wird.

organization-title

Ein Berufstitel oder der Titel einer Person innerhalb einer Organisation, wie "Senior Technischer Redakteur", "Präsident" oder "Assistierender Gruppenleiter".

organization

Ein Firmen- oder Organisationsname, wie "Acme Widget Company" oder "Pfadfinderinnen von Amerika".

street-address

Eine Straßenadresse. Dies kann mehrere Textzeilen umfassen und sollte den Ort der Adresse innerhalb ihrer zweiten Verwaltungsebene (typischerweise eine Stadt oder ein Ort) vollständig identifizieren, sollte jedoch nicht den Stadtnamen, die Postleitzahl oder den Ländernamen beinhalten.

address-line1, address-line2, address-line3

Jede einzelne Zeile der Straßenadresse. Diese sollten nur vorhanden sein, wenn street-address nicht vorhanden 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 dieser. In Ländern mit zwei Verwaltungsebenen wäre dies typischerweise die Stadt, der Ort, das Dorf oder eine andere Lokalität, in der sich die Adresse befindet.

address-level1

Die erste Verwaltungsebene in der Adresse. Dies ist typischerweise die Provinz, in der sich die Adresse befindet. In den Vereinigten Staaten wäre dies der Staat. In der Schweiz das Kanton. Im Vereinigten Königreich die Poststadt.

country

Ein Länder- oder Gebietscode.

country-name

Ein Länder- oder Gebietsname.

postal-code

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

cc-name

Der vollständige Name, wie er auf oder in Verbindung mit einem Zahlungsmittel wie einer Kreditkarte gedruckt ist. Die Verwendung eines vollständigen Namensfelds wird typischerweise über das Aufbrechen des Namens in Teile bevorzugt.

cc-given-name

Ein Vorname, wie er auf einem Zahlungsmittel wie einer Kreditkarte angegeben ist.

cc-additional-name

Ein zweiter Vorname, wie er auf einem Zahlungsmittel oder einer Kreditkarte angegeben ist.

cc-family-name

Ein Nachname, wie auf einer Kreditkarte angegeben.

cc-number

Eine Kreditkartennummer oder andere Nummer zur Identifizierung einer Zahlungsmethode, wie eine Kontonummer.

cc-exp

Ein Ablaufdatum der Zahlungsmethode, typischerweise im Format "MM/JJJJ" oder "MM/YYYY".

cc-exp-month

Der Monat, in dem die Zahlungsmethode abläuft.

cc-exp-year

Das Jahr, in dem die Zahlungsmethode abläuft.

cc-csc

Der Sicherheitscode für das Zahlungsmittel; auf Kreditkarten ist dies die 3-stellige Prüfziffer 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 durch transaction-currency spezifizierten Währung, der Transaktion für ein Zahlungsformular.

language

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

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 kostenloser Text ohne Zeilenumbrüche.

url

Eine URL, wie eine Homepage oder die Firmenwebsite-Adresse, wie es im Kontext der anderen Felder im Formular angemessen ist.

photo

Die URL eines Bildes, das die Person, das Unternehmen oder die Kontaktinformationen repräsentiert, die in den anderen Feldern im Formular angegeben sind.

Web-Authentifizierungstoken

Mit <input> und <textarea> kann das webauthn-Token zuletzt hinzugefügt werden, um anzuzeigen, dass der User Agent öffentliche Schlüsselanmeldeinformationen anzeigen sollte, wenn der Benutzer die Kontrolle verwendet.

webauthn Experimentell

Passkeys, die von der Web Authentication API generiert werden, wie von einem bedingten navigator.credentials.get() Aufruf (z. B. einem, der mediation: 'conditional' enthält) angefordert. Wenn hinzugefügt, ist dies das letzte Token in der durch Leerzeichen getrennten Tokenliste. Siehe Anmelden mit einem Passkey durch Formular-Autofill für mehr Details.

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 Verwaltungsebenen-Felder (address-level1 bis address-level4) beschreiben die Adresse in Bezug auf zunehmende Präzision innerhalb des Landes, in dem die Adresse gelegen ist. Jedes Land hat sein eigenes System von Verwaltungsebenen und kann die Ebenen in unterschiedlichen Reihenfolgen anordnen, wenn Adressen geschrieben werden.

address-level1 stellt immer die breiteste Verwaltungsteilung dar; es ist der am wenigsten spezifische Teil der Adresse, abgesehen vom Ländernamen.

Flexibilität des Formularlayouts

Da verschiedene Länder ihre Adressen auf unterschiedliche Weise schreiben, mit jedem Feld an unterschiedlichen Stellen innerhalb der Adresse, und selbst unterschiedlichen Mengen an Feldern insgesamt, kann es hilfreich sein, wenn Ihre Webseite, wann immer möglich, in der Lage ist, zu dem vom Benutzer erwarteten Layout zu wechseln, wenn sie ein Adresseneingabeformular präsentiert, gemäß dem Land, in dem die Adresse liegt.

Variationen

Die Art und Weise, wie jede Verwaltungsebene verwendet wird, variiert von Land zu Land. Nachfolgend sind einige Beispiele; 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 Abkürzung des US-Postdienstes für "California"). Daher ist address-level1 der Staat oder "CA" in diesem Fall.

Der zweitleast-spezifische Teil der Adresse ist der Stadt- oder Ortsname, also ist address-level2 "Exampleville" in diesem Beispiel.

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

Vereinigtes Königreich

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

103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

Die Adresseneinnahmen sind:

  • address-level1: Die Poststadt — in diesem Fall "Winchelsea".
  • address-line2: Der Ort — in diesem Fall "Upper-Wapping".
  • address-line1: Die Haus/Straßen-Details — "103 Frogmarch Street".

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

China

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

Der 6-stellige Postleitzahl wird nicht immer benötigt, aber wenn er geliefert wird, wird er separat mit einem Label zur Klarstellung platziert. Zum Beispiel:

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

Japan

Eine Adresse in Japan wird typischerweise in einer Zeile geschrieben, in einer Reihenfolge vom am wenigsten spezifischen zu den spezifischen Teilen (in umgekehrter Reihenfolge zu den Vereinigten Staaten). Es gibt zwei oder drei Verwaltungsebenen in einer Adresse. Eine zusätzliche Zeile kann verwendet werden, um Gebäudenamen und Raumnummern anzuzeigen. Die Postleitzahl ist separat. Zum Beispiel:

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

"〒" und die folgende siebenstellige Zahl zeigt die Postleitzahl an.

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

Spezifikationen

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

Browser-Kompatibilität

html.elements.form.autocomplete

BCD tables only load in the browser

html.elements.input.autocomplete

BCD tables only load in the browser

html.elements.select.autocomplete

BCD tables only load in the browser

html.elements.textarea.autocomplete

BCD tables only load in the browser

Siehe auch