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

[Imię i nazwisko]

Z tego ćwiczenia w programie dowiesz się, jak utworzyć bezpieczny, dostępny i łatwy w obsłudze formularz logowania.

1. Używaj zrozumiałego kodu HTML

Wykorzystaj te elementy dostosowane do konkretnego zadania:

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

Jak widzisz, te elementy włączają wbudowane funkcje przeglądarki, poprawiają dostępność i nadają znacznikom znaczenie.

  1. Kliknij Remiks, aby edytować projekt i udostępnić go do edycji.

  2. Dodaj ten kod do elementu <body>:

    <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 w tym miejscu:

  3. Kliknij Wyświetl aplikację, aby wyświetlić podgląd formularza logowania. Dodany kod HTML jest prawidłowy i prawidłowy, ale domyślny styl przeglądarki sprawia, że wygląda on okropnie i utrudnia korzystanie z niego zwłaszcza na urządzeniach mobilnych.

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

2. Styl na palce i kciuki

Dostosuj dopełnienie, marginesy i rozmiar czcionki, aby dane wejściowe działały dobrze na urządzeniach mobilnych.

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

  2. Kliknij Wyświetl aplikację, aby zobaczyć nowy formularz logowania.

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

To naprawdę dużo kodu! Najważniejsze kwestie, o których trzeba pamiętać o zmianach rozmiarów:

  • Obiekty padding i margin zostały dodane do danych wejściowych.
  • font-size działa inaczej niż na komputerze.

Selektor :invalid służy do wskazywania, kiedy dane wejściowe mają nieprawidłową wartość. To jeszcze nie działa.

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

  • Domyślny CSS działa dla widocznych obszarów o szerokości mniejszej niż 450 pikseli.
  • Sekcja zapytania o multimedia ustawia zastąpienia w widocznych obszarach o szerokości co najmniej 450 pikseli.

Jeśli tworzysz własny formularz, bardzo ważne jest na tym etapie przetestowania kodu na rzeczywistych urządzeniach, na komputerach i urządzeniach mobilnych:

  • Czy etykiety i wprowadzany tekst są czytelne, zwłaszcza dla osób niedowidzących?
  • Czy dane wejściowe i przycisk Zaloguj się są wystarczająco duże, by używać ich jako docelowych elementów dotykowych kciuka?

3. Dodaj atrybuty wejściowe, aby włączyć wbudowane funkcje przeglądarki

Włącz w przeglądarce przechowywanie i autouzupełnianie wartości wejściowych oraz zapewnij dostęp do wbudowanych funkcji zarządzania hasłami.

  1. Dodaj atrybuty do kodu HTML formularza, aby wyglądał on 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. Wyświetl aplikację ponownie i kliknij E-mail.

    Zwróć uwagę, jak zaznaczenie jest przenoszone do pola adresu e-mail. Dzieje się tak, ponieważ etykieta jest powiązana z danymi wejściowymi przez atrybut for="email". Czytniki ekranu rozpoznają też tekst etykiety, gdy etykieta lub powiązane z nią dane wejściowe zostaną zaznaczone.

  3. Zaznacz pole wpisywania 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 podstawowej, a w systemie operacyjnym nad klawiaturą mogą być wyświetlane zapisane e-maile. Wszystko to dzieje się dlatego, że atrybut type="email" jest stosowany do elementu <input>.

    Domyślna klawiatura poczty e-mail w iOS.

  4. Wpisz tekst w polu do wpisywania 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 w celu przechowywania danych, które można później wykorzystać na potrzeby autouzupełniania.
  1. Skoncentruj się na wpisywaniu adresu e-mail na komputerze i wpisz tekst. Aby wyświetlić adres URL aplikacji, kliknij Pełny ekran Ikona pełnego ekranu. Jeśli zapisałeś adresy e-mail w przeglądarce, prawdopodobnie zobaczysz okno dialogowe, które umożliwi Ci ich wybranie. Dzieje się tak, ponieważ atrybut autocomplete="username" został zastosowany do danych wejściowych dotyczących adresu e-mail.
  • Reguły autocomplete="username" i autocomplete="current-password" ułatwiają przeglądarkom używanie zapisanych wartości do autouzupełniania danych wejściowych.

Różne przeglądarki korzystają z różnych technik, aby określić rolę danych wejściowych formularza i zapewnić autouzupełnianie na różnych stronach.

Aby samodzielnie wypróbować tę funkcję, dodaj i usuń atrybuty.

Testowanie działania na różnych platformach jest bardzo ważne. Wpisz wartości i prześlij formularz w różnych przeglądarkach na różnych urządzeniach. Dzięki narzędziu BrowserStack można łatwo przeprowadzać testy na różnych platformach, co jest bezpłatne w przypadku projektów open source. Wypróbuj

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

4. Dodaj interfejs, aby przełączyć wyświetlanie hasła

Eksperci ds. użyteczności zdecydowanie zalecają dodanie ikony lub przycisku, który pozwala użytkownikom zobaczyć tekst wpisywany w polu Hasło. Nie ma na to wbudowanego sposobu, więc musisz wdrożyć go samodzielnie za pomocą JavaScriptu.

Kod dodający tę funkcję jest bardzo prosty. W tym przykładzie użyto tekstu, a nie ikony.

Zaktualizuj pliki index.html, style.css i script.js w następujący sposób.

  1. Dodaj przełącznik do sekcji haseł 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 ten kod CSS na dole pliku style.css:

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

    Dzięki temu przycisk Pokaż hasło wygląda jak zwykły tekst i wyświetla się w prawym górnym rogu sekcji haseł.

  3. Dodaj do pliku script.js poniższy kod JavaScript, aby przełą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 funkcję 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 różnych systemach operacyjnych.

Zastanów się nad projektem UX. Czy użytkownicy zauważą opcję Pokaż hasło i zrozumie ją? Czy można lepiej udostępnić tę funkcję? To dobry moment, by przeprowadzić testowanie użyteczności ze zniżką w małej grupie znajomych lub współpracowników.

Aby dowiedzieć się, jak ta funkcja działa w przypadku czytników ekranu, zainstaluj rozszerzenie klasycznej wersji ChromeVox i poruszaj się po formularzu. Czy wartości aria-label działają zgodnie z oczekiwaniami?

Niektóre strony, np. Gmail, do przełączania wyświetlania haseł używają ikon, a nie tekstu. Gdy skończysz pracę z programowania, zaimplementuj ją za pomocą obrazów SVG. Material Design obejmuje wysokiej jakości ikony, które można pobrać bezpłatnie.

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

5. Dodaj sprawdzanie poprawności formularza

Jeśli chcesz pomóc użytkownikom w prawidłowym wprowadzaniu danych, zezwól im na ich weryfikację przed przesłaniem formularza i pokaż, co muszą zmienić.

Elementy formularzy i atrybuty HTML mają wbudowane funkcje do podstawowej weryfikacji. Jednak gdy użytkownicy wpisują dane i próbują przesłać formularz, korzystaj też z JavaScriptu, by uzyskać dokładniejsze informacje.

W tym kroku używany jest interfejs Constraint Validation API (który jest powszechnie obsługiwany), aby dodać niestandardową funkcję weryfikacji za pomocą wbudowanego interfejsu przeglądarki, który ustawia zaznaczenie i wyświetla prompty.

Poinformuj użytkowników o ograniczeniach dotyczących haseł i innych danych wejściowych. Nie każ im zgadywać!

  1. Zaktualizuj sekcję haseł 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>

W związku z tym pojawią się 2 nowe funkcje:

  • Informacje o ograniczeniach dotyczących haseł
  • Atrybut aria-describedby służący do wprowadzania hasła (czytniki ekranu odczytują tekst etykiety, typ danych wejściowych (hasło), a następnie opis).

  1. Dodaj ten kod CSS na dole 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 najnowsze przeglądarki mają wbudowane funkcje sprawdzania poprawności formularzy i obsługi walidacji za pomocą języka JavaScript.

    1. Wpisz nieprawidłowy adres e-mail i kliknij Zaloguj się. W przeglądarce pojawi się ostrzeżenie – JavaScript nie jest wymagany.

    2. Wpisz prawidłowy adres e-mail, a potem kliknij Zaloguj się bez podawania hasła. Przeglądarka ostrzega o braku wymaganej wartości i ustawia fokus na wprowadzeniu hasła.

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

  4. Wypróbuj różne sposoby pomagania użytkownikom w wprowadzaniu adresów e-mail i haseł. Ulepszone pola formularza haseł zawierają ciekawe sugestie.

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

Pójdź o krok dalej

Nie są one pokazywane w tym ćwiczeniu z programowania, ale i tak przyda Ci się te 4 ważne funkcje formularza logowania:

  • Dodaj przycisk Nie pamiętasz hasła?, który ułatwia użytkownikom resetowanie haseł.

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

  • Zastanów się nad stylem i marką, a potem upewnij się, że te dodatkowe elementy współgrają z resztą witryny.

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