Ponowne wpisywanie adresu po raz dziesiąty może być męczące. Przeglądarki i Ty
jako programista, może pomóc użytkownikom szybciej wprowadzać dane i unikać ponownego wprowadzania danych.
Z tego modułu dowiesz się, jak działa autouzupełnianie i jak autocomplete
oraz inne
mogą zapewnić, że przeglądarki będą udostępniać odpowiednie opcje autouzupełniania.
Jak działa autouzupełnianie?
We wprowadzeniu do autouzupełniania znasz już podstawowe funkcje autouzupełniania. Ale dlaczego przeglądarki oferują autouzupełnianie?
Wypełnianie formularzy nie jest ciekawą czynnością, ale nadal coś robisz często. Z czasem wypełniasz wiele formularzy i często wpisujesz te same dane. Jednym ze sposobów na ułatwienie użytkownikom szybszego wypełniania formularzy jest umożliwienie im automatycznie wypełniać pola formularza wcześniej wprowadzonymi danymi. To autouzupełnianie.
Skąd przeglądarki wiedzą, które dane mają być automatycznie uzupełniane? Spójrz na przykładowy formularz .
<label for="name">Name</label>
<input name="name" id="name">
Jeśli prześlesz to pole formularza, przeglądarki zapiszą wartość (wprowadzone dane).
wraz z wartością atrybutu name
(name). Niektóre przeglądarki pokazują też
id
podczas zapisywania i uzupełniania danych.
Załóżmy, że kilka tygodni później wypełniasz kolejny formularz w innej witrynie. Ta strona też
zawiera pole formularza z wartością name="name"
. Przeglądarka może teraz oferować autouzupełnianie,
ponieważ wartość nazwy jest już zapisana.
Przydaje się to szczególnie w przypadku regularnie używanych formularzy, takich jak rejestracja czy logowania, płatności, procesu płatności i formularze, w których musisz podać swoje imię i nazwisko adresu.
Aby pomóc przeglądarkom oferować najlepsze opcje autouzupełniania, użyj odpowiednich
dla atrybutu autocomplete
. Parametr autocomplete
może mieć wiele wartości. Oto przykład adresów.
Czy Twoja przeglądarka ma już zapisany adres? Świetnie. Po wejdzie w interakcję z pierwszym polem adresu, przeglądarka wyświetli listę zapisanych adresów. Możesz wybrać jeden z nich, a przeglądarka wypełni wszystkie pola powiązane z adresem. Autouzupełnianie ułatwia wypełnianie formularzy.
Nie każdy formularz adresowy zawiera takie same pola, a ich kolejność jest też różna.
Użycie prawidłowych wartości atrybutu autocomplete
powoduje, że przeglądarka wypełnia
z poprawnymi wartościami. Istnieją wartości dla: country
, postal-code
,
i wiele
więcej.
Zapewnij użytkownikom możliwość szybkiego logowania się i używania bezpiecznych haseł
Wiele osób nie jest dobra w zapamiętywaniu haseł. Najpopularniejszym Hasło to „123456”, a następnie inne łatwe do zapamiętania kombinacje. Jak można użyć Unikalne i bezpieczne, a jednocześnie bezpieczne?
Przeglądarki mają wbudowane menedżery haseł, które umożliwiają generowanie, zapisywanie i uzupełnianie haseł hasła za Ciebie. Zobacz, jak możesz pomóc przeglądarkom dzięki autouzupełnianiu e-maili i zarządzanie hasłami.
Możesz użyć autocomplete="email"
w polu adresu e-mail, aby użytkownicy mogli korzystać z autouzupełniania
dla adresu e-mail.
Jest to formularz rejestracyjny, więc użytkownicy nie powinni mieć możliwości wypełnienia poprzedniego formularza
użytych haseł. Aby zapewnić przeglądarki, możesz użyć autocomplete="new-password"
zaoferować opcję wygenerowania nowego hasła.
Za pomocą autocomplete="current-password"
w formularzu logowania możesz określić,
i umożliwi wpisywanie zapisanych wcześniej haseł w celu
witryny.
Uwierzytelnianie dwuskładnikowe możesz skonfigurować w wielu witrynach. Oprócz hasłem, jest wysyłany SMS z kodem jednorazowym lub aplikacja do uwierzytelniania dwuskładnikowego.
Czy nie byłoby wspaniale, gdyby kod otrzymany w SMS-ie został zasugerowany?
za pomocą klawiatury ekranowej. Można ją kliknąć, aby wypełnić
wartość? W przeglądarce Safari 14 lub nowszej możesz używać
autocomplete="one-time-code"
w osiągnięciu tego celu. W Chrome na Androidzie możesz używać protokołu WebOTP,
API, aby osiągnąć
za pomocą JavaScriptu.
Dowiedz się więcej o weryfikowaniu numerów telefonów w internecie za pomocą formularza SMS z hasłem jednorazowym sprawdzonych metod.
Pomóż użytkownikom wpisać dane karty kredytowej
W wielu witrynach e-commerce można kupować produkty za pomocą karty kredytowej. Witryny mogą korzystać z zewnętrznych platform płatniczych, które udostępniają własne formularze, ale jeśli musisz utworzyć własne formularze płatności, upewnij się, że użytkownicy mogą dane do płatności.
Możesz użyć atrybutu autocomplete
ponownie, aby mieć pewność, że przeglądarki oferują
poprawne opcje autouzupełniania.
Istnieją wartości dotyczące numeru karty kredytowej cc-number
i daty ważności karty
data cc-exp
oraz wszystkie inne informacje
potrzebne
w przypadku płatności kartą kredytową.
Używaj tych samych danych wejściowych dla numerów takich jak numery kart kredytowych i numer telefonu
by mieć pewność, że przeglądarki oferują autouzupełnianie. Używaj standardowych elementów formularza, na przykład
np. <select>
zamiast elementów niestandardowych, aby
upewnić się, że jest dostępne autouzupełnianie.
Dowiedz się więcej o tym, jak pomóc użytkownikom w unikaniu ponownego wpisywania płatności danych.
Sprawdź, czy autouzupełnianie działa w przypadku wszystkich pól
Oprócz adresów, danych konta i danych karty kredytowej jest znacznie więcej pól, w których przeglądarki mogą pomóc użytkownikom w autouzupełnianiu.
Przy dodawaniu pola numeru telefonu do formularza sprawdzania, czy możesz użyć którejś z dostępne wartości do autouzupełniania. Udało Ci się znaleźć odpowiednią wartość w polu formularza? Dodaj.
Używanie odpowiednich wartości atrybutu autocomplete
pomaga przeglądarkom oferować
najlepszą opcję autouzupełniania
i pomaga użytkownikom szybciej wypełniać formularze.
Wyjaśnienie przeglądarkom, że pole nie powinno być automatycznie wypełniane
Wiesz już, jak działa autouzupełnianie, jak możesz pomóc w jego używaniu i dlaczego możesz korzystać z tej funkcji w przeglądarkach. autouzupełnianie ułatwia użytkownikom wypełnianie formularzy. Czasami jednak nie chcesz, aby przeglądarki udostępniały autouzupełnianie.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">
Autouzupełnianie nie jest przydatne podczas wpisywania jednorazowych, niepowtarzalnych wartości.
np. pola jednorazowego kodu. Wartość jest za każdym razem inna, a
przeglądarka nie powinna zapisywać wartości ani oferować opcji autouzupełniania. Za pomocą
autocomplete="off"
dla takich pól, aby zapobiec autouzupełnianiem.
Innym przypadkiem użycia funkcji autocomplete="off"
jest pole „honeypot” (patrz poprzednie
). Mimo że to pole
widoczny, przeglądarki mogą go automatycznie uzupełnić pozostałymi polami. Włączam autouzupełnianie
jest wyłączona, co oznacza, że prawdziwy użytkownik nie zostanie zidentyfikowany jako bot,
automatycznie.
Autouzupełnianie należy wyłączać tylko wtedy, gdy masz pewność, że przyniesie to korzyści użytkownikom.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat autouzupełniania
Jakiej wartości autouzupełniania należy użyć w polu hasła w formularzu rejestracyjnym?
autocomplete="current-password"
autocomplete="new-password"
autocomplete="off"
autocomplete="password"