Ponowne wpisywanie adresu po raz dziesiąty jest męczące. Przeglądarki i programiści mogą pomagać użytkownikom w szybszym wprowadzaniu danych bez ich ponownego podawania.
Z tego modułu dowiesz się, jak działa autouzupełnianie oraz jak atrybut autocomplete i inne atrybuty elementów mogą zapewnić przeglądarce odpowiednie opcje autouzupełniania.
Jak działa autouzupełnianie?
We wprowadzeniu do autouzupełniania omówiliśmy już podstawy autouzupełniania. Ale dlaczego przeglądarki oferują autouzupełnianie?
Wypełnianie formularzy nie jest interesującym zajęciem, ale i tak jest często. Z czasem wypełniasz wiele formularzy i często podajesz te same dane. Jednym ze sposobów, aby pomóc użytkownikom w szybszym wypełnianiu formularzy, jest udostępnienie im opcji automatycznego wypełniania pól formularzami wprowadzonymi wcześniej danymi. To autouzupełnianie.
Skąd przeglądarki rozpoznają dane do autouzupełniania? Spójrzmy na to przykładowe pole.
<label for="name">Name</label>
<input name="name" id="name">
Jeśli prześlesz to pole formularza, przeglądarki przechowują wartość (wpisane przez Ciebie dane) wraz z wartością atrybutu name (nazwa). Niektóre przeglądarki uwzględniają też atrybut id podczas przechowywania i uzupełniania danych.
Załóżmy, że kilka tygodni później wypełniasz kolejny formularz na innej stronie internetowej. Ta witryna zawiera też pole formularza z polem name="name". Autouzupełnianie jest możliwe w przeglądarce,
bo wartość w polu nazwy jest już zapisana.
Autouzupełnianie jest szczególnie przydatne w przypadku formularzy, których regularnie używasz, takich jak rejestracja i logowanie się, płatności, płatności oraz formularze, w których musisz wpisać swoje imię i nazwisko lub adres.
Możesz pomóc przeglądarkom oferować najlepsze opcje autouzupełniania, używając odpowiednich wartości atrybutu autocomplete. Parametr autocomplete może mieć wiele wartości. Oto przykład adresów.
Czy Twoja przeglądarka ma już zapisany adres? Świetnie! Gdy wykonasz pierwsze działanie w pierwszym polu formularza adresu, w przeglądarce pojawi się lista zapisanych adresów. Możesz wybrać jeden, a przeglądarka wypełni wszystkie pola związane z adresem. Autouzupełnianie sprawia, że wypełnianie formularzy jest szybkie i łatwe.
Nie każdy formularz adresowy zawiera te same pola, a kolejność pól także jest różna.
Używanie prawidłowych wartości parametru autocomplete sprawi, że przeglądarka wypełni prawidłowe wartości w formularzu. Są wartości country, postal-code i wiele innych.
Zadbaj o to, aby użytkownicy mogli szybko się logować i używać bezpiecznych haseł
Wiele osób nie dobrze zapamiętuje haseł. Najpopularniejsze hasło to „123456”, a po nim występują inne łatwe do zapamiętania kombinacje. Jak używać bezpiecznych i unikalnych haseł, nie pamiętając ich?
Przeglądarki mają wbudowane menedżerów haseł, które pozwalają generować, zapisywać i uzupełniać hasła. Zobacz, jak możesz pomóc przeglądarkom w zakresie automatycznego wypełniania e-maili i zarządzania hasłami.
W polu adresu e-mail możesz użyć autocomplete="email", aby użytkownicy mogli korzystać z opcji autouzupełniania adresu e-mail.
Jest to formularz rejestracyjny, więc użytkownicy nie powinni mieć możliwości wpisania wcześniej używanych haseł. Możesz użyć polecenia autocomplete="new-password", aby mieć pewność, że przeglądarki umożliwiają wygenerowanie nowego hasła.
W formularzu logowania możesz użyć autocomplete="current-password", aby poinformować przeglądarki o możliwości wpisania wcześniej zapisanych haseł do tej witryny.
Uwierzytelnianie dwuskładnikowe możesz skonfigurować na wielu stronach. Oprócz hasła wysyłany jest też kod jednorazowy za pomocą SMS-a lub aplikacji do uwierzytelniania dwuskładnikowego.
Czy nie byłoby wspaniale, gdyby kod otrzymany w SMS-ie był sugerowany przez klawiaturę ekranową i można było go bezpośrednio kliknąć i wpisać wartość? W Safari w wersji 14 lub nowszej możesz użyć do tego autocomplete="one-time-code". Aby to zrobić w Chrome na urządzeniu z Androidem, możesz użyć interfejsu WebOTP API.
Dowiedz się więcej o weryfikacji numerów telefonów w internecie, korzystając ze sprawdzonych metod dotyczących tworzenia haseł jednorazowych w SMS-ach.
Ułatwianie użytkownikom wpisania danych karty kredytowej
W wielu witrynach e-commerce do kupowania produktów możesz używać karty kredytowej. Witryny mogą korzystać z zewnętrznych platform płatniczych, które udostępniają własne formularze. Jeśli jednak chcesz utworzyć własne formularze płatności, zadbaj o to, aby użytkownicy mogli łatwo wpisywać dane karty.
Możesz ponownie użyć atrybutu autocomplete, aby mieć pewność, że przeglądarki oferują prawidłowe opcje autouzupełniania.
Niektóre wartości to numer karty kredytowej cc-number, data ważności karty kredytowej cc-exp i wszystkie inne informacje potrzebne do dokonania płatności za pomocą karty kredytowej.
Używaj tylko jednego rodzaju danych w przypadku liczb takich jak numery kart kredytowych i numery telefonów, by mieć pewność, że przeglądarki będą obsługiwać autouzupełnianie. Aby zapewnić dostępność autouzupełniania, użyj standardowych elementów formularzy, np. <select> jako daty karty płatniczej, a nie elementów niestandardowych.
Dowiedz się więcej o tym, jak pomóc użytkownikom uniknąć ponownego wpisywania danych płatności.
Sprawdź, czy autouzupełnianie działa we wszystkich polach
Oprócz adresów, danych konta i danych karty kredytowej istnieje o wiele więcej pól, w których przeglądarki mogą pomóc użytkownikom w autouzupełnianiu.
Gdy dodajesz do formularza pole numeru telefonu, sprawdź, czy możesz użyć dostępnych wartości na potrzeby autouzupełniania. Udało Ci się znaleźć odpowiednią wartość w polu formularza? Dodaj.
Dzięki odpowiednim wartościom atrybutu autocomplete przeglądarki mogą oferować najlepszą opcję autouzupełniania, a użytkownicy szybciej wypełniają formularze.
Ułatw przeglądarkom zrozumienie, że pole nie powinno być uzupełniane automatycznie
Wiesz już, jak działa autouzupełnianie, jak może pomóc przeglądarkom i dlaczego autouzupełnianie ułatwia użytkownikom wypełnianie formularzy. Czasami jednak zdarza się, że nie chcesz, by 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 przydaje się przy wpisywaniu jednorazowych, niepowtarzalnych wartości, np. pola jednorazowego kodu. Za każdym razem wartość jest inna, a przeglądarka nie powinna zapisywać wartości ani oferować opcji autouzupełniania. Aby zapobiec autouzupełnianiem, możesz w tych polach użyć autocomplete="off".
Inny przypadek użycia właściwości autocomplete="off" to pole w poszukiwaniu miodu (patrz poprzedni moduł). Mimo że to pole jest niewidoczne, przeglądarki mogą automatycznie uzupełnić je pozostałymi polami. Wyłączenie autouzupełniania sprawia, że rzeczywisty użytkownik nie jest rozpoznawany jako bot, ponieważ to pole jest wypełniane automatycznie.
Autouzupełnianie należy wyłączać tylko wtedy, gdy masz pewność, że pomoże to 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="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"