Korzystaj z funkcji przeglądarki na wielu platformach, aby tworzyć formularze logowania, które są bezpieczne, dostępne i łatwe w użyciu.
Jeśli użytkownicy muszą logować się w Twojej witrynie, dobrze zaprojektowany formularz logowania 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 logowania mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać utratę niezadowolonego klienta i użytkownika, a nie tylko utratę możliwości rejestracji.
Jak to zrobić?
Poniżej znajdziesz najważniejsze wskazówki dotyczące tworzenia skutecznych formularzy logowania.
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,autocompleteiinputmode
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 Zaloguj 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 logowania
Na każdym etapie logowania 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 logowania
Pamiętaj, aby w formularzach logowania dodawać odpowiednie wartości autocomplete.
Dzięki temu przeglądarki mogą pomagać użytkownikom, bezpiecznie przechowując dane logowania i prawidłowo wprowadzając dane formularza. 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. Dodaj atrybut required do pól obowiązkowych, aby zapobiec przesyłaniu pustych formularzy.
Umieść logowanie 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, upraszcza tworzenie podstawowych funkcji logowania 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 logowania przez klawiaturę mobilną
Jeśli nie zachowasz ostrożności, klawiatury mobilne mogą zasłaniać formularz lub, co gorsza, częściowo zasłaniać przycisk Zaloguj się. 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 Zaloguj się u góry strony logowania. 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:
- Atrybuty
autocomplete,name,iditypepomagają 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śćnamelubid(nie generowaną losowo przy każdym wczytaniu strony lub wdrożeniu witryny) i znajdowały się w elemencie<form>z przyciskiemsubmit. - Atrybut
autocompletepomaga 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 atrybutu autocomplete="current-password" w przypadku istniejącego hasła
OBOWIĄZKOWO: użyj autocomplete="current-password" w przypadku pola do wpisywania hasła w formularzu logowania. W ten sposób informujesz przeglądarkę, że chcesz użyć bieżącego hasła zapisanego dla tej witryny.
W przypadku formularza logowania:
<input type="password" autocomplete="current-password" id="current-password" …>
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
OBOWIĄZKOWE: 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.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
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.
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ć swoje 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.