Tworzenie formularza logowania na podstawie funkcji przeglądarki obsługujących wiele platform

Sam Dutton

Z tego ćwiczenia w Codelabs dowiesz się, jak utworzyć bezpieczny, dostępny i łatwy w użyciu formularz logowania.

1. Używanie znaczących znaczników HTML

Użyj tych elementów przygotowanych na potrzeby zadania:

  • <form>
  • <section>
  • <label>
  • <button>

Jak widać, te elementy umożliwiają korzystanie z wbudowanych funkcji przeglądarki, poprawiają dostępność i dodają znaczeń do znacznika.

  1. Aby edytować projekt, kliknij Remiksuj.

  2. Dodaj do elementu <body> ten kod:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    Oto jak powinien wyglądać plik index.html:

  3. Kliknij Wyświetl aplikację, aby wyświetlić podgląd formularza logowania. Dodany przez Ciebie kod HTML jest prawidłowy, ale domyślny styl przeglądarki sprawia, że wygląda on źle i jest trudny w użyciu, zwłaszcza na urządzeniach mobilnych.

  4. Aby wrócić do kodu źródłowego, kliknij Wyświetl źródło.

2. Projektowanie z myślą o palcach i kciuki

Dostosuj wypełnienie, marginesy i rozmiary czcionek, aby dane wejściowe działały prawidłowo na urządzeniach mobilnych.

  1. Skopiuj ten kod CSS i wklej go do pliku style.css:

  2. Kliknij Wyświetl aplikację, aby zobaczyć formularz logowania w nowym stylu.

  3. Kliknij Wyświetl źródło, aby wrócić do pliku style.css.

To całkiem sporo kodu. Najważniejsze zmiany dotyczą rozmiarów:

  • Do danych wejściowych dodano padding i margin.
  • font-size działa inaczej na urządzeniach mobilnych i komputerach.

Selektor :invalid wskazuje, że wartość wejściowa jest nieprawidłowa. To jeszcze nie działa.

Układ CSS jest dostosowany do urządzeń mobilnych:

  • Domyślny kod CSS jest przeznaczony do widocznych obszarów o szerokości mniejszej niż 450 pikseli.
  • Sekcja zapytań o multimedia określa zastąpienia dla widocznych obszarów o szerokości co najmniej 450 pikseli.

Gdy tworzysz własny formularz, na tym etapie procesu bardzo ważne jest przetestowanie kodu na prawdziwych komputerach i urządzeniach mobilnych:

  • Czy etykiety i teksty są czytelne, zwłaszcza dla osób niedowidzących?
  • Czy dane wejściowe i przycisk Zaloguj się są wystarczająco duże, by można było ich używać jako kciuków?

3. Dodawanie atrybutów wejściowych w celu włączenia wbudowanych funkcji przeglądarki

Włącz przeglądarkę, aby zapisywać i automatycznie uzupełniać wartości wejściowe oraz zapewnić dostęp do wbudowanych funkcji zarządzania hasłami.

  1. Dodaj atrybuty do kodu HTML formularza, aby wyglądał tak:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. Ponownie otwórz aplikację i kliknij Wyślij e-maila.

    Zwróć uwagę, jak zaznaczenie przechodzi na pole adresu e-mail. Dzieje się tak, ponieważ etykieta jest powiązana z danymi wejściowymi za pomocą atrybutu for="email". Czytniki ekranu odczytują też tekst etykiety, gdy etykieta lub powiązane z nią pole tekstowe zostanie wybrane.

  3. Wyśrodkuj pole e-maila na urządzeniu mobilnym.

    Zwróć uwagę, że klawiatura jest zoptymalizowana pod kątem wpisywania adresu e-mail. Na przykład znaki @ i . mogą być wyświetlane na klawiaturze głównej, a system operacyjny może wyświetlać zapisane e-maile nad klawiaturą. Dzieje się tak, ponieważ atrybut type="email" jest stosowany do elementu <input>.

    Domyślna klawiatura e-mail na iOS.

  4. Wpisz tekst w polu hasła.

    Tekst jest domyślnie ukryty, ponieważ do elementu zastosowano atrybut type="password".

  • Atrybuty autocomplete, name, id i type pomagają przeglądarkom zrozumieć rolę danych wejściowych, aby przechowywać dane, które można później wykorzystać do autouzupełniania.
  1. Zaznacz adres e-mail na komputerze i wpisz tekst. Po kliknięciu Pełny ekran Ikona pełnego ekranu możesz zobaczyć adres URL aplikacji. Jeśli w przeglądarce masz zapisane adresy e-mail, zobaczysz prawdopodobnie okno, w którym możesz wybrać jeden z nich. Dzieje się tak, ponieważ atrybut autocomplete="username" został zastosowany do pola adresu e-mail.
  • autocomplete="username" i autocomplete="current-password" ułatwiają przeglądarkom korzystanie z zapisanych wartości do autouzupełniania danych wejściowych.

Różne przeglądarki używają różnych metod do określania roli pól formularza i automatycznego wypełniania pól w różnych witrynach.

Aby to sprawdzić, dodaj i usuń atrybuty.

Bardzo ważne jest przetestowanie działania na różnych platformach. Wpisz wartości i prześlij formularz w różnych przeglądarkach na różnych urządzeniach. Za pomocą usługi BrowserStack, która jest bezpłatna dla projektów open source, można łatwo przeprowadzać testy na różnych platformach. Wypróbuj

Oto jak powinien wyglądać plik index.html:

4. Dodaj interfejs, aby przełączać wyświetlanie haseł

Eksperci od użyteczności zdecydowanie zalecają dodanie ikony lub przycisku, który pozwoli użytkownikom zobaczyć tekst wpisany w polu Hasło. Nie ma wbudowanego sposobu na to, więc musisz to zrobić samodzielnie za pomocą kodu JavaScript.

Kod potrzebny do dodania tej funkcji jest prosty. W tym przykładzie użyto tekstu, a nie ikony.

Zaktualizuj pliki index.html, style.css i script.js w ten sposób.

  1. Dodaj przełącznik do sekcji hasła w pliku index.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>

  2. Dodaj do pliku style.css ten kod CSS:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    W ten sposób przycisk Pokaż hasło wygląda jak zwykły tekst i wyświetla się w prawym górnym rogu sekcji z hasłem.

  3. Dodaj ten kod JavaScript do pliku script.js, aby włączyć wyświetlanie hasła i ustawić odpowiednią wartość aria-label:

    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.');
  }
}

  4. Wypróbuj teraz logikę wyświetlania hasła.

    1. Wyświetl aplikację.

    2. Wpisz tekst w polu hasła.

    3. Kliknij Pokaż hasło.

  5. Powtórz 4. krok w różnych przeglądarkach i systemach operacyjnych.

Zastanów się nad projektem UX: czy użytkownicy zauważą przycisk Pokaż hasło i czy go zrozumieją? Czy istnieje lepszy sposób na realizację tej funkcji? To dobry moment, aby we współpracy ze znajomymi lub współpracownikami przeprowadzić obniżki na testy użyteczności.

Aby dowiedzieć się, jak ta funkcja działa w przypadku czytników ekranu, zainstaluj rozszerzenie klasycznego ChromeVoxa i przejrzyj formularz. Czy wartości aria-label działają zgodnie z oczekiwaniami?

Niektóre witryny, np. Gmail, używają ikon, a nie tekstu, do przełączania wyświetlania hasła. Po zakończeniu tego ćwiczenia zaimplementuj to za pomocą obrazów SVG. Material Design oferuje wysokiej jakości ikony, które można pobrać bezpłatnie.

Oto jak Twój kod powinien wyglądać w tym punkcie:

5. Dodawanie walidacji formularza

Możesz pomóc użytkownikom w prawidłowym wprowadzaniu danych, umożliwiając im ich weryfikację przed przesłaniem formularza i pokazywaniem, co należy zmienić.

Elementy i atrybuty formularza HTML mają wbudowane funkcje podstawowej walidacji, ale warto też używać JavaScriptu, aby przeprowadzać bardziej zaawansowaną walidację podczas wprowadzania przez użytkowników danych i próby przesłania formularza.

W tym kroku używasz interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać weryfikację niestandardową z wbudowanym interfejsem przeglądarki, który ustawia fokus i wyświetla prompty.

Poinformuj użytkowników o ograniczeniach dotyczących haseł i innych danych wejściowych. Nie zmuszaj ich do zgadywania!

  1. Zaktualizuj sekcję dotyczącą hasła w pliku index.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" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

Dodaliśmy 2 nowe funkcje:

  • Informacje o ograniczeniach dotyczących haseł
  • Atrybut aria-describedby dla pola tekstowego z hasłem (czytniki ekranu odczytują tekst etykiety, typ danych (hasło), a następnie opis).

  1. Dodaj ten kod CSS na końcu pliku style.css:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. Dodaj do pliku script.js ten kod JavaScript:

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. Wypróbuj

    Wszystkie nowsze przeglądarki mają wbudowane funkcje sprawdzania poprawności formularzy i obsługują sprawdzanie za pomocą JavaScript.

    1. Wpisz nieprawidłowy adres e-mail i kliknij Zaloguj się. Przeglądarka wyświetla ostrzeżenie – nie jest wymagany JavaScript.

    2. Wpisz prawidłowy adres e-mail, ale nie wpisuj hasła, a następnie kliknij Zaloguj się. Przeglądarka ostrzeże, że brakuje wymaganej wartości, i ustawi fokus na polu hasła.

    3. Wpisz nieprawidłowe hasło i kliknij Zaloguj się. Teraz w zależności od tego, co się stało, zobaczysz różne komunikaty.

  4. Wypróbuj różne sposoby na ułatwienie użytkownikom wpisywania adresów e-mail i haseł. Ulepszone pola formularza hasła zawierają sprytne sugestie.

    Twój kod powinien wyglądać tak:

Idź dalej

Nie znajdziesz ich w tym ćwiczeniu z programowania, ale i tak potrzebujesz tych 4 kluczowych funkcji formularza logowania:

  • Dodaj przycisk Nie pamiętasz hasła?, aby ułatwić użytkownikom resetowanie haseł.

  • Dodaj link do dokumentów z warunkami korzystania z usługi i polityką prywatności, aby użytkownicy wiedzieli, jak chronisz ich dane.

  • Weź pod uwagę styl i markę oraz upewnij się, że te dodatkowe funkcje pasują do reszty witryny.

  • Dodaj Analytics i RUM, aby móc testować i monitorować wydajność oraz użyteczność projektu formularza.