Формы адреса¶

Помогите пользователям быстро и легко заполнять формы адресов.

Заполнение адреса может отнимать много времени и приносить разочарование. Что такое Адресная строка 2? Возможно, у вас нет фамилии, тогда что нужно ввести в поле Фамилия? Избегайте этих недоразумений и помогайте пользователям заполнять адресные формы.

Убедитесь, что ваша адресная форма проста в использовании¶

Во многих формах используется одно поле для имени и фамилии. Однако у некоторых людей нет фамилии или их имена не состоят из двух частей, поэтому как им заполнять поле фамилии? Используйте единый <input> для поля фамилии. Подробнее о обработке различных форматов имен.

!!!warning "" Никогда не ограничивайте допустимые символы для имен только латиницей. Разрешите символы Юникода для имени <input>, чтобы каждый мог заполнить свое имя.

Также используйте один <input> для адреса улицы - не каждый адрес имеет номер улицы.

По данным исследования, Адресная строка 2 может сбивать пользователей с толку. Рассмотрите возможность использования <textarea> для всего адреса, или спрячьте поле Адресная строка 2 за раскрывающейся <button>.

Будьте осторожны с описаниями элементов управления формы. Например, пользователи в США говорят ZIP, а в Великобритании postcode. Используйте <label for="zip">ZIP или почтовый индекс (необязательно)</label>, чтобы убедиться, что пользователи знают, какие данные нужно вводить. Поле почтового индекса можно сделать необязательным - не каждый адрес имеет почтовый индекс.

Для поиска адресов можно использовать такие сервисы, как Place Autocomplete или Loqate. Рассмотрите возможность исключения поиска адреса по почтовому индексу и предоставляйте поиск адреса только в качестве дополнительной опции: не заставляйте людей использовать его.

Помогите пользователям ввести свой адрес¶

Атрибут autocomplete может помочь пользователям повторно ввести свой адрес:

autocomplete="name"
autocomplete="street-address"
autocomplete="postal-code"
autocomplete="country"

Для страны возможны два значения autocomplete:

country: код страны или территории
country-name: название страны или территории.

Используйте autocomplete="country" для <select>, где значением для <option> является код страны. Хотите использовать <input> для названия страны? Используйте autocomplete="country-name".

Для autocomplete можно задать несколько значений, разделенных пробелом. Например, у вас есть форма с адресом доставки и другая форма для адреса выставления счета. Чтобы указать браузеру, какой почтовый индекс используется для адреса выставления счета, можно использовать autocomplete="billing postal-code". Для адреса доставки в качестве первого значения используйте shipping.

Измените метку для клавиши Enter на экранных клавиатурах с помощью атрибута enterkeyhint. Используйте enterkeyhint="done" для последнего элемента управления формы и enterkeyhint="next" для остальных элементов управления формы.

Ресурсы¶

Источник — Address forms