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

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

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