Создайте форму регистрации, следуя рекомендациям

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

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

Рекомендации по внедрению

Ниже приведены наиболее важные рекомендации по созданию эффективных форм регистрации.

Используйте понятный и корректный 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" для полей ввода адреса электронной почты – браузер будет автоматически проверять формат. Для паролей используйте атрибут pattern, чтобы обеспечить соблюдение требований к надежности и предоставлять понятные сообщения об ошибках, когда проверка не удается. Добавьте атрибут required к обязательным полям, чтобы предотвратить отправку пустых форм.

Поместите форму регистрации в отдельный элемент <form>.

Всегда используйте элемент <form>, когда пользователям нужно ввести данные.

Не помещайте входные данные в <div> и обрабатывайте их отправку только с помощью JavaScript. Обычно лучше использовать элемент <form>. Это делает ваш сайт доступным для программ чтения с экрана и других вспомогательных устройств, включает ряд встроенных функций браузера, упрощает создание базовой функциональной регистрации для старых браузеров и может работать, даже если JavaScript не работает.

Не дублируйте входные данные

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

Скрывайте пароли, но разрешайте пользователям просматривать их при необходимости.

Поля для ввода паролей должны иметь атрибут type="password", чтобы скрывать текст пароля и помогать браузеру понять, что поле предназначено для паролей. (Обратите внимание, что браузеры используют различные методы, чтобы понять роли ввода и решить, предлагать ли сохранение паролей.)

Добавьте переключатель Показать пароль, чтобы пользователи могли проверить введенный текст, и не забудьте о ссылке Забыли пароль?.

Предоставьте пользователям мобильных устройств подходящую клавиатуру

Используйте <input type="email">, чтобы у пользователей мобильных устройств открывалась подходящая клавиатура и чтобы включить базовую встроенную проверку адресов электронной почты в браузере. JavaScript не требуется.

Если вместо адреса электронной почты нужно использовать номер телефона, <input type="tel"> включает телефонную клавиатуру на мобильном устройстве. При необходимости можно также использовать атрибут inputmode. Например, inputmode="numeric" идеально подходит для PIN-кодов.

Сделайте так, чтобы мобильная клавиатура не закрывала кнопку регистрации.

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

По возможности избегайте этого, показывая только поля для ввода адреса электронной почты (или номера телефона) и пароля, а также кнопку "Зарегистрироваться" в верхней части страницы регистрации. Другой контент размещайте ниже.

Помогите пользователям избежать повторного ввода данных

Вы можете помочь браузерам правильно хранить данные и автоматически заполнять поля, чтобы пользователям не приходилось вводить адрес электронной почты и пароль. Это особенно важно на мобильных устройствах и критично для полей ввода адреса электронной почты, которые часто остаются незаполненными. Для этого нужно выполнить два действия:

1. Атрибуты autocomplete, name, id и type помогают браузерам понять роль входных данных, чтобы сохранить их и использовать для автозаполнения. Чтобы данные сохранялись для автозаполнения, современные браузеры также требуют, чтобы входные данные имели стабильное значение name или id (не генерировались случайным образом при каждой загрузке страницы или развертывании сайта) и находились в элементе <form> с кнопкой submit.
2. Атрибут autocomplete помогает браузерам правильно заполнять поля ввода, используя сохраненные данные.

Для полей ввода адреса электронной почты используйте autocomplete="username", поскольку username распознается менеджерами паролей в современных браузерах, хотя вы должны использовать type="email" и, возможно, захотите использовать id="email" и name="email". Для полей ввода пароля используйте подходящее значение autocomplete, чтобы браузеры могли различать новые и текущие пароли.

Используйте autocomplete="new-password" для нового пароля.

ОБЯЗАТЕЛЬНО. Для формы регистрации используйте autocomplete="new-password".

<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

Разрешить браузеру предлагать надежный пароль

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

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

Помогите пользователям не пропускать поля ввода

Добавьте атрибут required в поля для ввода адреса электронной почты и пароля. Современные браузеры автоматически запрашивают недостающие данные и устанавливают фокус на них.

Разрешить вставку паролей

Некоторые сайты не разрешают вставлять текст в поля для ввода пароля.

Запрет на вставку паролей раздражает пользователей, заставляет их выбирать легко запоминающиеся (и, следовательно, менее надежные) пароли и, по мнению таких организаций, как Национальный центр кибербезопасности Великобритании, может снизить уровень безопасности. Пользователи узнают о том, что вставка запрещена, только когда пытаются вставить пароль, поэтому запрет на вставку паролей не позволяет избежать уязвимостей буфера обмена.

Предлагать вход через сторонние сервисы

Многие пользователи предпочитают входить на сайты, используя адрес электронной почты и пароль. Однако вы также должны разрешить пользователям входить в систему с помощью стороннего поставщика идентификационной информации (федеративный вход).

У этого подхода есть несколько преимуществ. Если пользователи создают аккаунт с помощью федеративного входа, вам не нужно запрашивать, передавать или хранить пароли.

Вы также можете получить доступ к дополнительной подтвержденной информации профиля из интегрированного входа, например к адресу электронной почты. Это означает, что пользователю не нужно вводить эти данные, а вам не нужно выполнять проверку самостоятельно. Кроме того, федеративный вход упрощает пользователям переход на новое устройство.

Будьте внимательны при выборе имени пользователя

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

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

Также убедитесь, что в именах пользователей используется autocomplete="username".

Резервные стратегии

Автозаполнение – это прогрессивное улучшение. В браузерах, которые не поддерживают автозаполнение, пользователям нужно будет ввести учетные данные вручную. Ограничения семантического HTML (такие как type, inputmode и required) по-прежнему будут работать должным образом, чтобы проверять вводимые пользователем данные и предоставлять правильные виртуальные клавиатуры.