Ponowne wpisywanie adresu po raz dziesiąty jest męczące. Przeglądarki i Ty jako deweloper możesz pomóc użytkownikom szybciej wprowadzać dane i uniknąć ich ponownego wpisywania.
Z tego modułu dowiesz się, jak działa autouzupełnianie i jak atrybuty elementów autocomplete i inne mogą zapewnić, że przeglądarki będą oferować odpowiednie opcje autouzupełniania.
Jak działa autouzupełnianie?
W wprowadzeniu do autouzupełniania poznaliśmy już podstawy autouzupełniania. Ale dlaczego przeglądarki oferują autouzupełnianie?
Wypełnianie formularzy nie jest interesującą czynnością, ale często ją wykonujesz. 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 udostępnienie im opcji automatycznego wypełniania pól formularza danymi wprowadzonymi wcześniej. To autouzupełnianie.
Skąd przeglądarki wiedzą, jakie dane mają autouzupełniać? Sprawdź przykładowe pole formularza, aby się tego dowiedzieć.
<label for="name">Name</label>
<input name="name" id="name">
Jeśli prześlesz to pole formularza, przeglądarki zapiszą wartość (wpisane dane) wraz z wartością atrybutu name (nazwa). Niektóre przeglądarki sprawdzają też atrybut id podczas zapisywania i wypełniania danych.
Załóżmy, że kilka tygodni później wypełniasz kolejny formularz w innej witrynie. Ta strona zawiera też pole formularza z atrybutem name="name". Twoja przeglądarka może teraz oferować autouzupełnianie, ponieważ wartość parametru name jest już zapisana.
Autouzupełnianie jest szczególnie przydatne w formularzach, których używasz regularnie, np. w formularzach rejestracji i logowania, płatności, realizacji transakcji oraz w formularzach, w których musisz wpisać imię i nazwisko lub adres.
Możesz pomóc przeglądarkom w oferowaniu najlepszych opcji autouzupełniania, używając odpowiednich wartości atrybutu autocomplete. Wartość atrybutu autocomplete może być różna. Oto przykład adresów.
Czy w Twojej przeglądarce jest już zapisany adres? Świetnie. Gdy wejdziesz w interakcję z pierwszym polem w formularzu adresu, przeglądarka wyświetli listę zapisanych adresów. Możesz wybrać jeden z nich, a przeglądarka wypełni wszystkie pola związane z adresem. Autouzupełnianie przyspiesza i ułatwia wypełnianie formularzy.
Nie wszystkie formularze adresu mają te same pola, a kolejność pól też jest różna.
Użycie prawidłowych wartości w przypadku autocomplete zapewnia, że przeglądarka wypełni formularz odpowiednimi wartościami. Dostępne są wartości country, postal-code i wiele innych.
Zapewnianie użytkownikom możliwości szybkiego logowania się i używania bezpiecznych haseł
Wiele osób ma problem z zapamiętywaniem haseł. Najpopularniejsze hasło to „123456”, a za nim plasują się inne łatwe do zapamiętania kombinacje. Jak używać bezpiecznych i unikalnych haseł bez konieczności zapamiętywania ich wszystkich?
Przeglądarki mają wbudowane menedżery haseł, które generują, zapisują i wypełniają hasła. Dowiedz się, jak możesz pomóc przeglądarkom w automatycznym wypełnianiu adresów e-mail i zarządzaniu hasłami.
W przypadku pola adresu e-mail możesz użyć elementu autocomplete="email", aby użytkownicy mogli automatycznie wypełnić to pole.
Ponieważ jest to formularz rejestracji, użytkownicy nie powinni mieć możliwości wypełniania go za pomocą wcześniej używanych haseł. Możesz użyć atrybutu autocomplete="new-password", aby przeglądarki oferowały opcję wygenerowania nowego hasła.
W formularzu logowania możesz użyć atrybutu autocomplete="current-password", aby poinformować przeglądarki, że mają oferować opcję wypełniania wcześniej zapisanych haseł do tej witryny.
Uwierzytelnianie dwuskładnikowe możesz skonfigurować w wielu witrynach. Oprócz hasła wysyłany jest jednorazowy kod dostępu w SMS-ie lub w aplikacji do uwierzytelniania dwuskładnikowego.
Czy nie byłoby wspaniale, gdyby kod otrzymany w SMS-ie był sugerowany przez klawiaturę ekranową i można go było bezpośrednio wybrać, aby wypełnić wartość? W przeglądarce Safari 14 lub nowszej możesz użyć elementu
autocomplete="one-time-code". W Chrome na Androidzie możesz użyć interfejsu WebOTP API, aby to zrobić za pomocą JavaScriptu.
Dowiedz się więcej o weryfikowaniu numerów telefonów w internecie za pomocą formularza hasła jednorazowego SMS – sprawdzone metody.
Uwaga: SMS nie jest najbezpieczniejszą metodą uwierzytelniania, ponieważ numery telefonów mogą być ponownie wykorzystywane i przejmowane. Rozważ użycie innych metod uwierzytelniania dwuskładnikowego lub uwierzytelniania wielopoziomowego.
Ułatwianie użytkownikom wpisywania danych karty kredytowej
Na wielu stronach e-commerce możesz użyć karty kredytowej do zakupu produktów. 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, zadbaj o to, aby użytkownicy mogli łatwo wypełniać informacje o płatności.
Możesz ponownie użyć atrybutu autocomplete, aby mieć pewność, że przeglądarki oferują prawidłowe opcje autouzupełniania.
Zawiera wartości numeru karty kredytowej cc-number, daty ważności karty kredytowej cc-exp i wszystkich innych informacji potrzebnych do dokonania płatności kartą kredytową.
Używaj jednego pola wejściowego do wpisywania numerów, takich jak numery kart kredytowych i numery telefonów, aby przeglądarki mogły oferować autouzupełnianie. Aby autouzupełnianie było dostępne, używaj standardowych elementów formularza, np. elementu <select> w przypadku dat kart płatniczych, zamiast elementów niestandardowych.
Dowiedz się więcej o tym, jak pomóc użytkownikom uniknąć ponownego wpisywania danych do płatności.
Sprawdzanie, czy autouzupełnianie działa we wszystkich polach
Oprócz adresów, informacji o koncie i danych kart kredytowych przeglądarki mogą pomagać użytkownikom w autouzupełnianiu wielu innych pól.
Gdy dodajesz do formularza pole numeru telefonu, sprawdź, czy możesz użyć dowolnej z dostępnych wartości do autouzupełniania. Czy udało Ci się znaleźć odpowiednią wartość dla pola formularza? Dodaj go.
Używanie odpowiednich wartości atrybutu autocomplete pomaga przeglądarkom oferować najlepszą opcję autouzupełniania i ułatwia użytkownikom szybsze wypełnianie formularzy.
Pomaganie przeglądarkom w rozpoznawaniu pól, które nie powinny być wypełniane automatycznie
Dowiedzieliśmy się, jak działa autouzupełnianie, jak możesz pomóc przeglądarkom w autouzupełnianiu i dlaczego autouzupełnianie ułatwia użytkownikom wypełnianie formularzy. Czasami jednak nie chcesz, aby przeglądarki oferował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 w przypadku wpisywania jednorazowych, unikalnych wartości, takich jak pole kodu jednorazowego. Wartość jest za każdym razem inna, a przeglądarka nie powinna zapisywać wartości ani oferować opcji autouzupełniania. W takich polach możesz użyć symbolu autocomplete="off", aby zapobiec autouzupełnianiu.
Innym zastosowaniem autocomplete="off" jest pole pułapka (patrz poprzedni moduł). Mimo że pole nie jest widoczne, przeglądarki mogą automatycznie wypełnić je danymi z pozostałych pól. Wyłączenie automatycznego wypełniania
zapobiega rozpoznaniu prawdziwego użytkownika jako bota z powodu automatycznego wypełnienia pola.
Autouzupełnianie należy wyłączyć tylko wtedy, gdy masz pewność, że pomoże to użytkownikom.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o autouzupełnianiu
Jaką wartość autouzupełniania należy zastosować w polu hasła w formularzu rejestracji?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"