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

Сэм Даттон

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

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

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

  • Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.

Взгляните на HTML-код вашей формы в index.html . Вы увидите, что есть входы для имени, электронной почты и пароля. Каждый из них находится в разделе и у каждого есть метка. Кнопка «Зарегистрироваться» — это… <button> ! Позже в этой лаборатории вы узнаете об особых способностях всех этих элементов.

<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>

Нажмите «Просмотреть приложение» , чтобы просмотреть форму регистрации. Это показывает, как выглядит форма без использования CSS, кроме стилей браузера по умолчанию .

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

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

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

Нажмите «Просмотреть приложение» , чтобы просмотреть форму регистрации.

  • Попробуйте свою форму на разных устройствах, используя режим устройства Chrome DevTools.
  • Теперь откройте форму на телефоне или другом реальном устройстве. Какие различия вы видите?

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

Нажмите «Просмотреть исходный код» , чтобы вернуться к исходному коду.

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

На этом этапе вы добавите CSS, чтобы упростить использование формы.

Скопируйте и вставьте весь следующий CSS в файл css/main.css :

Нажмите «Просмотреть приложение» , чтобы увидеть стилизованную форму регистрации. Затем нажмите «Просмотреть исходный код» , чтобы вернуться к css/main.css .

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

  • Попробуйте настроить padding , margin и font-size в соответствии с вашими тестовыми устройствами.

  • CSS ориентирован на мобильные устройства. Медиа-запросы используются для применения правил CSS для областей просмотра шириной не менее 400px , а затем снова для областей просмотра шириной не менее 500px . Адекватны ли эти точки останова ? Как следует выбирать точки останова для форм?

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

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

Обновите файл index.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 ввода электронной почты. Остальные метки и входы работают таким же образом. Программы чтения с экрана также озвучивают текст метки, когда метка (или связанные с ней входные данные) получает фокус. Вы можете попробовать это, используя расширение ChromeVox .

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

Использование name значения autocomplete для поля Полное имя имеет смысл, но как насчет других входных данных? * autocomplete="username" для ввода электронной почты означает, что менеджер паролей браузера сохранит адрес электронной почты как «имя» для этого пользователя (имя пользователя!), которое будет использоваться с паролем. * 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 will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

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

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

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

(Стиль CSS уже установлен на шаге 2. Посмотрите, как оформлена и расположена кнопка переключения пароля.)

  • Будет ли значок работать лучше, чем текст, для переключения отображения пароля? Попробуйте Скидочное тестирование юзабилити с небольшой группой друзей или коллег.

  • Чтобы узнать, как программы чтения с экрана работают с формами, установите расширение ChromeVox и перемещайтесь по форме. Не могли бы вы заполнить форму, используя только ChromeVox? Если нет, что бы вы изменили?

Вот как ваша форма должна выглядеть на этом этапе:

Идти дальше

Эта кодовая лаборатория не охватывает несколько важных функций:

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

  • Ссылайтесь на свои Условия обслуживания и документы о политике конфиденциальности: дайте понять пользователям, как вы защищаете их данные.

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

  • Аналитика и мониторинг реальных пользователей : дайте возможность тестировать и отслеживать производительность и удобство использования вашей формы для реальных пользователей.