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

Сэм Даттон

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

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

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

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

Взгляните на 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 :

Нажмите View App, чтобы увидеть вашу стилизованную форму регистрации. Затем нажмите View Source , чтобы вернуться в 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" для ввода Email означает, что менеджер паролей браузера сохранит адрес электронной почты как "имя" для этого пользователя (имя пользователя!) вместе с паролем. * autocomplete="new-password" для 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. Посмотрите, как оформлена и расположена кнопка переключения пароля.)

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

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

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

Двигаясь дальше

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

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

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

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

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