Создайте форму, которая максимально упростит ввод адреса на компьютерах и мобильных устройствах. Убедитесь, что форма максимально использует встроенные функции браузера для автозаполнения, проверки и ограничений на ввод данных.
Рекомендации по внедрению
Ниже приведены наиболее важные рекомендации по созданию успешных форм адресов.
Используйте понятный и корректный HTML-код
Используйте элементы и атрибуты, предназначенные для создания форм:
<form>,<input>,<label>и<button>type,autocompleteиinputmode.
Они активируют встроенные функции браузера, улучшают доступность и добавляют смысл в разметку.
Используйте элемент <label> для обозначения полей ввода данных в форме
Чтобы добавить ярлык к <input>, <select> или <textarea>, используйте <label>. Свяжите ярлык с полем ввода, присвоив атрибуту for ярлыка то же значение, что и у атрибута id поля ввода.
Как использовать HTML-атрибуты
Чтобы пользователям было проще вводить данные, используйте подходящий атрибут <type> элемента <input>. Это позволит показывать нужную клавиатуру на мобильных устройствах и включить базовую встроенную проверку в браузере.
Всегда используйте type="email" для адресов электронной почты и type="tel" для номеров телефонов.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Каждый элемент <input>, <select> и <textarea> ДОЛЖЕН иметь соответствующий атрибут autocomplete, чтобы улучшить доступность и помочь пользователям избежать повторного ввода данных.
Добавьте полезные кнопки
Используйте <button> для кнопок. Вы также можете использовать <input type="submit">, но не div или другие элементы, которые не предназначены для создания кнопок. Элементы button обеспечивают доступность, встроенную функциональность отправки форм и легко стилизуются.
Укажите для каждой кнопки отправки формы значение, которое описывает ее действие. Для каждого шага на пути к оформлению заказа используйте описательный призыв к действию, который показывает прогресс и делает следующий шаг очевидным. Например, назовите кнопку отправки формы с адресом доставки Перейти к оплате, а не Продолжить или Сохранить.
По возможности используйте одно поле для ввода имени
Позвольте пользователям вводить имя в одном поле, если у вас нет веских причин хранить отдельно имена, фамилии, обращения и другие части имени. Использование одного поля для ввода имени упрощает форму, позволяет вырезать и вставлять текст, а также упрощает автозаполнение.
Разрешить международные имена. Для проверки не используйте регулярные выражения, которые соответствуют только латинским символам. Если вы выберете вариант "Только латиница", пользователи, в именах или адресах которых есть символы не из латинского алфавита, не смогут отправлять письма в ваш домен. Вместо этого разрешите сопоставление букв Unicode и убедитесь, что ваш бэкенд поддерживает Unicode как для ввода, так и для вывода. Современные браузеры поддерживают Unicode в регулярных выражениях.
Поддержка разных форматов адресов
При создании формы адреса учитывайте, что форматы адресов могут различаться даже в пределах одной страны. Не делайте предположений о том, как должен выглядеть "нормальный" адрес.
По возможности используйте один элемент <textarea> для почтового адреса.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Это наиболее гибкий вариант, который подходит для различных форматов местных и международных адресов.
Если в вашей модели данных адрес должен быть разбит на несколько строк, используйте по одному элементу <input> на строку с токенами address-line1, address-line2 и, если нужно, address-line3 autocomplete, чтобы автозаполнение работало. Не разделяйте почтовый адрес по полям, в которых нет этих токенов, и сделайте обязательной только первую строку.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Помогите пользователям не пропустить поля данных
Добавьте атрибут required к обязательным полям.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Резервные стратегии
Автозаполнение – это прогрессивное улучшение. В браузерах, которые не поддерживают автозаполнение, пользователям придется вводить адрес вручную. Ограничения семантического HTML (такие как type, inputmode и required) будут по-прежнему работать как стандартная проверка формы.