Autouzupełnianie

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

Zasoby

• Funkcja autouzupełniania .
  • Najlepsze informacje: formularz płatności i adresu metody