В этой лаборатории кода показано, как создать безопасную, доступную и простую в использовании форму регистрации.
Шаг 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 для имитации мобильных устройств.
- Отправьте URL-адрес со своего компьютера на телефон .
- Используйте такой сервис, как BrowserStack , для тестирования на различных устройствах и браузерах.
- Попробуйте заполнить форму с помощью инструмента чтения с экрана, такого как расширение ChromeVox Chrome.
Нажмите «Просмотреть приложение», чтобы просмотреть форму регистрации.
- Попробуйте свою форму на разных устройствах, используя режим устройства 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? Если нет, что бы вы изменили?
Вот как ваша форма должна выглядеть на этом этапе:
Идем дальше
Эта кодовая лаборатория не охватывает несколько важных функций:
Проверка скомпрометированных паролей. Никогда не разрешайте использовать пароли, которые были скомпрометированы. Вы можете (и должны) использовать службу проверки паролей для обнаружения скомпрометированных паролей . Вы можете использовать существующий сервис или запустить его самостоятельно на своих серверах. Попробуйте! Добавьте проверку пароля в форму.
Ссылайтесь на свои Условия обслуживания и документы о политике конфиденциальности: объясните пользователям, как вы защищаете их данные.
Стиль и фирменный стиль: убедитесь, что они соответствуют остальной части вашего сайта. При вводе имен и адресов и совершении оплаты пользователи должны чувствовать себя комфортно и верить, что они по-прежнему находятся в нужном месте.
Аналитика и мониторинг реальных пользователей : дайте возможность тестировать и отслеживать производительность и удобство использования вашей формы для реальных пользователей.