Кодовая лаборатория рекомендаций по форме адреса

Сэм Даттон

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

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

Шаг 1. Максимально используйте элементы и атрибуты HTML

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

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

  • Добавьте поле имени в элемент <form> с помощью следующего кода:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Это может показаться сложным и повторяющимся только для одного поля имени, но оно уже делает многое.

Вы связали label с input , сопоставив атрибут label for с name или id input данных. Касание или щелчок по метке перемещает фокус на ее ввод, создавая гораздо большую цель, чем ввод сам по себе, что хорошо для пальцев, больших пальцев и щелчков мыши! Программы чтения с экрана озвучивают текст метки, когда метка или ввод метки получают фокус.

А как насчет name="name" ? Это имя (которое называется «имя»!), связанное с данными из этого ввода, которые отправляются на сервер при отправке формы. Включение атрибута name также означает, что к данным этого элемента можно получить доступ через API FormData .

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

Что происходит, когда вы нажимаете или щелкаете поле ввода имени в Chrome? Вы должны увидеть предложения автозаполнения, которые сохранил браузер, и предположения, подходящие для этого ввода, учитывая его name и значения id .

Теперь добавьте autocomplete="name" в свой входной код, чтобы он выглядел следующим образом:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Перезагрузите страницу в Chrome и коснитесь или щелкните поле ввода имени . Какие различия вы видите?

Вы должны заметить небольшое изменение: с autocomplete="name" предложения теперь представляют собой конкретные значения, которые ранее использовались во входных данных формы, которые также имели autocomplete="name" . Браузер не просто догадывается, что может быть уместно: у вас есть контроль. Вы также увидите опцию «Управление…» , позволяющую просматривать и редактировать имена и адреса, сохраненные в вашем браузере.

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

Теперь добавьте атрибуты проверки ограничений maxlength , pattern и required , чтобы ваш входной код выглядел следующим образом:

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

  • maxlength="100" означает, что браузер не разрешает ввод данных длиной более 100 символов.

  • pattern="[\p{L} \-\.]+" использует регулярное выражение, которое позволяет использовать буквы Юникода , дефисы и точки (точки). Это означает, что такие имена, как Франсуаза или Йорг, не классифицируются как «недействительные». Это не тот случай, если вы используете значение \w , которое [допускает только символы латинского алфавита .

  • required значит… требуется! Браузер не позволит отправить форму без данных для этого поля и предупредит и выделит ввод, если вы попытаетесь его отправить. Никакого дополнительного кода не требуется!

Чтобы проверить, как форма работает с этими атрибутами и без них, попробуйте ввести данные:

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

Шаг 3. Добавьте в форму гибкое поле адреса.

Чтобы добавить поле адреса, добавьте в форму следующий код:

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

textarea — это наиболее гибкий способ для пользователей ввести свой адрес, и он отлично подходит для вырезания и вставки.

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

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

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

Вы увидите, что почтовый индекс не является обязательным: это связано с тем, что во многих странах почтовые индексы не используются . ( Global Sourcebook предоставляет информацию о форматах адресов для 194 различных стран, включая примеры адресов.) Вместо Country используется метка Country или регион , поскольку некоторые варианты из полного списка (например, Великобритания) не относятся к отдельным странам (несмотря на значение autocomplete ).

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

Вы создали высокофункциональную форму адреса, но что, если вашему сайту требуется более одного адреса, например, для доставки и выставления счетов? Попробуйте обновить форму, чтобы клиенты могли вводить адреса доставки и платежные адреса. Как сделать ввод данных максимально быстрым и простым, особенно если два адреса совпадают? В статье, прилагаемой к этой кодовой лаборатории, объясняются методы обработки нескольких адресов . Что бы вы ни делали, обязательно используйте правильные значения autocomplete !

Шаг 5. Добавьте поле номера телефона.

Чтобы добавить ввод номера телефона, добавьте в форму следующий код:

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

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

Есть два атрибута, которые могут улучшить взаимодействие с пользователем при вводе номера телефона:

  • type="tel" гарантирует, что мобильные пользователи получат подходящую клавиатуру.
  • enterkeyhint="done" устанавливает метку клавиши ввода на мобильной клавиатуре, чтобы показать, что это последнее поле и теперь можно отправить форму (по умолчанию — next ).
Два снимка экрана формы на Android, показывающие, как входной атрибут enterkeyhint меняет значок кнопки ввода.
Используйте атрибут enterkeyhint, чтобы установить метку кнопки «Ввод»: «Далее» и «Готово».

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

  • Попробуйте свою форму на разных устройствах. На какие устройства и браузеры вы ориентируетесь? Как можно улучшить форму?

Есть несколько способов протестировать форму на разных устройствах:

Идти дальше

  • Аналитика и мониторинг реальных пользователей : дайте возможность тестировать и отслеживать производительность и удобство использования вашей формы для реальных пользователей, а также проверять успешность изменений. Вам следует отслеживать производительность загрузки и другие веб-показатели , а также анализ страниц (какая доля пользователей отказывается от вашей адресной формы, не заполнив ее? сколько времени пользователи проводят на страницах вашей адресной формы?) и аналитику взаимодействия (какие компоненты страницы используют пользователи). общаться или нет?)

  • Где находятся ваши пользователи? Как они форматируют свой адрес? Какие имена они используют для компонентов адреса, таких как почтовый индекс или почтовый индекс? «Навязчивое руководство Фрэнка по почтовым адресам» содержит полезные ссылки и подробное руководство с подробным описанием форматов адресов в более чем 200 странах.

  • Селекторы стран печально известны своим плохим удобством использования . Лучше избегать выбора элементов для длинного списка элементов, а стандарт кодов стран ISO 3166 в настоящее время перечисляет 249 стран ! Вместо <select> вы можете рассмотреть альтернативу, например, селектор страны Института Баймарда .

    Можете ли вы разработать лучший селектор для списков с большим количеством элементов? Как бы вы обеспечили доступность вашего дизайна на различных устройствах и платформах? (Элемент <select> не очень хорошо работает для большого количества элементов, но, по крайней мере, его можно использовать практически во всех браузерах и вспомогательных устройствах!)

    В сообщении блога <input type="country" /> обсуждается сложность стандартизации селектора страны. Локализация названий стран также может быть проблематичной. В списках стран есть инструмент для загрузки кодов стран и названий на нескольких языках и в разных форматах.