Благодарим за настройку Google I/O! Смотрите контент по запросу .

Эта страница переведена с помощью Cloud Translation API.

Форма регистрации: лучшие практики разработки кода

Sam Dutton

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

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

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

Создайте новое перо .

Скопируйте и вставьте следующий код в HTML-редактор.

<form action="#" method="post">
  <h1>Sign up</h1>

  <section>
    <label>Full name</label>
    <input>
  </section>

  <section>
    <label>Email</label>
    <input>
  </section>

  <section>
    <label>Password</label>
    <input>
  </section>

  <button id="sign-up">Sign up</button>
</form>

Нажмите на предварительный просмотр, чтобы увидеть HTML-форму. Доступны поля для имени, адреса электронной почты и пароля. Эта форма использует только CSS-код браузера по умолчанию .

Каждый входной элемент находится в разделе и имеет метку. Кнопка регистрации, что важно, представляет собой <button> . Далее в этой лабораторной работе вы узнаете об особых возможностях всех этих элементов.

Задайте себе следующие вопросы:

Всё ли в порядке со стилями по умолчанию? Что бы вы изменили, чтобы форма выглядела лучше?
Работают ли стили по умолчанию? Какие проблемы могут возникнуть при использовании формы в её текущем виде? А как обстоят дела на мобильных устройствах? А как обстоят дела с программами чтения с экрана и другими вспомогательными технологиями ?
Кто ваши пользователи и на какие устройства и браузеры вы ориентируетесь?

Проверьте свою форму

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

Используйте режим устройства Chrome DevTools для имитации мобильных устройств.
Отправьте URL-адрес с вашего компьютера на телефон .
Используйте такой сервис, как BrowserStack , для тестирования на различных устройствах и браузерах.
Попробуйте заполнить форму, используя средство чтения с экрана, например расширение ChromeVox для Chrome.

Откройте CodePen в режиме реального времени или посетите наш . Проверьте свою форму на разных устройствах, используя режим устройства в Chrome DevTools.

Теперь откройте форму на телефоне или другом реальном устройстве. Какие различия вы видите?

2. Добавьте CSS, чтобы форма работала лучше.

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

На этом этапе вы добавите CSS-код для упрощения использования формы. Скопируйте его и вставьте в файл css/main.css .

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

Работает ли этот CSS для разных браузеров и размеров экранов?

Попробуйте настроить padding , margin и font-size в соответствии с вашими тестовыми устройствами.
CSS ориентирован на мобильные устройства. Используйте медиазапросы для применения правил CSS для областей просмотра шириной не менее 400px , а затем — для областей просмотра шириной не менее 500px . Достаточно ли этих контрольных точек ? Как выбрать контрольные точки для форм?

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

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

Обновите HTML-код формы, чтобы он выглядел следующим образом:

<form action="#" method="post">

  <h1>Sign up</h1>

  <section>
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name"
    pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
    type="email" required>
  </section>

  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password"
    type="password" minlength="8" required>
  </section>

  <button id="sign-up">Sign up</button>
</form>

Значения type выполняют большую работу:

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

В окне предварительного просмотра нажмите на метку «Электронная почта» . Что произойдёт? Фокус переместится на поле ввода электронной почты, поскольку у метки есть значение for , совпадающее с id поля. Остальные метки и поля работают аналогично. Программы чтения с экрана также озвучивают текст метки, когда метка (или связанное с ней поле ввода) получает фокус.

Попробуйте отправить форму с пустым полем. Браузер не отправляет форму, предлагая заполнить недостающие данные и устанавливая фокус. Это связано с тем, что мы добавили атрибут require ко всем полям ввода.

Теперь попробуйте отправить форму с паролем, длина которого меньше восьми символов. Браузер предупреждает, что длина пароля недостаточно велика, и устанавливает фокус на поле ввода пароля из-за атрибута minlength="8" . То же самое относится к pattern (используемому для ввода имени) и другим ограничениям валидации . Браузер делает всё это автоматически, без необходимости написания дополнительного кода.

Использование name autocomplete для ввода полного имени имеет смысл, но как насчет других полей?

autocomplete="username" для ввода Email означает, что менеджер паролей браузера сохранит адрес электронной почты как «имя» для этого пользователя (имя пользователя!), которое будет использоваться вместе с паролем.
Значение autocomplete="new-password" для поля "Пароль" указывает менеджеру паролей, что он должен предложить сохранить это значение в качестве пароля для текущего сайта. Затем вы можете использовать autocomplete="current-password" для включения автозаполнения в форме входа. Помните, что это форма регистрации .

4. Помогите пользователям вводить безопасные пароли

Вы заметили какие-либо проблемы с вводом пароля? Есть две проблемы:

Невозможно узнать, имеются ли ограничения на значение пароля.
Вы не можете увидеть пароль и проверить, правильно ли вы его ввели.

Не заставляйте пользователей гадать. Обновите раздел паролей в файле index.html следующим кодом:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button"
  aria-label="Show password as plain text. Warning: this displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Это добавляет новые функции, помогающие пользователям вводить пароли:

Кнопка (на самом деле просто текст) для переключения отображения пароля. (Функциональность кнопки будет добавлена с помощью JavaScript.)
Атрибут aria-label для кнопки переключения пароля.
Атрибут aria-describedby для ввода пароля. Программы чтения с экрана считывают текст метки, тип ввода (пароль), а затем описание.

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

Будет ли значок эффективнее, чем текст, для переключения отображения пароля? Попробуйте провести юзабилити -тестирование Discount Usability с небольшой группой друзей или коллег.
Чтобы проверить, как программы чтения с экрана работают с формами, установите расширение ChromeVox и пройдитесь по форме. Можете ли вы заполнить форму, используя только ChromeVox? Если нет, что бы вы изменили?

Идти дальше

В этой лабораторной работе не рассматриваются несколько важных функций:

Проверка паролей на наличие скомпрометированных паролей. Никогда не допускайте использования скомпрометированных паролей. Вы можете (и должны) использовать сервис проверки паролей для выявления скомпрометированных паролей .
Дайте ссылку на ваши Условия обслуживания и Политику конфиденциальности. Объясните пользователям, как вы защищаете их данные.
Обновите стиль и фирменный стиль ваших форм, чтобы они соответствовали остальному сайту. Это поможет пользователям чувствовать себя увереннее при вводе имён и адресов, особенно при совершении платежей.
Добавьте аналитику и мониторинг реальных пользователей . Обеспечьте возможность тестирования и мониторинга производительности и удобства использования вашей формы для реальных пользователей.