Sobes.tech
Junior

Do czego służy atrybut 'autocomplete' i jakie parametry może przyjmować?

sobes.tech AI

Odpowiedź od AI

Atrybut autocomplete służy do podpowiadania przeglądarce, jak automatycznie wypełniać pola formularza na podstawie wcześniejszych wpisów użytkownika. To zwiększa wygodę użytkowania i szybkość wypełniania formularzy.

Główne parametry:

  • on: Włącz autouzupełnianie.
  • off: Wyłącz autouzupełnianie.

Oprócz on i off, istnieje wiele zdefiniowanych wartości opisujących typ danych, które mają być wypełnione. Niektóre z nich:

  • name: Pełne imię.
  • honorific-prefix: Tytuł (np. "Pan", "Pani").
  • given-name: Imię.
  • additional-name: Drugie imię lub nazwisko.
  • family-name: Nazwisko.
  • honorific-suffix: Suffix imienia (np. "Jr.").
  • nickname: Pseudonim.
  • email: Adres e-mail.
  • username: Nazwa użytkownika.
  • new-password: Nowe hasło (dla formularza rejestracji).
  • current-password: Obecne hasło (dla logowania).
  • organization-title: Stanowisko.
  • organization: Organizacja.
  • street-address: Adres.
  • address-line1, address-line2, address-line3: Linie adresowe.
  • address-level4, address-level3, address-level2, address-level1: Poziomy adresu (np. kraj, region, miasto, dzielnica).
  • 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: Drugie imię na karcie kredytowej.
  • cc-family-name: Nazwisko na karcie kredytowej.
  • cc-number: Numer karty kredytowej.
  • cc-exp: Data ważności karty w formacie MM/RR.
  • cc-exp-month: Miesiąc ważności.
  • cc-exp-year: Rok ważności.
  • cc-csc: Kod bezpieczeństwa karty (CVV).
  • cc-type: Typ karty.
  • tel: Numer telefonu.
  • tel-national: Numer telefonu bez kodu kraju.
  • tel-area-code: Kod obszaru.
  • tel-local: Numer telefonu bez kodu kraju i obszaru.
  • tel-extension: Rozszerzenie telefonu.
  • bday: Data urodzenia.
  • bday-day: Dzień urodzenia.
  • bday-month: Miesiąc urodzenia.
  • bday-year: Rok urodzenia.
  • sex: Płeć.
  • url: Adres URL strony głównej.
  • photo: URL zdjęcia.

Niektóre wartości mogą być łączone z prefiksami, na przykład shipping lub billing, aby wskazać adres dostawy lub rozliczeniowy.

<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">