Используйте кросс-платформенные функции браузера, чтобы создавать безопасные, доступные и простые в использовании формы входа.
Если пользователям нужно входить в аккаунт на вашем сайте, то важно, чтобы форма входа была удобной. Это особенно важно для пользователей с медленным интернетом, мобильными устройствами, а также для тех, кто спешит или находится в стрессовой ситуации. Плохо спроектированные формы входа имеют высокий показатель отказов. Каждый отказ может означать не только упущенную возможность входа, но и потерю клиента и недовольного пользователя.
Рекомендации по внедрению
Ниже приведены наиболее важные рекомендации по созданию успешных форм входа.
Используйте понятный и корректный HTML-код
Используйте элементы и атрибуты, предназначенные для создания форм:
<form>,<input>,<label>и<button>type,autocompleteиinputmode.
Они активируют встроенные функции браузера, улучшают доступность и добавляют смысл в разметку.
Используйте элемент <label> для обозначения полей ввода данных в форме
Чтобы добавить ярлык к <input>, <select> или <textarea>, используйте <label>. Свяжите ярлык с полем ввода, присвоив атрибуту for ярлыка то же значение, что и у атрибута id поля ввода.
Как использовать HTML-атрибуты
Чтобы пользователям было проще вводить данные, используйте подходящий атрибут <type> элемента <input>. Это позволит показывать нужную клавиатуру на мобильных устройствах и включить базовую встроенную проверку в браузере.
Всегда используйте type="email" для адресов электронной почты и type="tel" для номеров телефонов.
Каждый элемент <input>, <select> и <textarea> ДОЛЖЕН иметь соответствующий атрибут autocomplete, чтобы улучшить доступность и помочь пользователям избежать повторного ввода данных.
Поля для ввода имени пользователя и адреса электронной почты содержат идентификаторы, а не текст. Добавьте spellcheck="false", чтобы браузер не перезаписывал их в то, что не соответствует аккаунту. Правила autocorrect и autocapitalize всегда отключены для input type="email", но обязательны для имен пользователей, не являющихся адресами электронной почты.
Добавьте полезные кнопки
Используйте <button> для кнопок. Вы также можете использовать <input type="submit">, но не div или другие элементы, которые не предназначены для создания кнопок. Элементы button обеспечивают доступность, встроенную функциональность отправки форм и легко стилизуются.
Укажите для каждой кнопки отправки формы значение, которое описывает ее действие. Используйте понятный и узнаваемый ярлык. Например, используйте Войти вместо Продолжить или Отправить.
По возможности используйте одно поле для ввода имени
Позвольте пользователям вводить имя в одном поле, если у вас нет веских причин хранить отдельно имена, фамилии, обращения и другие части имени. Использование одного поля для ввода имени упрощает форму, позволяет вырезать и вставлять текст, а также упрощает автозаполнение.
Разрешить международные имена. Для проверки не используйте регулярные выражения, которые соответствуют только латинским символам. Если вы выберете вариант "Только латиница", пользователи, в именах или адресах которых есть символы не из латинского алфавита, не смогут отправлять письма в ваш домен. Вместо этого разрешите сопоставление букв Unicode и убедитесь, что ваш бэкенд поддерживает Unicode как для ввода, так и для вывода. Современные браузеры поддерживают Unicode в регулярных выражениях.
Показать ход входа
Для каждого шага входа используйте заголовки страниц и описательные значения кнопок, которые дают понять, что нужно сделать сейчас и каков следующий шаг.
Используйте атрибут enterkeyhint в полях ввода формы, чтобы задать метку для клавиши ввода на мобильной клавиатуре. Например, используйте enterkeyhint="previous" и enterkeyhint="next" в многостраничной форме, enterkeyhint="done" – для последнего поля в форме, а enterkeyhint="search" – для поля поиска.
Помогите пользователям избежать повторного ввода данных для входа
Убедитесь, что в формах входа указаны подходящие значения autocomplete.
Это позволяет браузерам помогать пользователям, безопасно сохраняя учетные данные и правильно вводя данные формы. Без автозаполнения пользователи могут начать записывать учетные данные на бумаге или хранить их на устройстве небезопасным способом.
Тщательно проверяйте данные
Проверяйте данные как в реальном времени, так и перед отправкой формы. Используйте type="email" для полей ввода адреса электронной почты – браузер будет автоматически проверять формат. Добавьте атрибут required к обязательным полям, чтобы предотвратить отправку пустых форм.
Разместите кнопку входа в отдельном элементе <form>
Всегда используйте элемент <form>, когда пользователям нужно ввести данные.
Не помещайте входные данные в <div> и обрабатывайте их отправку только с помощью JavaScript. Обычно лучше использовать элемент <form>. Это делает ваш сайт доступным для программ чтения с экрана и других вспомогательных устройств, позволяет использовать ряд встроенных функций браузера, упрощает создание базового функционального входа для старых браузеров и может работать, даже если JavaScript не работает.
Не дублируйте входные данные
На некоторых сайтах пользователям приходится вводить адрес электронной почты или пароль дважды. Это может снизить количество ошибок для некоторых пользователей, но создает дополнительную работу для всех пользователей и увеличивает коэффициент прерывания. Повторный запрос также не имеет смысла, если браузеры автоматически заполняют адреса электронной почты или предлагают надежные пароли. Лучше дать пользователям возможность подтвердить адрес электронной почты (это все равно нужно будет сделать) и упростить сброс пароля.
Скрывайте пароли, но разрешайте пользователям просматривать их при необходимости.
Поля для ввода паролей должны иметь атрибут type="password", чтобы скрывать текст пароля и помогать браузеру понять, что поле предназначено для паролей. (Обратите внимание, что браузеры используют различные методы, чтобы понять роли ввода и решить, предлагать ли сохранение паролей.)
Добавьте переключатель Показать пароль, чтобы пользователи могли проверить введенный текст, и не забудьте о ссылке Забыли пароль?.
Предоставьте пользователям мобильных устройств подходящую клавиатуру
Используйте <input type="email">, чтобы у пользователей мобильных устройств открывалась подходящая клавиатура и чтобы включить базовую встроенную проверку адресов электронной почты в браузере. JavaScript не требуется.
Если вместо адреса электронной почты нужно использовать номер телефона, <input type="tel"> включает телефонную клавиатуру на мобильном устройстве. При необходимости можно также использовать атрибут inputmode. Например, inputmode="numeric" идеально подходит для PIN-кодов.
Как сделать так, чтобы мобильная клавиатура не закрывала кнопку входа
Если не уделить этому достаточно внимания, мобильная клавиатура может закрыть форму или, что ещё хуже, кнопку входа. Пользователи могут сдаться, прежде чем поймут, что произошло.
По возможности избегайте этого, показывая только поля для ввода адреса электронной почты (или номера телефона) и пароля, а также кнопку "Войти" в верхней части страницы входа. Другой контент размещайте ниже.
Помогите пользователям избежать повторного ввода данных
Вы можете помочь браузерам правильно хранить данные и автоматически заполнять поля, чтобы пользователям не приходилось вводить адрес электронной почты и пароль. Это особенно важно на мобильных устройствах и критично для полей ввода адреса электронной почты, которые часто остаются незаполненными. Для этого нужно выполнить два действия:
- Атрибуты
autocomplete,name,idиtypeпомогают браузерам понять роль входных данных, чтобы сохранить их и использовать для автозаполнения. Чтобы данные сохранялись для автозаполнения, современные браузеры также требуют, чтобы входные данные имели стабильное значениеnameилиid(не генерировались случайным образом при каждой загрузке страницы или развертывании сайта) и находились в элементе<form>с кнопкойsubmit. - Атрибут
autocompleteпомогает браузерам правильно заполнять поля ввода, используя сохраненные данные.
Для полей ввода адреса электронной почты используйте autocomplete="username", поскольку username распознается менеджерами паролей в современных браузерах, хотя вы должны использовать type="email" и, возможно, захотите использовать id="email" и name="email". Для полей ввода пароля используйте подходящее значение autocomplete, чтобы браузеры могли различать новые и текущие пароли.
Используйте autocomplete="current-password" для существующего пароля
ОБЯЗАТЕЛЬНО. Используйте autocomplete="current-password" для поля ввода пароля в форме входа. Это означает, что браузер должен использовать текущий пароль, сохраненный для сайта.
Для формы входа:
<input type="password" autocomplete="current-password" id="current-password" …>
Разрешить браузеру предлагать надежный пароль
Современные браузеры используют эвристику, чтобы решить, когда показывать интерфейс менеджера паролей и предлагать надежный пароль.
Встроенные генераторы паролей в браузерах избавляют пользователей и разработчиков от необходимости придумывать надежные пароли. Поскольку браузеры могут безопасно хранить пароли и автоматически заполнять их при необходимости, пользователям не нужно запоминать или вводить пароли. Если вы будете поощрять использование встроенных генераторов паролей, пользователи с большей вероятностью будут создавать уникальные и надежные пароли для вашего сайта и с меньшей вероятностью будут использовать пароли, которые могли быть скомпрометированы на других сайтах.
Помогите пользователям не пропускать поля ввода
ОБЯЗАТЕЛЬНО. Добавьте атрибут required в поля для ввода адреса электронной почты и пароля. Современные браузеры автоматически запрашивают недостающие данные и устанавливают фокус на них.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
Разрешить вставку паролей
Некоторые сайты не разрешают вставлять текст в поля для ввода пароля.
Запрет на вставку паролей раздражает пользователей, заставляет их выбирать легко запоминающиеся (и, следовательно, менее надежные) пароли и, по мнению таких организаций, как Национальный центр кибербезопасности Великобритании, может снизить уровень безопасности. Пользователи узнают о том, что вставка запрещена, только когда пытаются вставить пароль, поэтому запрет на вставку паролей не позволяет избежать уязвимостей буфера обмена.
Резервные стратегии
Автозаполнение – это прогрессивное улучшение. В браузерах, которые не поддерживают автозаполнение, пользователям нужно будет вводить учетные данные вручную. Ограничения семантического HTML (такие как type, inputmode и required) по-прежнему будут работать должным образом, чтобы проверять вводимые пользователем данные и предоставлять правильные виртуальные клавиатуры.