Убедитесь, что все пользователи понимают ваши правила проверки. Для этого соедините элемент управления формы с элементом, объясняющим правила. Для этого добавьте aria-describedby атрибут к элементу id формы.
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">Вы можете стилизовать requiredполя с :required помощью псевдокласса CSS.
input:required {
border: 2px solid;
}Вы можете использовать :invalid псевдокласс для добавления стилей к недопустимым элементам управления формы. Кроме того, существует также :valid и :user-invalid псевдокласс для стилизации действительных элементов формы.
Иногда дизайнеры окрашивают недопустимое состояние в красный цвет, используя :invalid псевдокласс. Однако, чтобы сообщить об ошибке или успехе, вы никогда не должны полагаться только на цвет. Для людей с красно-зеленой дальтонизмом зеленая и красная кайма выглядят почти одинаково. Для них невозможно увидеть, была ли ошибка или успех. Добавьте текст или значок, чтобы сделать его очевидным.
input:invalid {
border: 2px solid red;
}Form Troubleshooter – расширение браузера для тестирования форм. Он предупреждает вас об отсутствующих autocomplete атрибутах, нестандартных атрибутах, отсутствующих или пустых метках и многом другом. Вы также можете использовать инструмент оценки доступности, такой как WAVE или axe . Эти инструменты уведомляют вас об отсутствующих метках, отсутствующих связях между метками и элементами управления формы, недостаточных цветовых контрастах и многих других проблемах доступности.
Чтобы избежать случайных нажатий и кликов, а также помочь пользователям взаимодействовать с вашей формой, сделайте кнопки достаточно большими. Рекомендуемый целевой размер кнопки — не менее 48 пикселей.
Дополнительно:
Если значение font-size меньше 16 пикселей, область просмотра Safari увеличит ввод в инпут – https://twitter.com/joshwcomeau/status/1379782931116351490
Определить разные размеры для разных указывающих устройств, например мыши, с помощью функции pointerмультимедиа CSS.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}UX: При отображении ошибок при отправке формы обязательно перейдите к первому недопустимому элементу управления формой.
Мобильные браузеры игнорируют атрибут autofocus, чтобы не вызвать произвольного отображения клавиатуры.
Атрибут autofocus следует использовать с осторожностью, поскольку он убирает фокус с клавиатуры, что потенциально может не дать использовать для навигации клавишу возврата на один символ.
Стандартные шаблоны регулярных выражений
В некоторых случаях можно позволить пользователю отправить форму, даже если она содержит ошибки. Для этого добавьте в элемент формы или отдельные поля ввода атрибут novalidate.
Проверка выполняется мгновенно, а это означает, что, когда страница загружается, поля могут быть обозначены как некорректные, даже если пользователь еще не приступал к их заполнению. Это также означает, что, пока пользователь не закончил вводить информацию, для оформления поля может использоваться стиль, предназначенный для полей с ошибочными данными и указывающий на то, что введено неверное значение. Во избежание таких ситуаций можно с помощью CSS и JavaScript сделать так, чтобы стиль, указывающий на ошибку, использовался только после того, как пользователь перешел в другое поле.
input.dirty:not(:focus):invalid {
background-color: #FFD9D9;
}
input.dirty:not(:focus):valid {
background-color: #D9FFD9;
}var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
sampleCompleted("Forms-order-dirty");
evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
var input = inputs[i];
input.addEventListener("blur", addDirtyClass);
input.addEventListener("invalid", addDirtyClass);
input.addEventListener("valid", addDirtyClass);
}Убрать outline на касание в мобильных браузерах:
.btn:focus {
outline: 0;
// Add replacement focus styling here (i.e. border)
}
/* Webkit / Chrome Specific CSS to remove tap
highlight color */
.btn {
-webkit-tap-highlight-color: transparent;
}
/* Firefox Specific CSS to remove button
differences and focus ring */
.btn {
background-image: none;
}
.btn::-moz-focus-inner {
border: 0;
}IE Windows Phone: <meta name="msapplication-tap-highlight" content="no">
Отключать упомянутые выше стили по умолчанию только в том случае, если есть псевдоклассы для :hover, :active и :focus
Такие инструменты, как Garlic.js, помогают сохранять значения формы локально до тех пор, пока форма не будет отправлена. Таким образом, пользователи не потеряют ценные данные, если случайно закроют вкладку или браузер.
Автокапитализация автоматически делает первую букву заглавной. Эта функция отлично подходит для таких полей, как имена и уличные адреса, но избегайте ее для полей паролей.
Автокоррекция изменяет слова, которые кажутся написанными с ошибками. Отключите эту функцию для уникальных полей, таких как имена, адреса и т. д.
Ввод адреса часто является самой громоздкой частью любой онлайн-формы регистрации. Упростите эту задачу, используя функцию браузера для заполнения поля на основе ранее введенных значений. Согласно исследованию Google , автозаполнение помогает людям заполнять формы на 30 % быстрее.
Можно предварительно выбрать страну пользователя на основе данных его геолокации. Но иногда предварительное заполнение полного адреса может быть проблематичным из-за проблем с точностью. Google Places API может помочь решить эту проблему. Используя службы определения местоположения, также можно задать интеллектуальные значения по умолчанию. Например, для формы «Найти рейс» можно предварительно заполнить поле «Откуда» ближайшим к пользователю аэропортом на основе геолокации пользователя.
Самая большая проблема использования текстового пароля сегодня заключается в том, что большинство людей забывают пароли. 82 % людей не могут вспомнить свои пароли , а от 5 до 10 % сеансов требуют, чтобы пользователи сбрасывали пароль. Восстановление пароля — большая проблема в электронной коммерции. 75% пользователей не совершили бы покупку, если бы им пришлось пытаться восстановить свой пароль при оформлении заказа. Будущее паролей — это отсутствие паролей. Даже сегодня мобильные разработчики могут воспользоваться преимуществами биометрических технологий. Пользователям не нужно вводить пароль; они должны иметь возможность использовать биометрические считыватели для аутентификации — вход с помощью отпечатка пальца или сканирования лица.
В идеале встроенные сообщения проверки должны появляться примерно через 500–1000 миллисекунд после того, как пользователь перестал печатать или перешел к следующему полю. У этого правила есть несколько исключений: Полезно выполнять встроенную проверку по мере ввода пользователем пароля при создании пароля (чтобы проверить, соответствует ли пароль требованиям сложности), при создании имени пользователя (чтобы проверить, доступно ли имя) и при вводе пароля. сообщение с ограничением по количеству символов.
Используйте aria-describedby атрибут в элементе управления формы, который соответствует id элементу сообщения об ошибке чтобы связать сообщение об ошибке с элементом управления формы. Далее используйте aria-live="assertive" для сообщения об ошибке. Тогда программа чтения с экрана сообщаит пользователю об ошибке в момент ее отображения.
<form>
<div>
<label for="name">Name</label>
<input required minlength="10" type="text" id="name" name="name" aria-describedby="name-validation">
<span id="name-validation" aria-live="assertive" class="validation-message"></span>
</div>
<button>Save</button>
</form>
У некоторых людей нет фамилии — так как же им заполнить поле фамилии?
Чтобы упростить и ускорить ввод имен и чтобы каждый мог ввести свое имя в любом формате, по возможности используйте единое поле формы для имен.
Компульсивное руководство Фрэнка по почтовым адресам содержит полезные ссылки и подробные рекомендации по форматам адресов в более чем 200 странах.
- recaptcha
- приманка – визуально скрытое поле формы. Люди не увидят поле приманки, но боты заполнят его. На бэкенде ваш скрипт обработки может проверить, заполнено ли поле. Если это так, то отправка, вероятно, была от бота, и вы можете ее проигнорировать. Не забудьте скрыть поле-приманку для программ чтения с экрана с помощью aria-hidden="true" атрибута.
Используйте :autofill псевдокласс CSS для стилизации элементов управления формы, которые браузер заполняет автоматически. Используйте :autofillи версию с префиксом :-webkit-autofill для лучшей совместимости браузера.
Автозаполнение особенно полезно в формах, которые вы регулярно используете, таких как регистрация и вход, оплата, оформление заказа, а также в формах, где вам нужно ввести свое имя или адрес.
<form>
<div>
<label for="address-one">Address line</label>
<input autocomplete="address-line1" required type="text" id="address-one" name="address-one">
</div>
<div>
<label for="city">City</label>
<input autocomplete="address-level2" required type="text" id="city" name="city">
</div>
<div>
<label for="state">State / Province / Region (optional)</label>
<input autcomplete="address-level1" type="text" id="state" name="state">
</div>
<div>
<label for="zip">ZIP / Postal code (optional)</label>
<input autocomplete="postal-code" type="text" id="zip" name="zip">
</div>
<div>
<label for="country">Country</label>
<input autocomplete="country" type="text" id="country" name="country">
</div>
<button>Save address</button>
</form>Вы можете определить несколько значений, разделенных пробелом для autocomplete. Скажем, у вас есть форма с адресом доставки и другая форма для платежного адреса. Чтобы сообщить браузеру почтовый индекс платежного адреса, вы можете использовать autocomplete="billing postal-code". Для адреса доставки используйте shippingв качестве первого значения.
В Safari 14 или более поздней autocomplete="one-time-code"версии вы можете использовать для этого. В Chrome на Android вы можете использовать API WebOTP для достижения этого с помощью JavaScript.
<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">Кнопка « Отправить» может находиться за панелью инструментов браузера на мобилках. Один из способов обеспечить видимость кнопок — использовать env() функцию CSS.
Представьте, что вы идете на встречу. Внезапно у вас звонит телефон, вы отвечаете на звонок и в то же время получаете уведомление от вашей страховой компании о необходимости заполнить начатую вами форму заявки. Вы открываете форму, пытаясь заполнить ее, пока идете и разговариваете.
Цель воронка (или преобразование воронка ) представляет собой серию взаимодействий , которые приводят к цели , таким как завершенная покупки (а преобразования ). Каждая воронка состоит из отдельных шагов, таких как открытие страницы корзины покупок или переход на страницу оформления заказа.
Целевая воронка для вашей формы может выглядеть так:
- Пользователь открывает страницу A с формой.
- Пользователь заполняет поле имени.
- Пользователь заполняет поле почтового индекса.
- Пользователь отправляет форму.
- Пользователь переходит на страницу B.
Целевые последовательности могут дать вам представление о том, где пользователи оставляют вашу форму и где вам нужно ее улучшить.
UX:
Используйте действенное название для кнопки « Отправить» , например «Перейти к оплате» или «Сохранить изменения», а не просто «Отправить».
Убедитесь, что пользователи могут отправить форму
Допустим, вы заполняете анкету
, нажимаете кнопку « Отправить» , но ничего не происходит. Проблема может заключаться в том, что кнопка была отключена с disabledатрибутом. Обычно кнопка « Отправить» отключается до тех пор, пока форма не станет действительной.Теоретически это звучит разумно, но вы не должны отключать кнопку « Отправить» , ожидая полного и действительного ввода пользователя. Вместо этого выделяйте недопустимые данные при их вводе и выделяйте проблемные поля для пользователя при отправке формы.
Инклюзивные отключенные кнопки
Этот атрибут подставляет нужное слово в кнопку подтверждения в соответствии с тпаблицей
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint
<form method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file" multiple>
</form>- Добавьте multiple атрибут, если пользователи должны иметь возможность загружать несколько файлов.
- Чтобы убедиться, что файлы могут быть отправлены, измените его на multipart/form-data. Без этой кодировки файлы не могут быть отправлены с POSTзапросом.
- Вы хотите включить уникальный токен безопасности в данные формы? Используйте с type="hidden". Значение типа hiddenне может быть просмотрено или изменено пользователями.
- Чтобы получить все значения формы, используйте FormData.
Чтобы удалить стандартные стрелки select элемента, используйте appearance свойство CSS. Чтобы показать стрелку по вашему выбору, определите стрелку как background:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto;
}Чтобы уведомить пользователей программ чтения с экрана, отображается ли пароль в данный момент или скрыт, используйте скрытый элемент с aria-live="polite"
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>Для Edge своя кнопка показа пароля. Убрать ее:
::-ms-reveal {
display: none
}Делаем опцию «показать пароль»
Не запрещайте вставку в поля пароля. Это раздражает пользователей, поощряет запоминающиеся и менее безопасные пароли, а менеджерам паролей сложнее предлагать и автоматически заполнять безопасный пароль.
Почему останавливать вставку паролей (SPP) неправильно
Подставить код подтверждениия из смс
<form>
<div>
<label for="name">Name on card</label>
<input required type="text" id="name" name="name" autocomplete="cc-name">
</div>
<div class="card-number">
<label>Card number</label>
<input required type="text" id="card-number" name="card-number" inputmode="numeric" autcomplete="cc-number" pattern="[0-9]+">
</div>
<div class="date-code"><div>
<label for="expiry-date">Expiry date</label>
<input required type="text" id="expiry-date" name="expiry-date" class="expiry-date" autocomplete="cc-exp" placeholder="MM/YY" minlength="4" pattern="[0-9/]+">
</div>
<div>
<label for="security-code">Security code</label>
<input required type="text" id="security-code" name="security-code" inputmode="numeric" minlength="3" maxlength="4" pattern="[0-9]+"></div>
</div>
<button>Pay $300.00</button>
</form>- Используйте type="number"только для добавочных полей, например, количество товара. Браузеры показывают стрелку вверх/вниз, type="number"которая не имеет смысла для номеров платежных карт.Используйте type="number"только для добавочных полей, например, количество товара. Браузеры показывают стрелку вверх/вниз, type="number"которая не имеет смысла для номеров платежных карт.
- Используйте, pattern="[0-9 ]+"чтобы пользователи могли включать пробелы при вводе номера карты, поскольку именно так номера отображаются на физических картах.
<form>
<div>
<label for="name">Name</label>
<input required type="text" id="name" name="name" autocomplete="name" enterkeyhint="next">
</div>
<div>
<label for="street-address">Street address</label>
<input type="text" id="street-address" name="street-address" autocomplete="street-address" required enterkeyhint="next"></input>
</div>
<div>
<label for="postal-code">ZIP or postal code (optional)</label>
<input class="postal-code" id="postal-code" name="postal-code" autocomplete="postal-code" enterkeyhint="next">
</div>
<div>
<label for="city">City</label>
<input required type="text" id="city" name="city" autocomplete="address-level2" enterkeyhint="next">
</div>
<div>
<label for="country">Country or region</label>
<select id="country" name="country" autocomplete="country" enterkeyhint="done" required>
<option></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>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua & Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AC">Ascension Island</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia & Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="VG">British Virgin Islands</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="BQ">Caribbean Netherlands</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo - Brazzaville</option>
<option value="CD">Congo - Kinshasa</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d’Ivoire</option>
<option value="HR">Croatia</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czechia</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="SZ">Eswatini</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Islas Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard & McDonald Islands</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="XK">Kosovo</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar (Burma)</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="KP">North Korea</option>
<option value="MK">North Macedonia</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestine</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn Islands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">São Tomé & Príncipe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia & South Sandwich Islands</option>
<option value="KR">South Korea</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="BL">St Barthélemy</option>
<option value="SH">St Helena</option>
<option value="KN">St Kitts & Nevis</option>
<option value="LC">St Lucia</option>
<option value="MF">St Martin</option>
<option value="PM">St Pierre & Miquelon</option>
<option value="VC">St Vincent & Grenadines</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard & Jan Mayen</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad & Tobago</option>
<option value="TA">Tristan da Cunha</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks & Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UM">US Outlying Islands</option>
<option value="VI">US Virgin Islands</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="WF">Wallis & Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<button>Save address</button>
</form>-
Используйте единый адрес для улицы — не у каждого адреса есть номер улицы.
-
Сделайте поле почтового индекса необязательным — не у каждого адреса есть почтовый индекс.
-
Используйте autocomplete="country"for, где valuefor — это код страны. Хотите использовать для названия страны? Используйте autocomplete="country-name".
-
Измените метку Enterклавиши на экранных клавиатурах с помощью enterkeyhintатрибута. Используйте enterkeyhint="done"для последнего enterkeyhint="next"элемента управления формы и для других элементов управления формы.
-
Скажем, у вас есть форма с адресом доставки и другая форма для платежного адреса. Чтобы сообщить браузеру, какой почтовый индекс является платежным адресом, вы можете использовать autocomplete="billing postal-code". Для адреса доставки используйте shippingв качестве первого значения.
Places autocomplete addressform – чтобы помочь пользователям искать адреса