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

Сэм Даттон

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

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. Повторите четвертый шаг в нескольких браузерах в разных операционных системах.

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

Чтобы понять, как эта функция работает для программ чтения с экрана, установите расширение 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 , чтобы вы могли тестировать и отслеживать производительность и удобство использования дизайна вашей формы.