Tworzenie formularza rejestracji zgodnego ze sprawdzonymi metodami

Korzystaj z funkcji przeglądarki na wielu platformach, aby tworzyć bezpieczne, dostępne i łatwe w użyciu formularze rejestracji.

Jeśli użytkownicy muszą rejestrować się w Twojej witrynie, dobrze zaprojektowany formularz rejestracji jest kluczowy. Dotyczy to zwłaszcza osób, które mają słabe połączenie, korzystają z telefonów komórkowych, spieszą się lub są pod presją. Źle zaprojektowane formularze rejestracji mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać utratę niezadowolonego klienta, a nie tylko utratę możliwości rejestracji.

Jak to zrobić?

Poniżej znajdziesz najważniejsze wskazówki dotyczące tworzenia skutecznych formularzy rejestracji.

Używanie znaczącego, prawidłowego kodu HTML

Wykorzystaj w pełni elementy i atrybuty stworzone do tworzenia formularzy:

• <form>, <input>, <label> i <button>
• type, autocomplete i inputmode

Umożliwiają one korzystanie z wbudowanych funkcji przeglądarki, poprawiają ułatwienia dostępu i nadają znaczenie znacznikom.

Używanie elementu <label> do oznaczania pól formularza do wprowadzania danych

Aby oznaczyć etykietą <input>, <select> lub <textarea>, użyj <label>. Powiąż etykietę z polem wejściowym, nadając atrybutowi for etykiety tę samą wartość co atrybutowi id pola wejściowego.

Wykorzystaj w pełni atrybuty HTML

Ułatw użytkownikom wprowadzanie danych, używając odpowiedniego atrybutu <type> elementu <input>, aby zapewnić odpowiednią klawiaturę na urządzeniach mobilnych i włączyć podstawową weryfikację wbudowaną w przeglądarkę.

Zawsze używaj type="email" w przypadku adresów e-mail i type="tel" w przypadku numerów telefonów.

Każdy element <input>, <select> i <textarea> POWINIEN mieć odpowiedni atrybut autocomplete, aby poprawić dostępność i pomóc użytkownikom uniknąć ponownego wprowadzania danych.

Pola nazwy użytkownika i adresu e-mail zawierają identyfikatory, a nie tekst. Dodaj spellcheck="false", aby przeglądarka nie przekształcała ich w coś, co nie pasuje do konta. W przypadku input type="email" opcje autocorrect i autocapitalize są zawsze wyłączone, ale są wymagane w przypadku nazw użytkowników, które nie są adresami e-mail.

Użyteczne przyciski

Używaj <button> w przypadku przycisków. Możesz też użyć elementu <input type="submit">, ale nie używaj elementu div ani innego losowego elementu, który działa jak przycisk. Elementy przycisków zapewniają ułatwienia dostępu, wbudowaną funkcję przesyłania formularzy i można je łatwo stylizować.

Nadaj każdemu przyciskowi przesyłania formularza wartość, która opisuje jego działanie. Używaj jasnej, rozpoznawalnej etykiety. Na przykład użyj opcji Utwórz konto lub Zarejestruj się zamiast Dalej lub Prześlij.

W miarę możliwości używaj jednego pola do wpisywania imienia i nazwiska.

Zezwalaj użytkownikom na wpisywanie imienia i nazwiska w jednym polu, chyba że masz uzasadniony powód, aby osobno przechowywać imiona, nazwiska, tytuły lub inne części imienia i nazwiska. Użycie jednego pola na imię i nazwisko upraszcza formularze, umożliwia wycinanie i wklejanie oraz ułatwia autouzupełnianie.

Zezwalaj na nazwy międzynarodowe. Do weryfikacji nie używaj wyrażeń regularnych, które pasują tylko do znaków łacińskich. Opcja „Tylko alfabet łaciński” wyklucza użytkowników, których imiona i nazwiska lub adresy zawierają znaki spoza alfabetu łacińskiego. Zamiast tego zezwól na dopasowywanie liter w standardzie Unicode i upewnij się, że Twój backend bezpiecznie obsługuje standard Unicode zarówno w przypadku danych wejściowych, jak i wyjściowych. Unicode w wyrażeniach regularnych jest dobrze obsługiwany przez nowoczesne przeglądarki.

Wyświetlanie postępu rejestracji

Na każdym etapie rejestracji używaj nagłówków stron i opisowych wartości przycisków, które jasno wskazują, co należy zrobić teraz i jaki jest następny krok.

Użyj atrybutu enterkeyhint w polach formularza, aby ustawić etykietę klawisza Enter na klawiaturze mobilnej. Na przykład użyj enterkeyhint="previous" i enterkeyhint="next" w formularzu wielostronicowym, enterkeyhint="done" w przypadku ostatniego pola formularza i enterkeyhint="search" w przypadku pola wyszukiwania.

Pomaganie użytkownikom w unikaniu ponownego wpisywania danych rejestracyjnych

Pamiętaj, aby w formularzach rejestracji dodać odpowiednie wartości autocomplete.

Dzięki temu przeglądarki mogą pomagać użytkownikom, bezpiecznie przechowując dane logowania i prawidłowo wprowadzając dane w formularzach. Bez autouzupełniania użytkownicy mogą być bardziej skłonni do przechowywania danych logowania w formie fizycznej lub w niebezpieczny sposób na urządzeniu.

Dokładna weryfikacja

Sprawdzaj poprawność wprowadzanych danych zarówno w czasie rzeczywistym, jak i przed przesłaniem formularza. Używaj type="email" do wprowadzania adresów e-mail – przeglądarka automatycznie sprawdzi format. W przypadku haseł użyj atrybutu pattern, aby wymusić wymagania dotyczące siły hasła i wyświetlać jasne komunikaty o błędach, gdy weryfikacja się nie powiedzie. Dodaj atrybut required do pól obowiązkowych, aby zapobiec przesyłaniu pustych formularzy.

Umieść rejestrację w osobnym elemencie <form>

Zawsze używaj elementu <form>, gdy użytkownicy mają wprowadzać dane.

Nie umieszczaj danych wejściowych w elemencie <div> i obsługuj przesyłanie danych wejściowych wyłącznie za pomocą JavaScriptu. Zazwyczaj lepiej jest użyć elementu <form>. Dzięki temu witryna jest dostępna dla czytników ekranu i innych urządzeń wspomagających, umożliwia korzystanie z szeregu wbudowanych funkcji przeglądarki, ułatwia tworzenie podstawowych funkcji rejestracji w starszych przeglądarkach i może działać nawet wtedy, gdy JavaScript nie działa.

Nie dubluj danych wejściowych

Niektóre witryny wymagają od użytkowników dwukrotnego wpisania adresu e-mail lub hasła. Może to zmniejszyć liczbę błędów u niektórych użytkowników, ale powoduje dodatkową pracę dla wszystkich i zwiększa współczynnik porzuceń. Dwukrotne pytanie nie ma też sensu, gdy przeglądarki automatycznie uzupełniają adresy e-mail lub sugerują silne hasła. Lepiej jest umożliwić użytkownikom potwierdzenie adresu e-mail (i tak musisz to zrobić) i ułatwić im zresetowanie hasła w razie potrzeby.

zachowywać prywatność haseł, ale umożliwiać użytkownikom ich wyświetlanie, jeśli chcą;

Pola do wpisywania haseł powinny mieć atrybut type="password", aby ukryć tekst hasła i pomóc przeglądarce zrozumieć, że pole jest przeznaczone na hasła. (Pamiętaj, że przeglądarki używają różnych technik, aby zrozumieć role wejściowe i zdecydować, czy zaproponować zapisanie haseł).

Dodaj przełącznik Pokaż hasło, aby użytkownicy mogli sprawdzić wpisany tekst. Nie zapomnij też o linku Nie pamiętasz hasła?.

Udostępnianie użytkownikom urządzeń mobilnych odpowiedniej klawiatury

Użyj <input type="email">, aby zapewnić użytkownikom urządzeń mobilnych odpowiednią klawiaturę i włączyć podstawową wbudowaną weryfikację adresu e-mail przez przeglądarkę – bez konieczności używania JavaScriptu.

Jeśli zamiast adresu e-mail musisz użyć numeru telefonu, <input type="tel"> umożliwia korzystanie z klawiatury telefonu na urządzeniu mobilnym. W razie potrzeby możesz też użyć atrybutu inputmode: inputmode="numeric" jest idealny do kodów PIN.

Zapobieganie zasłanianiu przycisku rejestracji przez klawiaturę mobilną

Jeśli nie zachowasz ostrożności, klawiatury mobilne mogą zasłaniać formularz lub, co gorsza, częściowo zasłaniać przycisk rejestracji. Użytkownicy mogą się poddać, zanim zorientują się, co się stało.

Jeśli to możliwe, unikaj tego, wyświetlając tylko pola adresu e-mail (lub numeru telefonu) i hasła oraz przycisk Zarejestruj się u góry strony rejestracji. Inne treści umieść poniżej.

Pomaganie użytkownikom w unikaniu ponownego wprowadzania danych

Możesz pomóc przeglądarkom prawidłowo przechowywać dane i automatycznie uzupełniać dane wejściowe, aby użytkownicy nie musieli pamiętać o wpisywaniu adresu e-mail i hasła. Jest to szczególnie ważne na urządzeniach mobilnych i ma kluczowe znaczenie w przypadku pól do wpisywania adresu e-mail, które mają wysoki współczynnik porzuceń. Składa się on z 2 części:

1. Atrybuty autocomplete, name, id i type pomagają przeglądarkom zrozumieć rolę danych wejściowych, aby przechowywać dane, które mogą być później używane do autouzupełniania. Aby umożliwić przechowywanie danych na potrzeby autouzupełniania, nowoczesne przeglądarki wymagają też, aby dane wejściowe miały stabilną wartość name lub id (nie generowaną losowo przy każdym wczytaniu strony lub wdrożeniu witryny) i znajdowały się w elemencie <form> z przyciskiem submit.
2. Atrybut autocomplete pomaga przeglądarkom prawidłowo autouzupełniać dane wejściowe przy użyciu przechowywanych danych.

W przypadku pól do wpisywania adresu e-mail używaj autocomplete="username", ponieważ username jest rozpoznawany przez menedżery haseł w nowoczesnych przeglądarkach – mimo że należy używać type="email" i możesz chcieć używać id="email" i name="email". W przypadku pól do wpisywania haseł używaj odpowiedniej wartości autocomplete, aby przeglądarki mogły odróżniać nowe hasła od obecnych.

Używanie wartości autocomplete="new-password" w przypadku nowego hasła

OBOWIĄZKOWO: w przypadku formularza rejestracji użyj autocomplete="new-password".

<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

Włączanie sugerowania silnego hasła przez przeglądarkę

Nowoczesne przeglądarki używają heurystyki, aby określić, kiedy wyświetlić interfejs menedżera haseł i zasugerować silne hasło.

Wbudowane w przeglądarkę generatory haseł oznaczają, że użytkownicy i programiści nie muszą się zastanawiać, czym jest „silne hasło”. Przeglądarki mogą bezpiecznie przechowywać hasła i automatycznie je uzupełniać, więc użytkownicy nie muszą ich pamiętać ani wpisywać. Zachęcanie użytkowników do korzystania z wbudowanych w przeglądarkę generatorów haseł zwiększa prawdopodobieństwo, że będą oni używać w Twojej witrynie unikalnego, silnego hasła, a nie hasła, które mogło zostać przejęte w innym miejscu.

Pomoc w zapobieganiu przypadkowemu pominięciu danych wejściowych przez użytkowników

Dodaj atrybut required do pól adresu e-mail i hasła. Nowoczesne przeglądarki automatycznie wyświetlają prośbę o brakujące dane i ustawiają na nie kursor.

Zezwalaj na wklejanie haseł

Niektóre witryny nie zezwalają na wklejanie tekstu w polach haseł.

Blokowanie wklejania haseł irytuje użytkowników, zachęca do używania haseł, które łatwo zapamiętać (i tym samym które mogą być łatwiejsze do złamania), i według organizacji takich jak brytyjskie National Cyber Security Centre może w rzeczywistości obniżać poziom bezpieczeństwa. Użytkownicy dowiadują się, że wklejanie jest niedozwolone, dopiero po próbie wklejenia hasła, więc uniemożliwienie wklejania hasła nie zapobiega wykorzystaniu luk w zabezpieczeniach schowka.

Zapewnij możliwość logowania się za pomocą usług zewnętrznych

Wielu użytkowników woli logować się w witrynach za pomocą formularza rejestracji obejmującego adres e-mail i hasło. Warto jednak umożliwić im logowanie się za pomocą zewnętrznego dostawcy tożsamości, czyli logowanie sfederowane.

Takie podejście ma kilka zalet. W przypadku użytkowników, którzy tworzą konto za pomocą logowania sfederowanego, nie musisz prosić o hasła, przekazywać ich ani przechowywać.

Możesz też uzyskać dostęp do dodatkowych informacji o zweryfikowanym profilu z logowania sfederowanego, takich jak adres e-mail. Oznacza to, że użytkownik nie musi wpisywać tych danych, a Ty nie musisz przeprowadzać weryfikacji samodzielnie. Logowanie sfederowane może też znacznie ułatwić użytkownikom korzystanie z nowego urządzenia.

Uważaj na nazwy użytkowników

Nie nalegaj na podanie nazwy użytkownika, chyba że jest to konieczne. Umożliwiaj użytkownikom rejestrację i logowanie się tylko przy użyciu adresu e-mail (lub numeru telefonu) i hasła albo logowanie sfederowane, jeśli wolą. Nie zmuszaj ich do wybierania i zapamiętywania nazwy użytkownika.

Jeśli Twoja witryna wymaga nazw użytkowników, nie narzucaj bezzasadnych reguł i nie uniemożliwiaj użytkownikom aktualizowania ich nazw. W backendzie należy wygenerować unikalny identyfikator dla każdego konta użytkownika, a nie identyfikator oparty na danych osobowych, takich jak nazwa użytkownika.

Pamiętaj też, aby w przypadku nazw użytkowników używać autocomplete="username".

Strategie zastępcze

Autouzupełnianie to progresywne ulepszanie. W przeglądarkach, które nie obsługują autouzupełniania, użytkownicy będą musieli ręcznie wpisać dane logowania. Ograniczenia semantyczne HTML (takie jak type, inputmode i required) będą nadal działać prawidłowo, aby weryfikować dane wejściowe użytkownika i zapewniać odpowiednie klawiatury wirtualne.