Używaj funkcji przeglądarki na wielu platformach, aby tworzyć bezpieczne, dostępne i łatwe w obsłudze formularze logowania.
Jeśli użytkownicy muszą się w danej chwili logować w witrynie, formularz powinien być krytyczny. Dotyczy to zwłaszcza użytkowników korzystających ze słabych połączeń, pośpiechu lub stresu. Źle zaprojektowane formularze logowania mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać zgubnego i niezadowolonego użytkownika – nie tylko utraconą prośbę o zalogowanie się. możliwość.
Oto przykład prostego formularza logowania, który przedstawia wszystkie sprawdzone metody:
Lista kontrolna
- Używaj przydatnych elementów HTML:
<form>
,<input>
,<label>
i<button>
. - Oznacz każde dane wejściowe znakiem
<label>
. - Używanie atrybutów elementu w celu dostępu do wbudowanej przeglądarki
funkcje:
type
,name
,autocomplete
orazrequired
. - Podaj stabilne wartości atrybutów wejściowych
name
iid
, które się nie zmieniają między ładowaniem stron a wdrożeniem witryny. - Dodawanie danych logowania w osobnym <form> .
- Upewnij się, że formularz został przesłany.
- Użyj
autocomplete="new-password"
iid="new-password"
do hasła w formularzu rejestracyjnym, a nowego hasła w formularzu resetowania hasła. - Użyj
autocomplete="current-password"
iid="current-password"
aby podać hasło. - Udostępnij funkcję Pokaż hasło.
- Używaj
aria-label
iaria-describedby
w wprowadzania haseł. - Nie dubluj danych wejściowych.
- Projektuj formularze w taki sposób, aby klawiatura komórki nie zasłaniała wprowadzania lub .
- Upewnij się, że formularze mogą być używane na urządzeniach mobilnych: używaj czytelnego tekstu, i upewnij się, że dane wejściowe i przyciski są na tyle duże, by mogły działać jako docelowe elementy dotykowe.
- Zachowaj oznaczenia marki i styl na stronach rejestracji i logowania.
- Testuj w terenie i w module: przygotowywanie statystyk strony, analitykę interakcji i skoncentrowany na użytkowniku pomiar skuteczności procesu rejestracji i logowania.
- Przeprowadź testy w różnych przeglądarkach i na różnych urządzeniach: formy zachowują się w różny sposób. znacznie różnią się od siebie.
Używaj zrozumiałego kodu HTML
Użyj elementów stworzonych na potrzeby zadania: <form>
, <label>
i <button>
. Dzięki nim
wbudowane funkcje przeglądarki,
ułatwiają ułatwienia dostępu i nadają treści
znacznikami.
Użyj konta <form>
Może Cię kusić, aby uwzględnić dane wejściowe w elemencie <div>
i obsługiwać dane wejściowe
czysto za pomocą JavaScriptu. Ogólnie lepiej jest użyć zwykłego, starego formatu
<form>
. Dzięki temu witryna będzie dostępna dla czytników ekranu i innych elementów wspomagających
urządzeń, obsługuje szereg wbudowanych funkcji przeglądarki, ułatwia tworzenie
podstawowych funkcji logowania w starszych przeglądarkach.
Występuje błąd JavaScriptu.
Użyj konta <label>
Aby oznaczyć etykietą dane wejściowe, użyj <label>
.
<label for="email">Email</label>
<input id="email" …>
Z 2 powodów:
- Kliknięcie etykiety powoduje przejście do jej danych wejściowych. Powiązywanie etykiety z etykietą
dane wejściowe za pomocą atrybutu
for
etykiety z wartościaminame
lubid
danych wejściowych. - Czytniki ekranu informują, kiedy etykieta lub dane wejściowe etykiety ostrość.
Nie używaj obiektów zastępczych jako etykiet wejściowych. Ludzie są odpowiedzialni za zapomnienie wpisywanych informacji, zwłaszcza jeśli użytkownicy zaczęli wpisywać tekst. rozproszony („Czy wpisałem adres e-mail, numer telefonu lub konto, ID?”). Istnieje wiele potencjalnych problemów z symbolami zastępczymi: patrz sekcja Nie Używanie obiektu zastępczego Atrybut Symbole zastępcze w polach formularzy to Szkodliwe, jeśli bez obaw.
Chyba najlepiej jest umieścić etykiety nad danymi wejściowymi. Zapewnia to spójność, w wersji na urządzenia mobilne i komputery, a także według AI od Google badania, umożliwia szybsze skanowanie. Otrzymujesz etykiety i dane wejściowe o pełnej szerokości, nie muszą dostosowywać etykiety ani szerokości danych wejściowych, aby dopasować je do tekstu etykiety.
![Zrzut ekranu pokazujący pozycję etykiety do wprowadzania danych na urządzeniu mobilnym: obok pola do wprowadzania danych i nad danymi wejściowymi.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-showing-form-i-8eaa2616f31e3.png?authuser=0000&hl=pl)
Otwórz zakłócenie pozycji etykiety na urządzenia mobilnego, aby przekonać się na własne oczy.
Użyj konta <button>
Użyj formatu <button>
dla przycisków! Elementy przycisków zapewniają łatwo dostępne działanie i wbudowaną formę.
funkcji przesyłania i łatwo zmieniać ich styl. Nie ma sensu
za pomocą właściwości <div>
lub innego elementu udającego, że jest to przycisk.
Upewnij się, że na przycisku przesyłania jest widoczna nazwa. Przykłady obejmują Utwórz konto lub Zaloguj się, a nie Prześlij ani Rozpocznij.
Upewnij się, że formularz został przesłany
Pomóż menedżerom haseł zrozumieć, że przesłano formularz. Dostępne są 2 Jak to zrobić:
- Otwórz inną stronę.
- Emuluj nawigację za pomocą polecenia
History.pushState()
lubHistory.replaceState()
, i usuń formularz hasła.
W przypadku żądania XMLHttpRequest
lub fetch
sprawdź, czy logowanie
są zgłaszane w odpowiedzi i obsługiwane przez przeniesienie formularza
jako wskaźnik sukcesu.
Rozważ wyłączenie przycisku Zaloguj się po kliknięciu przez użytkownika . Wielu użytkowników klika przyciski wiele razy nawet w przypadku szybkich i elastycznych stron. Spowalnia to interakcje, powoduje zwiększenie obciążenia serwera.
I na odwrót – nie wyłączaj przesyłania formularza w oczekiwaniu na dane wejściowe użytkownika. Przykład: Nie wyłączaj przycisku Zaloguj się, jeśli użytkownicy nie podali nazwy klienta kod PIN. Użytkownicy mogą coś pominąć w formularzu, a następnie wielokrotnie klikać (wyłączone) Przycisk Zaloguj się, który chyba nie działa. Przynajmniej, jeśli musisz wyłączyć przesyłanie formularza, wyjaśnić użytkownikowi, czego brakuje kliknij wyłączony przycisk.
Nie dubluj danych wejściowych
W niektórych witrynach użytkownicy wymuszają na użytkownikach podwójne wpisanie adresu e-mail lub hasła. Może to zmniejszyć w przypadku kilku użytkowników, ale powoduje dodatkową pracę u wszystkich użytkowników i zwiększa porzucenie . Dwukrotne pytanie też nie ma sensu, jeśli przeglądarki automatycznie uzupełniają adresy e-mail lub zasugeruj silnych haseł. Lepiej umożliwić użytkownikom potwierdzanie adresu e-mail (ale musisz to zrobić) i ułatw im zresetowanie w razie potrzeby hasło.
W pełni wykorzystuj atrybuty elementów
To tutaj dzieje się magia! Przeglądarki mają wiele przydatnych wbudowanych funkcji, które korzystają z atrybutów elementów wejściowych.
Zachowaj hasła prywatne, ale pozwól użytkownikom zobaczyć je, jeśli chcą
Wpisywane hasła powinny zawierać parametr type="password"
, aby ukryć tekst hasła i ułatwić
wie, że dane wejściowe dotyczą haseł. (Pamiętaj, że przeglądarki używają
różnych technik, które pomogą Ci zrozumieć role wejściowe i zdecydować,
czy proponować zapisywanie haseł).
Dodaj przełącznik Pokaż hasło, aby umożliwić użytkownikom sprawdzanie wpisany tekst – i nie zapomnij dodać linku Nie pamiętam hasła. Zobacz Włącz wyświetlanie haseł
![Formularz logowania Google z ikoną Pokaż hasło.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/google-sign-form-showing-c9486bea5e685.png?authuser=0000&hl=pl)
Zapewnianie użytkownikom urządzeń mobilnych odpowiedniej klawiatury
Użyj <input type="email">
, aby udostępnić użytkownikom urządzenia mobilne odpowiednią klawiaturę i
włącz podstawową, wbudowaną weryfikację adresu e-mail przez przeglądarkę... bez JavaScriptu
wymagane!
Jeśli zamiast adresu e-mail musisz podać numer telefonu, funkcja <input
type="tel">
włącza klawiaturę telefonu na urządzeniu mobilnym. Możesz też użyć usługi
Atrybut inputmode
, gdy jest potrzebny: inputmode="numeric"
to idealny wybór w przypadku kodu PIN
liczby. Wszystko, co chcesz wiedzieć
inputmode
.
Nie zasłaniaj przycisku Zaloguj się przez klawiaturę telefonu.
Jeśli nie zachowasz ostrożności, klawiatura komórki może zasłaniać formularz lub Co gorsza, częściowo zasłaniać przycisk Zaloguj się. Użytkownicy mogą zrezygnować przed zdając sobie sprawę z tego, co się stało.
![Dwa zrzuty ekranu formularza logowania na telefonie z Androidem. Jeden z nich pokazuje, jak przycisk Prześlij jest zasłonięty przez klawiaturę telefonu.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/two-screenshots-a-sign-084751e480027.png?authuser=0000&hl=pl)
W miarę możliwości unikaj wyświetlania tylko adresu e-mail/numer telefonu i hasła oraz przycisku Zaloguj się u góry strony logowania. Inne treści umieść poniżej.
![Zrzut ekranu z formularzem logowania na telefonie z Androidem: przycisk logowania nie jest zasłonięty przez klawiaturę telefonu.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-83485069857ef.png?authuser=0000&hl=pl)
Testowanie na różnych urządzeniach
Musisz przeprowadzić testy na różnych urządzeniach docelowych odbiorców i dostosować odpowiednio się zmienia. BrowserStack umożliwia bezpłatne testowanie wersji open source projektów na wielu rzeczywistych urządzeniach i przeglądarkami.
![Zrzuty ekranu przedstawiające formularz logowania na iPhonie 7, 8 i 11 Na iPhonie 7 i 8 przycisk logowania jest zasłonięty przez klawiaturę telefonu, ale nie na iPhonie 11](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-a-sign-form-7ab582516302b.png?authuser=0000&hl=pl)
Rozważ użycie 2 stron
Niektóre strony (w tym Amazon i eBay) unikają problemu, prosząc o adres e-mail/telefon i hasło na dwóch stronach. Takie podejście upraszcza też Doświadczenie: użytkownik zajmuje się tylko jedną rzeczą w danym momencie.
![Zrzut ekranu przedstawiający formularz logowania w witrynie Amazon: adres e-mail/telefon i hasło na 2 oddzielnych „stronach”.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-ade5c293b1904.png?authuser=0000&hl=pl)
W idealnej sytuacji najlepiej je zaimplementować za pomocą jednego elementu <form>. Używaj JavaScriptu aby początkowo wyświetlać tylko adres e-mail, potem ukryć go i wyświetlić hasło. Jeśli musisz zmusić użytkownika do przejścia na nową stronę między wpisaniem jego adresu e-mail a , formularz na drugiej stronie powinien zawierać ukryty element do wprowadzania danych z ciągiem e-mail, aby ułatwić menedżerom haseł zapisywanie prawidłowej wartości. Hasło Style formularzy rozpoznawane przez Chromium znajdziesz przykładowy kod.
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 mogli pamiętaj o wpisaniu adresu e-mail i hasła. Jest to szczególnie ważne, na urządzeniach mobilnych oraz jest kluczowe dla adresów e-mail, które zapewniają wysoki współczynnik porzuceń.
Składa się na to 2 części:
Atrybuty
autocomplete
,name
,id
itype
pomagają przeglądarkom zrozumieć roli danych wejściowych w celu przechowywania danych, które można później wykorzystać do autouzupełniania. Aby umożliwić przechowywanie danych na potrzeby autouzupełniania, nowoczesne przeglądarki wymagają też danych wejściowych mają stabilną wartośćname
lubid
(nie są generowane losowo przy każdym wczytaniu strony ani wdrożenie w witrynie) oraz aby uzyskać <form> z przyciskiemsubmit
.Atrybut
autocomplete
pomaga przeglądarkom poprawnie automatycznie uzupełniać dane wejściowe za pomocą zapisanych danych.
Jako adres e-mail wpisz autocomplete="username"
, ponieważ username
jest rozpoznawany
w nowoczesnych przeglądarkach, nawet jeśli należy używać type="email"
Jeśli chcesz, możesz użyć usług id="email"
i name="email"
.
Podczas wpisywania hasła użyj odpowiednich wartości autocomplete
i id
, aby ułatwić przeglądarkom
odróżniać nowe i bieżące hasła.
Użyj autocomplete="new-password"
i id="new-password"
, aby utworzyć nowe hasło
- Podczas rejestracji wpisz hasło
autocomplete="new-password"
iid="new-password"
lub w formularzu zmiany hasła.
Użyj istniejącego hasła autocomplete="current-password"
i id="current-password"
- Wpisz hasło w polu
autocomplete="current-password"
iid="current-password"
formularza logowania lub dane wejściowe starego hasła użytkownika w formularzu zmiany hasła. Dzięki temu która ma używać aktualnego hasła zapisanego dla tej strony.
W przypadku formularza rejestracyjnego:
<input type="password" autocomplete="new-password" id="new-password" …>
Aby się zalogować:
<input type="password" autocomplete="current-password" id="current-password" …>
Pomoc dla menedżerów haseł
Różne przeglądarki trochę obsługują autouzupełnianie e-maili i sugestie haseł ale rezultaty są bardzo podobne. W przeglądarce Safari w wersji 11 lub nowszej na komputerze: np. wyświetlany jest menedżer haseł, a potem biometryczne uwierzytelnianie (odcisk palca lub rozpoznawanie twarzy) jest możliwe, jeśli jest dostępne.
![Zrzuty ekranu przedstawiające 3 etapy procesu logowania w Safari na komputerze: menedżer haseł, uwierzytelnianie biometryczne, autouzupełnianie.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-three-stages-b113ab6379e04.png?authuser=0000&hl=pl)
Chrome na komputerze wyświetla sugestie dotyczące e-maili, pokazuje menedżera haseł i automatycznie uzupełnia hasło.
![Zrzuty ekranu przedstawiające 4 etapy procesu logowania się w Chrome na komputerze: uzupełnianie e-maila, sugestia dotycząca e-maila, menedżer haseł, autouzupełnianie po wybraniu.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-four-stages-da9ebdff879c3.png?authuser=0000&hl=pl)
Systemy autouzupełniania i hasła w przeglądarce nie są proste. Algorytmy zgadywanie, przechowywanie i wyświetlanie wartości nie są standaryzowane i różnią się od z platformy na platformę. Na przykład, na co wskazuje Hidde de Wideo: Menedżer haseł Firefoksa uzupełnia swoje działania heurystyczne systemu przepisów”.
Autouzupełnianie: co deweloperzy powinni wiedzieć,
nie
zawiera o wiele więcej informacji na temat korzystania z: name
i autocomplete
. Atrybut HTML
dane techniczne
wyświetla wszystkie 59 możliwych wartości.
Włącz w przeglądarce sugerowanie silnego hasła
Nowoczesne przeglądarki korzystają z heurystyki, aby zdecydować, kiedy wyświetlić interfejs menedżera haseł. Zaproponuj silne hasło.
Safari na komputerze robi to tak.
![Zrzut ekranu przedstawiający Menedżera haseł Firefox na komputerze.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-firefox-passw-00fc03de0450e.png?authuser=0000&hl=pl)
(W przeglądarce Safari od wersji 12.0 dostępna jest silna sugestia dotycząca hasła).
Wbudowane generatory haseł w przeglądarce sprawiają, że użytkownicy i deweloperzy nie muszą aby ustalić, co jest „silnym hasłem” Ponieważ przeglądarki mogą bezpiecznie przechowywać i w razie potrzeby automatycznie uzupełniać je – użytkownicy nie muszą ich zapamiętywać. lub wpisz hasła. Zachęcanie użytkowników do korzystania z wbudowanej przeglądarki oznacza również większe prawdopodobieństwo, że użyją unikalnych, silnych i zmniejsza prawdopodobieństwo ponownego użycia hasła, które może być zostały przejęte w innym miejscu.
Pomóż chronić użytkowników przed przypadkowymi brakującymi danymi wejściowymi
Dodaj atrybut required
do pól adresu e-mail i hasła.
Nowoczesne przeglądarki automatycznie wyświetlają podpowiedzi i zaznaczają brakujące dane.
JavaScript nie jest wymagany.
![Zrzut ekranu z przeglądarką Firefox i Chrome na Androida na komputerze z widoczną opcją „Wypełnij to pole” pojawi się prośba
o brakujące dane.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-desktop-firef-eb20cb4ab2ed6.png?authuser=0000&hl=pl)
Dla palców i kciuków
Domyślny rozmiar przeglądarki do wszystkiego, co jest związane z elementami do wprowadzania danych i przyciski są zbyt małe, zwłaszcza na urządzeniach mobilnych. Może się to wydawać oczywiste, ale typowy problem z formularzami logowania w wielu witrynach.
Upewnij się, że dane wejściowe i przyciski są odpowiednio duże
Domyślny rozmiar i dopełnienie elementów wejściowych i przycisków są za małe na komputerach jeszcze gorzej na komórkach.
![Zrzut ekranu przedstawiający niesformatowaną formę w Chrome na komputery i w Chrome na Androida.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-ddf413b33ec2b.png?authuser=0000&hl=pl)
Według ułatwień dostępu na Androidzie zalecany rozmiar docelowy obiektów na ekranie dotykowym to 7–10 mm. Interfejs Apple wytyczne zalecają rozmiar 48 x 48 pikseli, a W3C – co najmniej 44 x 44 piks. tego dnia dodaj (co najmniej) około 15 pikseli dopełnienia do elementów wejściowych i przycisków dla na urządzeniach mobilnych i około 10 pikseli w przypadku komputerów. Wypróbuj to na prawdziwym urządzeniu mobilnym, prawdziwy palec lub kciuk. Możesz w wygodny sposób dotknąć każdego ze wejścia i przyciski.
Elementy dotykowe mają nieodpowiedni rozmiar Audyt Lighthouse może pomóc Ci zautomatyzować proces wykrywania elementów wejściowych które są za małe.
Dla kciuków
Wyszukaj docelowy element dotykowy i zobaczysz dużo zdjęć palców wskazujących. Jednak w prawdziwym świecie wielu ludzi ludzie komunikują się z telefonami kciukami. Liczba kciuków jest większa niż palcem wskazującym, a kontrola jest mniej precyzyjna. Ten powód, dla którego należy o odpowiednich rozmiarach docelowych elementów dotykowych.
Powiększ tekst
Podobnie jak w przypadku rozmiaru i dopełnienia, domyślny rozmiar czcionki elementów wejściowych i są zbyt małe, zwłaszcza na urządzeniach mobilnych.
![Zrzut ekranu przedstawiający niesformatowaną formę w Chrome na komputerze i na Androidzie.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-e9a00e9267421.png?authuser=0000&hl=pl)
Przeglądarki na różnych platformach mają różne rozmiary czcionek, dlatego trudno jest to zmienić. i określ rozmiar czcionki, który dobrze sprawdza się wszędzie. Krótka ankieta na temat: Na popularnych stronach internetowych rozmiar wynosi 13–16 pikseli, co odpowiada rozmiarowi fizycznemu. jest dobrym minimum dla reklam tekstowych na komórki.
Oznacza to, że na urządzeniach mobilnych musisz użyć większego rozmiaru piksela: 16px
w Chrome
komputer jest dość czytelny, ale przy dobrej jakości wzroku może być słabo odczytana. 16px
tekstu w Chrome na Androida. Możesz ustawić różne rozmiary w pikselach czcionek
rozmiarów widocznego obszaru korzystającego z multimediów,
.
Aplikacja 20px
działa na urządzeniach mobilnych, ale warto ją przetestować ze znajomymi lub
kolegów z wadami wzroku.
W dokumencie nie są używane czytelne rozmiary czcionek Audyt Lighthouse może pomóc Ci zautomatyzować proces wykrywania zbyt częstego tekstu bardzo małe.
Zapewnij wystarczającą ilość miejsca między danymi wejściowymi
Dodaj taki margines, aby wpisywane dane działały dobrze jak docelowe elementy dotykowe. Innymi słowy, staraj się na marginesie szerokości palca.
Upewnij się, że wpisywane dane są wyraźnie widoczne
Domyślny styl obramowania danych wejściowych sprawia, że są one słabo widoczne. Już prawie niewidoczne na niektórych platformach, takich jak Chrome na Androida.
Oprócz dopełnienia dodaj obramowanie: na białym tle zgodnie z ogólną zasadą
aby wybrać kolor #ccc
lub ciemniejszy.
![Zrzut ekranu przedstawiający stylizowany formularz w Chrome na Androida.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-styled-form-e2baf84fd81fe.png?authuser=0000&hl=pl)
Ostrzegaj o nieprawidłowych wartościach wejściowych za pomocą wbudowanych funkcji przeglądarki
Przeglądarki mają wbudowane funkcje służące do podstawowej weryfikacji formularza w przypadku
type
. Przeglądarki ostrzegają, gdy przesyłasz formularz z nieprawidłową wartością,
i ustaw zaznaczenie na problematycznych danych wejściowych.
![Zrzut ekranu z formularzem logowania w Chrome na komputerze, przedstawiający prośbę i zaznaczenie związane z nieprawidłową wartością adresu e-mail.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-4a4d1d374a2a8.png?authuser=0000&hl=pl)
Za pomocą selektora arkusza CSS :invalid
możesz wyróżnić nieprawidłowe dane. Używaj
:not(:placeholder-shown)
, aby uniknąć wyboru danych wejściowych bez treści.
input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}
Wypróbuj różne sposoby wyróżniania danych wejściowych z nieprawidłowymi wartościami.
Używaj JavaScriptu tam, gdzie jest to konieczne
Przełącz wyświetlanie hasła
Dodaj przełącznik Pokaż hasło, aby umożliwić użytkownikom sprawdzanie wprowadzonego tekstu. Użyteczność narasta, gdy użytkownicy nie zobaczy wpisanego tekstu. Obecnie nie ma żadnej wbudowanej metody jednak są też plany implementacji. Za użyć JavaScriptu.
![Formularz logowania Google z widocznym przełącznikiem Pokaż hasło i linkiem Nie pamiętam hasła.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/sign-in-form.png?authuser=0000&hl=pl)
Ten kod dodaje funkcję Pokaż hasło przy użyciu przycisku tekstowego.
HTML:
<section>
<label for="password">Password</label>
<button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
<input id="password" name="password" type="password" autocomplete="current-password" required>
</section>
Oto kod CSS, który sprawia, że przycisk wygląda jak zwykły tekst:
button#toggle-password {
background: none;
border: none;
cursor: pointer;
/* Media query isn't shown here. */
font-size: var(--mobile-font-size);
font-weight: 300;
padding: 0;
/* Display at the top right of the container */
position: absolute;
top: 0;
right: 0;
}
A kod JavaScript do wyświetlania hasła:
const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');
togglePasswordButton.addEventListener('click', togglePassword);
function togglePassword() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.type = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}
Oto efekt końcowy:
![Zrzuty ekranu przedstawiające formularz logowania z przyciskiem Pokaż tekst hasła w przeglądarce Safari na Macu i iPhonie 7.](https://web.developers.google.cn/static/articles/sign-in-form-best-practices/image/screenshots-sign-form-61274420cf598.png?authuser=0000&hl=pl)
Udostępnij wpisywanie haseł
W polu aria-describedby
określ reguły dotyczące haseł, nadając mu identyfikator
z opisem ograniczeń. Czytniki ekranu podają tekst etykiety,
typ danych wejściowych (hasło) oraz opis.
<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
Podczas dodawania funkcji Pokaż hasło pamiętaj, aby podać
aria-label
ostrzega o wyświetleniu hasła. W przeciwnym razie użytkownicy mogą
nieumyślnie ujawnić hasła.
<button id="toggle-password"
aria-label="Show password as plain text.
Warning: this will display your password on the screen.">
Show password
</button>
Możesz zobaczyć działanie obu funkcji ARIA w tym przypadku:
W artykule Tworzenie formularzy ułatwień dostępu znajdziesz więcej wskazówek, które pomogą Ci zwiększyć dostępność formularzy.
Weryfikuj w czasie rzeczywistym i przed przesłaniem
Elementy formularza HTML i atrybuty mają wbudowane funkcje do podstawowej weryfikacji ale także przy użyciu JavaScriptu do dokładniejszej weryfikacji, gdy użytkownicy wprowadzania danych i próby przesłania formularza.
Krok 5 formularza logowania Codelab korzysta z walidacji ograniczeń API (czyli szeroko obsługiwane), aby dodać niestandardową weryfikację za pomocą wbudowanego interfejsu przeglądarki do ustawiania ostrości i wyświetlania promptów.
Więcej informacji: Używanie JavaScriptu do bardziej złożonych działań w czasie rzeczywistym .
Analytics i RUM
„Czego nie można zmierzyć, nie można poprawić” dotyczy zwłaszcza rejestracji, i formularze logowania. Musisz wyznaczyć cele, zmierzyć skuteczność, ulepszyć witrynę i powtarzać.
Wykorzystanie rabatu jest testem, pomocne w testowaniu zmian, ale do stworzenia zrozumieć, jak użytkownicy odbierają formularze rejestracji i logowania:
- Statystyki strony: wyświetlenia strony po rejestracji i zalogowaniu, współczynniki odrzuceń, i wyjścia.
- Analiza interakcji: cel ścieżki (gdzie użytkowników rezygnują z procesu logowania się?) i wydarzenia (jakie działania podejmują użytkownicy podczas interakcji z formularzami?)
- Skuteczność witryny: ukierunkowana na użytkowników (dotyczące rejestracji i logowania) z jakiegoś powodu linki są wolniejsze, a jeśli tak, to jaka jest tego przyczyna?).
Możesz też rozważyć wdrożenie testów A/B, aby wypróbować różnych metod rejestracji i logowania oraz wdrażanie etapowe, zmian na podzbiorze użytkowników przed opublikowaniem zmian dla wszystkich użytkowników.
Ogólne wskazówki
Dobrze zaprojektowany interfejs i wygoda mogą zmniejszyć liczbę porzuceń podczas logowania:
- Nie zmuszaj użytkowników do szukania logowania. Umieść link do formularza logowania u góry używając dobrze zrozumiałych sformułowań, np. Zaloguj się, Utwórz konto. lub Zarejestruj się.
- Utrzymuj koncentrację. Formularze rejestracyjne nie służą do rozpraszania uwagi oferty i inne funkcje witryny.
- Uprość proces rejestracji. zbierania innych danych użytkownika (takich jak adresy lub danych karty kredytowej) tylko wtedy, gdy po udostępnieniu tych danych użytkownicy zauważą wyraźną korzyść z ich udostępnienia. i skalowalnych danych.
- Zanim użytkownicy zaczną korzystać z formularza rejestracyjnego, wyjaśnij im, jest twierdząca. Jaką korzyść przynosi im zalogowanie się? Konkretne informacje dla użytkowników zachęty do ukończenia rejestracji.
- Jeśli to możliwe, zezwól użytkownikom na identyfikowanie się za pomocą numeru telefonu komórkowego. zamiast adresu e-mail, ponieważ niektórzy użytkownicy mogą nie korzystać z poczty e-mail.
- Ułatwiaj użytkownikom resetowanie hasła oraz wymagaj, aby funkcja Nie pamiętaj hasło?.
- Link do warunków korzystania z usługi i polityki prywatności: jasno określ, użytkowników od podstaw, w jaki sposób chronić ich dane.
- Podczas rejestracji umieść logo oraz nazwę firmy lub organizacji. i upewnij się, że język, czcionki i style w Twojej witrynie. Niektóre formularze nie sprawiają wrażenia, że należą do tej samej witryny co inne zwłaszcza tych, których adresy URL znacznie się od siebie różnią.
Ucz się dalej
- Tworzenie niesamowitych formularzy
- Sprawdzone metody projektowania formularzy mobilnych
- Bardziej zaawansowane opcje formularzy
- Tworzenie formularzy z ułatwieniami dostępu
- Usprawnienie procesu logowania za pomocą interfejsu Credential Management API
- Weryfikowanie numerów telefonów w internecie przy użyciu interfejsu WebOTP API
Zdjęcie: Meghan Schiereck, Unsplash.