Wofür ist das Attribut autocomplete und welche Parameter nimmt es an?

Das Attribut autocomplete ermöglicht es dem Browser, Vorschläge für die Ausfüllung von Formularfeldern bereitzustellen. Es verbessert die Benutzerfreundlichkeit, indem es gespeicherte Daten vorschlägt.

Die Parameter des Attributs autocomplete lassen sich in zwei Typen unterteilen: allgemeine und datentypbezogene.

Allgemeine Parameter:

• off: Verhindert die automatische Vervollständigung für dieses Feld.
• on: Aktiviert die automatische Vervollständigung für dieses Feld.

Datentypbezogene Parameter (häufig verwendet):

• name: Vollständiger Name des Nutzers.
• honorific-prefix: Anrede vor dem Namen (z.B. "Herr", "Frau").
• given-name: Vorname.
• additional-name: Zusätzliche Namen (zweiter Vorname etc.).
• family-name: Nachname.
• honorific-suffix: Nach dem Namen (z.B. "Jr.", "Sr.").
• nickname: Spitzname.
• email: E-Mail-Adresse.
• username: Benutzername.
• new-password: Neues Passwort (für Passwort-Erstellungsfelder).
• current-password: Aktuelles Passwort (für Eingabefelder für bestehende Passwörter).
• one-time-code: Einmaliger Code (z.B. für Zwei-Faktor-Authentifizierung).
• organization-title: Positionsbezeichnung.
• organization: Name der Organisation.
• street-address: Straße und Hausnummer.
• address-line1: Erste Adresszeile.
• address-line2: Zweite Adresszeile.
• address-line3: Dritte Adresszeile.
• address-level4: Kleinste Verwaltungseinheit (z.B. Dorf).
• address-level3: Dritte Verwaltungsebene (z.B. Bezirk).
• address-level2: Zweite Verwaltungsebene (z.B. Stadt).
• address-level1: Größte Verwaltungseinheit (z.B. Bundesland, Bundesstaat).
• country: Land.
• country-name: Name des Landes.
• postal-code: Postleitzahl.
• cc-name: Name auf der Kreditkarte.
• cc-given-name: Vorname auf der Kreditkarte.
• cc-additional-name: Zusätzliche Namen auf der Kreditkarte.
• cc-family-name: Nachname auf der Kreditkarte.
• cc-number: Kreditkartennummer.
• cc-exp: Ablaufdatum der Kreditkarte.
• cc-exp-month: Ablaufmonat.
• cc-exp-year: Ablaufjahr.
• cc-csc: Sicherheitscode der Kreditkarte.
• cc-type: Kartentyp.
• transaction-currency: Transaktionswährung.
• transaction-amount: Transaktionsbetrag.
• language: Bevorzugte Sprache.

Parameter können auch Präfixe enthalten, z.B. shipping oder billing, um anzugeben, dass es sich um Versand- oder Zahlungsdaten handelt.

Beispiel:

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

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

  <label for="street">Straße:</label>
  <input type="text" id="street" name="street" autocomplete="shipping street-address">
</form>