Используйте кроссплатформенные функции браузера для создания формы входа.

Сэм Даттон

В этой лабораторной работе вы узнаете, как создать безопасную, доступную и простую в использовании форму входа.

1. Используйте осмысленный HTML

Используйте следующие элементы, созданные для этой работы:

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

Как вы увидите, эти элементы активируют встроенную функциональность браузера, улучшают доступность и добавляют смысла в вашу разметку.

  1. Нажмите «Ремикс для редактирования», чтобы сделать проект редактируемым.

  2. Добавьте следующий код в элемент <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>

    Вот как должен выглядеть ваш файл index.html на этом этапе:

  3. Нажмите «Просмотреть приложение» , чтобы просмотреть форму входа. Добавленный вами HTML-код корректен и корректен, но из-за стиля браузера по умолчанию он выглядит ужасно и неудобен в использовании, особенно на мобильных устройствах.

  4. Нажмите «Просмотреть исходный код» , чтобы вернуться к исходному коду.

2. Дизайн для пальцев и больших пальцев

Отрегулируйте отступы, поля и размер шрифта, чтобы обеспечить корректное отображение введенных данных на мобильных устройствах.

  1. Скопируйте следующий CSS-код и вставьте его в файл style.css :

  2. Нажмите «Просмотреть приложение» , чтобы увидеть обновленную форму входа.

  3. Нажмите «Просмотреть исходный код» , чтобы вернуться к файлу style.css .

Довольно много кода! Главное, на что следует обратить внимание, — это изменения размеров:

  • К входным данным добавляются padding и margin .
  • font-size для мобильных устройств и компьютеров отличается.

Селектор :invalid используется для указания недопустимого входного значения. Пока это не работает.

Макет CSS ориентирован в первую очередь на мобильные устройства:

  • CSS по умолчанию предназначен для областей просмотра шириной менее 450 пикселей.
  • Раздел медиа-запросов устанавливает переопределения для областей просмотра шириной не менее 450 пикселей.

При создании собственной формы таким образом крайне важно на данном этапе протестировать код на реальных устройствах — как на настольных компьютерах, так и на мобильных устройствах:

  • Можно ли прочитать текст меток и ввода, особенно для людей со слабым зрением?
  • Достаточно ли велики поля ввода и кнопка «Войти», чтобы их можно было использовать в качестве сенсорных зон для больших пальцев?

3. Добавьте входные атрибуты для включения встроенных функций браузера.

Разрешите браузеру сохранять и автоматически заполнять введенные значения, а также предоставьте доступ к встроенным функциям управления паролями.

  1. Добавьте атрибуты в HTML-код вашей формы, чтобы он выглядел следующим образом:

    <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. Просмотрите приложение еще раз и нажмите « Отправить по электронной почте» .

    Обратите внимание, как фокус перемещается на поле ввода электронной почты. Это происходит потому, что метка связана с полем ввода через атрибут for="email" . Программы чтения с экрана также озвучивают текст метки, когда фокус попадает на метку или связанное с ней поле ввода.

  3. Ограничьте ввод электронной почты на мобильном устройстве.

    Обратите внимание, как клавиатура оптимизирована для ввода адреса электронной почты. Например, символы @ и . могут отображаться на основной клавиатуре, а операционная система может отображать сохранённые адреса электронной почты над клавиатурой. Всё это происходит потому, что к элементу <input> применён атрибут type="email" .

    Клавиатура электронной почты по умолчанию в iOS.

  4. Введите текст в поле пароля.

    По умолчанию текст скрыт, поскольку к элементу применен атрибут type="password" .

  • Атрибуты autocomplete , name , id и type помогают браузерам понимать роль входных данных для хранения данных, которые можно использовать позже для автозаполнения.
  1. Переведите фокус ввода электронной почты на настольном устройстве и введите текст. URL вашего приложения можно увидеть, нажав «Полноэкранный режим». Значок полноэкранного режима Если вы сохранили адреса электронной почты в браузере, вы, вероятно, увидите диалоговое окно, позволяющее выбрать один из них. Это происходит из-за того, что к вводу адреса электронной почты применен атрибут autocomplete="username" .
  • autocomplete="username" и autocomplete="current-password" помогают браузерам использовать сохраненные значения для автоматического заполнения входных данных.

Разные браузеры используют разные методы для определения роли полей ввода форм и обеспечения автозаполнения для различных веб-сайтов.

Добавьте и удалите атрибуты, чтобы попробовать это самостоятельно.

Крайне важно тестировать поведение приложения на разных платформах. Вводить значения и отправлять форму следует в разных браузерах на разных устройствах. С помощью BrowserStack, бесплатного инструмента для проектов с открытым исходным кодом , легко протестировать приложение на разных платформах. Попробуйте!

Вот как должен выглядеть ваш файл index.html на этом этапе:

4. Добавьте пользовательский интерфейс для переключения отображения пароля.

Эксперты по юзабилити настоятельно рекомендуют добавить значок или кнопку, позволяющую пользователям видеть текст, вводимый в поле «Пароль» . Встроенного решения для этого нет , поэтому вам придётся реализовать это самостоятельно с помощью JavaScript.

Код для добавления этой функции прост. В этом примере используется текст, а не значок.

Обновите файлы index.html , style.css и script.js следующим образом.

  1. Добавьте переключатель в раздел паролей в файле 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. Добавьте следующий CSS-код в конец файла style.css :

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

    Это сделает кнопку «Показать пароль» похожей на обычный текст и отобразит ее в правом верхнем углу раздела паролей.

  3. Добавьте следующий JavaScript-код в файл script.js , чтобы включить или отключить отображение пароля и задать соответствующую 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. Попробуйте логику показа пароля прямо сейчас.

    1. Просмотреть ваше приложение.

    2. Введите текст в поле пароля.

    3. Нажмите Показать пароль .

  5. Повторите четвертый шаг в нескольких браузерах на разных операционных системах.

Подумайте о дизайне пользовательского опыта: заметят ли пользователи функцию «Показать пароль» и поймут её? Есть ли лучший способ реализовать эту функцию? Сейчас самое время попробовать провести юзабилити-тестирование с небольшой группой друзей или коллег.

Чтобы понять, как эта функция работает для программ чтения с экрана, установите расширение ChromeVox Classic и пройдитесь по форме. Работают ли значения aria-label так, как задумано?

Некоторые сайты, например, Gmail , используют значки, а не текст, для переключения отображения паролей. После завершения работы над этой практической работой реализуйте это с помощью изображений SVG. Material Design предлагает высококачественные значки, которые можно скачать бесплатно.

Вот как должен выглядеть ваш код на этом этапе:

5. Добавьте проверку формы

Вы можете помочь пользователям правильно вводить свои данные, если позволите им проверить свои данные перед отправкой формы и покажете им, что им нужно изменить.

Элементы и атрибуты HTML-форм имеют встроенные функции для базовой проверки, но вам также следует использовать JavaScript для выполнения более надежной проверки, когда пользователи вводят данные и пытаются отправить форму.

На этом этапе используется API проверки ограничений ( широко поддерживаемый ) для добавления пользовательской проверки со встроенным пользовательским интерфейсом браузера, который устанавливает фокус и отображает подсказки.

Расскажите пользователям об ограничениях на пароли и другие входные данные. Не заставляйте их гадать!

  1. Обновите раздел пароля файла 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>

Это добавляет две новые функции:

  • Информация об ограничениях паролей
  • Атрибут aria-describedby для ввода пароля (Программы чтения с экрана считывают текст метки, тип ввода (пароль), а затем описание.)

  1. Добавьте следующий CSS-код в конец файла style.css :

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

  2. Добавьте следующий JavaScript-код в файл script.js :

    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. Попробуйте!

    Все современные браузеры имеют встроенные функции проверки форм и поддерживают проверку с помощью JavaScript.

    1. Введите неверный адрес электронной почты и нажмите «Войти» . Браузер выдаст предупреждение — JavaScript не требуется!

    2. Введите действительный адрес электронной почты, а затем нажмите « Войти без пароля». Браузер предупредит о том, что вы пропустили обязательное значение, и переключит фокус на поле ввода пароля.

    3. Введите неверный пароль и нажмите «Войти» . Теперь вы видите разные сообщения в зависимости от того, что именно не так.

  4. Попробуйте разные способы помочь пользователям вводить адреса электронной почты и пароли. В разделе «Улучшенные поля формы паролей» есть несколько полезных советов.

    Вот как должен выглядеть ваш код на этом этапе:

Идти дальше

Они не показаны в этой лабораторной работе, но вам все равно понадобятся эти четыре важные функции формы входа:

  • Добавьте кнопку «Забыли пароль?» , которая позволит пользователям легко сбросить свои пароли.

  • Разместите ссылку на ваши условия предоставления услуг и документы политики конфиденциальности, чтобы ваши пользователи знали, как вы защищаете их данные.

  • Подумайте о стиле и брендинге и убедитесь, что эти дополнительные функции соответствуют остальной части вашего веб-сайта.

  • Добавьте Analytics и RUM, чтобы вы могли тестировать и отслеживать производительность и удобство использования вашего дизайна формы.