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