Sobes.tech
Junior

Wofür wird das Attribut 'autocomplete' verwendet und welche Parameter kann es annehmen?

sobes.tech KI

Antwort von AI

Das Attribut autocomplete wird verwendet, um dem Browser anzuzeigen, wie die Formularfelder basierend auf früheren Eingaben des Benutzers automatisch ausgefüllt werden sollen. Dies erhöht den Bedienkomfort und die Geschwindigkeit beim Ausfüllen von Formularen.

Hauptparameter:

  • on: Autovervollständigung aktivieren.
  • off: Autovervollständigung deaktivieren.

Neben on und off gibt es eine Reihe vordefinierter Werte, die den Datentyp beschreiben, der ausgefüllt werden soll. Einige davon:

  • name: Vollständiger Name.
  • honorific-prefix: Anrede (z.B. "Herr", "Frau").
  • given-name: Vorname.
  • additional-name: Zweiter Vorname oder Nachname.
  • family-name: Nachname.
  • honorific-suffix: Namenssuffix (z.B. "Jr.").
  • nickname: Spitzname.
  • email: E-Mail-Adresse.
  • username: Benutzername.
  • new-password: Neues Passwort (für Registrierungsformular).
  • current-password: Aktuelles Passwort (für Login-Formular).
  • organization-title: Position.
  • organization: Organisation.
  • street-address: Adresse.
  • address-line1, address-line2, address-line3: Adresszeilen.
  • address-level4, address-level3, address-level2, address-level1: Adressebenen (z.B. Land, Region, Stadt, Bezirk).
  • 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: Zweiter Name auf der Kreditkarte.
  • cc-family-name: Nachname auf der Kreditkarte.
  • cc-number: Kreditkartennummer.
  • cc-exp: Ablaufdatum der Kreditkarte im Format MM/YY.
  • cc-exp-month: Ablaufmonat.
  • cc-exp-year: Ablaufjahr.
  • cc-csc: Sicherheitscode der Kreditkarte (CVV).
  • cc-type: Kartentyp.
  • tel: Telefonnummer.
  • tel-national: Telefonnummer ohne Ländervorwahl.
  • tel-area-code: Ortsvorwahl.
  • tel-local: Telefonnummer ohne Ländervorwahl und Ortsvorwahl.
  • tel-extension: Telefonnummern-Erweiterung.
  • bday: Geburtsdatum.
  • bday-day: Geburtstag.
  • bday-month: Geburtsmonat.
  • bday-year: Geburtsjahr.
  • sex: Geschlecht.
  • url: URL der Homepage.
  • photo: URL des Fotos.

Einige Werte können mit Präfixen kombiniert werden, z.B. shipping oder billing, um die Versand- oder Rechnungsadresse anzugeben.

<input type="text" autocomplete="name" id="name">
<input type="email" autocomplete="email" id="email">
<input type="password" autocomplete="new-password" id="password">
<input type="text" autocomplete="shipping street-address" id="shipping_address">