Tworzenie formularza logowania z użyciem funkcji przeglądarki na wiele platform

Sam Dutton

Z tego ćwiczenia z programowania dowiesz się, jak utworzyć formularz logowania, który jest bezpieczny, dostępny i łatwy w użyciu.

1. Używanie znaczącego kodu HTML

Używaj tych elementów stworzonych z myślą o tym zadaniu:

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

Jak zobaczysz, te elementy umożliwiają korzystanie z wbudowanych funkcji przeglądarki, zwiększają dostępność i nadają znaczenie znacznikom.

  1. Kliknij Remiks, aby edytować, aby projekt był edytowalny.

  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>

    Plik index.html powinien wyglądać w tym momencie tak:

  3. Aby wyświetlić podgląd formularza logowania, kliknij Wyświetl aplikację. Dodany kod HTML jest prawidłowy, ale domyślne style przeglądarki sprawiają, że wygląda on źle i jest trudny w użyciu, zwłaszcza na urządzeniach mobilnych.

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

2. Zaprojektowane z myślą o palcach dłoni i kciukach

Dostosuj dopeł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ć nowo ostylowany formularz logowania.

  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 wartości padding i margin.
  • font-size różni się w przypadku urządzeń mobilnych i komputerów.

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

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

  • Domyślny kod CSS jest przeznaczony dla obszarów widocznych o szerokości mniejszej niż 450 pikseli.
  • Sekcja zapytania o media ustawia zastąpienia dla obszarów wyświetlania o szerokości co najmniej 450 pikseli.

Podczas tworzenia własnego formularza takiego jak ten na tym etapie procesu bardzo ważne jest przetestowanie kodu na prawdziwych urządzeniach stacjonarnych i mobilnych:

  • Czy etykieta i tekst wejściowy są czytelne, zwłaszcza dla osób niedowidzących?
  • Czy pola wprowadzania i przycisk Zaloguj się są wystarczająco duże, aby można było ich używać jako elementów docelowych dotyku kciukiem?

3. Dodawanie atrybutów wejściowych, aby włączyć wbudowane funkcje przeglądarki

Umożliwia przeglądarce przechowywanie i autouzupełnianie wartości wejściowych oraz zapewnia 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 wyświetl aplikację, a następnie kliknij E-mail.

    Zwróć uwagę, jak zaznaczenie przenosi się do pola wpisywania adresu e-mail. Dzieje się tak, ponieważ etykieta jest powiązana z elementem wejściowym za pomocą atrybutu for="email". Czytniki ekranu odczytują też tekst etykiety, gdy etykieta lub powiązane z nią pole wejściowe zostaną zaznaczone.

  3. Skup się na polu wpisywania adresu e-mail 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 do poczty 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. Skup się na wpisywaniu adresu e-mail na urządzeniu stacjonarnym i wpisz tekst. URL aplikacji możesz sprawdzić, klikając Pełny ekran Ikona pełnego ekranu. Jeśli w przeglądarce masz zapisane adresy e-mail, prawdopodobnie zobaczysz 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" pomagają przeglądarkom używać zapisanych wartości do automatycznego wypełniania pól.

Różne przeglądarki stosują różne techniki, aby określać rolę pól formularza i zapewniać automatyczne wypełnianie w przypadku różnych witryn.

Dodaj i usuń atrybuty, aby samodzielnie wypróbować tę funkcję.

Testowanie zachowań na różnych platformach jest niezwykle ważne. Wartości należy wpisywać i formularz przesyłać w różnych przeglądarkach na różnych urządzeniach. Dzięki BrowserStack możesz łatwo testować na różnych platformach. To narzędzie jest bezpłatne w przypadku projektów open source. Wypróbuj

Plik index.html powinien wyglądać w tym momencie tak:

4. Dodawanie interfejsu do przełączania wyświetlania hasła

Eksperci ds. użyteczności zdecydowanie zalecają dodanie ikony lub przycisku, który umożliwia użytkownikom wyświetlanie tekstu wpisywanego w polu Hasło. Nie ma wbudowanego sposobu na to, więc musisz zaimplementować go samodzielnie za pomocą JavaScriptu.

Kod dodający tę funkcję 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 ten kod CSS na końcu 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 jest wyświetlany w prawym górnym rogu sekcji hasła.

  3. Dodaj do pliku script.js ten kod JavaScript, aby przełączać wyświetlanie hasła i ustawić odpowiedni atrybut 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 krok 4 w przypadku kilku przeglądarek w różnych systemach operacyjnych.

Zastanów się nad UX: czy użytkownicy zauważą opcję Pokaż hasło i czy ją zrozumieją? Czy istnieje lepszy sposób na udostępnienie tej funkcji? To dobry moment, aby przeprowadzić testy użyteczności z rabatem w małej grupie znajomych lub współpracowników.

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

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

Na tym etapie kod powinien wyglądać tak:

5. Dodawanie weryfikacji formularza

Możesz pomóc użytkownikom w prawidłowym wprowadzaniu danych, umożliwiając im sprawdzenie ich poprawności przed przesłaniem formularza i wyświetlając informacje o tym, co należy zmienić.

Elementy i atrybuty formularza HTML mają wbudowane funkcje podstawowej weryfikacji, ale warto też używać JavaScriptu do bardziej zaawansowanej weryfikacji podczas wpisywania danych przez użytkowników i próby przesłania formularza.

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

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

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

Dodaje to 2 nowe funkcje:

  • Informacje o ograniczeniach dotyczących haseł
  • Atrybut aria-describedby dla pola wpisywania hasła (czytniki ekranu odczytują tekst etykiety, typ pola (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 najnowsze przeglądarki mają wbudowane funkcje weryfikacji formularzy i obsługują weryfikację za pomocą JavaScript.

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

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

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

  4. Wypróbuj różne sposoby, aby ułatwić użytkownikom wpisywanie adresów e-mail i haseł. Ulepszone pola formularza hasła zawiera kilka przydatnych sugestii.

    Na tym etapie kod powinien wyglądać tak:

Odkryj więcej

Nie są one pokazane w tym ćwiczeniu, ale nadal potrzebujesz tych 4 kluczowych funkcji formularza logowania:

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

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

  • Zwróć uwagę na styl i branding 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.