Do czego służy atrybut autocomplete i jakie parametry…

Atrybut autocomplete pozwala przeglądarce na dostarczanie podpowiedzi uzupełniania formularzy. Zwiększa to wygodę użytkowania, oferując zapisane wcześniej dane.

Parametry atrybutu autocomplete dzielą się na dwa typy: ogólne i według typu danych.

Ogólne parametry:

off: Zabrania automatycznego uzupełniania tego pola.
on: Umożliwia automatyczne uzupełnianie tego pola.

Parametry według typu danych (najczęściej używane):

name: Pełne imię użytkownika.
honorific-prefix: Tytuł przed imieniem (np. "Pan", "Pani").
given-name: Imię.
additional-name: Dodatkowe imiona (drugie imię itp.).
family-name: Nazwisko.
honorific-suffix: Tytuł po imieniu (np. "Jr.", "Sr.").
nickname: Pseudonim.
email: Adres e-mail.
username: Nazwa użytkownika.
new-password: Nowe hasło (dla pól tworzenia hasła).
current-password: Obecne hasło (dla pól wprowadzania istniejącego hasła).
one-time-code: Kod jednorazowy (np. do dwuskładnikowego uwierzytelniania).
organization-title: Stanowisko.
organization: Nazwa organizacji.
street-address: Ulica i numer domu.
address-line1: Pierwsza linia adresu.
address-line2: Druga linia adresu.
address-line3: Trzecia linia adresu.
address-level4: Najmniejsza jednostka administracyjna (np. wieś).
address-level3: Trzecia co do wielkości jednostka administracyjna (np. dzielnica).
address-level2: Druga co do wielkości jednostka administracyjna (np. miasto).
address-level1: Największa jednostka administracyjna (np. region, stan).
country: Kraj.
country-name: Nazwa kraju.
postal-code: Kod pocztowy.
cc-name: Imię na karcie kredytowej.
cc-given-name: Imię na karcie kredytowej.
cc-additional-name: Dodatkowe imiona na karcie kredytowej.
cc-family-name: Nazwisko na karcie kredytowej.
cc-number: Numer karty kredytowej.
cc-exp: Data ważności karty kredytowej.
cc-exp-month: Miesiąc ważności.
cc-exp-year: Rok ważności.
cc-csc: Kod bezpieczeństwa karty.
cc-type: Typ karty kredytowej.
transaction-currency: Waluta transakcji.
transaction-amount: Kwota transakcji.
language: Preferowany język.

Parametry mogą również zawierać prefiksy, np. shipping lub billing, wskazując, że są to dane dostawy lub płatności.

Przykład użycia:

<form>
  <label for="name">Imię:</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">Ulica:</label>
  <input type="text" id="street" name="street" autocomplete="shipping street-address">
</form>

Do czego służy atrybut autocomplete i jakie parametry przyjmuje?