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.
<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:
- Ein
name
- und/oderid
-Attribut haben - Nachfahren eines
<form>
-Elements sind - 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:
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" undtel-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 folgendenautocomplete
-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, dermediation: '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
<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
- Das
<input>
-Element - Das
<select>
-Element - Das
<textarea>
-Element - Das
<form>
-Element - HTML-Formulare
- Alle globalen Attribute