Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Создание потрясающих форм

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

Общие сведения об этих указаниях по созданию потрясающих форм см. в приведенном далее видеоролике.

Создание эффективных форм

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

TL;DR

  • Заранее заполняйте поля имеющимися данными и обязательно используйте автозаполнение.
  • Используйте четко обозначенные индикаторы хода выполнения, чтобы пользователям было проще ориентироваться в формах, состоящих из нескольких частей.
  • Предоставляйте наглядный календарь, чтобы пользователям не приходилось переходить с сайта в приложение ''Календарь'' на своем смартфоне.

Сводите к минимуму повторяющиеся действия и одинаковые поля

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

Отображение хода выполнения в формах, состоящих из нескольких частей
На веб-сайте Progressive.com пользователей сначала просят ввести свой почтовый индекс, который затем автоматически переносится в следующую часть формы.

Ищите возможность заранее вставлять данные, которые вам уже известны или можно предвидеть, чтобы пользователям не пришлось указывать их еще раз. Например, в поля адреса для доставки автоматически вносите последний адрес доставки, указанный этим пользователем.

Показывайте пользователям, как далеко они уже зашли

Индикаторы хода выполнения и меню должны точно показывать общий ход заполнения форм и выполнения процессов, состоящих из нескольких частей.

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

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

Предоставляйте наглядные календари при выборе дат

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

Веб-сайт отеля с удобным календарем
Веб-сайт отеля с удобным виджетом календаря для выбора дат.

Выбор лучшего типа ввода

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

TL;DR

  • Выбирайте наиболее подходящий тип ввода для своих данных.
  • По мере ввода данных выдавайте подсказки с помощью элемента datalist.

Типы ввода HTML5

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

Тип ввода Стандартная клавиатура
url
Для ввода URL-адреса. Ввод должен начинаться с соответствующей схемы URI, напримерhttp://, ftp:// или mailto:.
tel
Для ввода номеров телефонов. Этот тип не принуждает использовать определенный синтаксис для проверки, поэтому, если требуется обеспечить конкретный формат, можно использовать шаблон.
email
Для ввода адресов электронной почты. Выдает подсказки о том, что по умолчанию на клавиатуре должна быть клавиша с символом @. Можно добавить атрибут multiple, если должно быть указано несколько адресов электронной почты.
search
Поле для ввода текста в стиле, согласованном со стилем поля поиска, реализованного в данной платформе.
number
Для ввода цифр. Это может быть любое рациональное целое число или число с плавающей запятой.
range
Для ввода цифр, однако, в отличие от типа числового ввода, значение здесь менее важно. Отображается на экране в виде ползунка.
datetime-local
Для ввода значений даты и времени в местном часовом поясе.
date
Для ввода даты (только), без часового пояса.
time
Для ввода времени (только), без часового пояса.
week
Для ввода недели (только), без часового пояса.
month
Для ввода месяца (только), без часового пояса.
color
Для выбора цвета.

Выдавайте подсказки во время ввода с помощью datalist

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

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
  <option value="white">
  <option value="milk">
  <option value="dark">
</datalist>

Обозначайте пола полЯ надлежащим образом

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

TL;DR

  • Всегда используйте элементы label для полей форм, причем эти обозначения должны быть видны, когда фокус переводится на данное поле.
  • Используйте элементы placeholder, с помощью которых подсказывайте пользователям, что именно они должны ввести.
  • Чтобы помочь браузеру в автоматическом заполнении форм, используйте стандартные элементы name для полей ввода и указывайте атрибут autocomplete.

Важность обозначений

Элемент label сообщает пользователю, какую информацию необходимо ввести в элемент формы. Каждый элемент label связывается с элементом поля ввода путем его размещения внутри элемента label либо с помощью атрибута "for" . Применение обозначений к элементам форм также позволяет улучшить целевой размер зоны касания: для перевода фокуса на элемент ввода пользователь может коснуться как обозначения, так и поля ввода.

<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required id="frmAddressS"
  placeholder="123 Any Street" autocomplete="shipping street-address">

Размер и местоположение обозначения

Обозначения и поля ввода должны быть достаточно большими, чтобы их было легко нажимать. При книжной ориентации обозначения полей следует размещать их над элементами ввода, а при альбомной – сбоку от них. И обозначения полей, и соответствующие поля ввода должны быть видны на экране одновременно. Будьте осторожны с нестандартными обработчиками прокрутки, которые могут прокрутить элемент ввода вверх страницы, скрыв обозначение, либо обозначения, расположенные ниже элементов ввода, могут оказаться под виртуальной клавиатурой.

Используйте заполнители

Атрибут placeholder подсказывает пользователю, что именно следует указать в поле ввода, обычно отображая значение в виде текста светлого тона, пока пользователь не начнет вводить информацию в элемент.

<input type="text" placeholder="MM-YYYY" ...>

Используйте метаданные для обеспечения автозаполнения

Пользователям нравится, когда веб-сайты экономят их время, автоматически заполняя такие стандартные поля, как имена, адреса электронной почты и другие часто используемые поля. Кроме того, это позволяет снизить вероятность ошибки при вводе – особенно на виртуальных клавиатурах и небольших устройствах.

Браузеры используют различные эвристические методы для определения того, какие поля они могут заполнять автоматически данными, указанными пользователем ранее, а вы можете давать подсказки браузеру, задавая каждому полю ввода атрибуты name и autocomplete .

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

<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">

Рекомендуемые значения атрибутов полей ввода name и autocomplete

Значения атрибута autocomplete являются частью текущего стандарта WHATWG HTML. Далее приведены наиболее часто используемые атрибуты autocomplete.

Атрибуты autocomplete можно сопровождать именем раздела, например shippinggiven-name или billingstreet-address. Браузер будет заполнять разные разделы по отдельности, а не как непрерывную форму.

Атрибут Атрибут
Тип контентаnameautocomplete
Имя name fname mname lname
  • name (полное имя)
  • given-name (имя)
  • additional-name (отчество)
  • family-name (фамилия)
Адрес эл. почты email email
Адрес address city region province state zip zip2 postal country
  • Для ввода одного адреса:
    • street-address
  • Для ввода двух адресов:
    • address-line1
    • address-line2
  • address-level1 (область или республика)
  • address-level2 (город)
  • postal-code (почтовый индекс)
  • country
Телефон phone mobile country-code area-code exchange suffix ext tel
Кредитная карта ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • cc-name
  • cc-number
  • cc-csc
  • cc-exp-month
  • cc-exp-year
  • cc-exp
  • cc-type

Атрибут autofocus

В некоторые формы, например, на главной странице Google, где единственное, что требуется от пользователя, – это заполнить одно поле, можно добавить атрибут autofocus . Когда этот атрибут задан, настольные браузеры сразу же переводят фокус на это поле ввода, после чего пользователи могут немедленно начать использовать форму. Мобильные браузеры игнорируют атрибут autofocus, чтобы не вызвать произвольного отображения клавиатуры .

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

<input type="text" autofocus ...>

Обеспечение проверки в реальном времени

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

TL;DR

  • Используйте встроенные в браузеры атрибуты проверки, например pattern, required, min, max и т. д.
  • При необходимости более сложных вариантов проверки используйте JavaScript и API-интерфейс проверки ограничений.
  • Отображайте ошибки, выявленные при проверке, в реальном времени, а если пользователь пытается отправить неправильно заполненную форму, показывайте все поля, которые ему необходимо исправить.

Используйте следующие атрибуты для проверки ввода

Атрибут pattern

Атрибут pattern задает регулярное выражение, используемое для проверки поля ввода. Например, чтобы проверить почтовый индекс США (5 цифр, за которыми иногда следует дефис и еще четыре цифры), атрибутpattern необходимо задать следующим образом:

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
Стандартные шаблоны регулярных выражений
Описание Регулярное выражение
Почтовый адрес [a-zA-Z\d\s\-\,\#\.\+]+
Почтовый индекс (США) ^\d{5,6}(?:[-\s]\d{4})?$
IP-адрес (IPv4) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
IP-адрес (IPv6) ^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
IP-адрес (оба) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
Номер кредитной карты ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
Номер социального страхования ^\d{3}-\d{2}-\d{4}$
Номер телефона в Северной Америке ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$
Атрибут required

Если задан атрибут required, то, чтобы получить возможность отправить форму, в поле, снабженном этим атрибутом, должно быть указано значение. Например, чтобы сделать поле почтового индекса обязательным для заполнения, нужно просто добавить атрибут required:

<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
Атрибуты min, max и step

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

<input type="number" min="1" max="13" step="0.5" ...>
Атрибут maxlength

С помощью атрибута maxlength можно задавать максимальную длину вводимого значения или текстового поля. Он полезен, когда требуется ограничить длину информации, которую может указать пользователь. Например, если длину имени файла требуется ограничить 12 символами, это можно сделать следующим образом.

<input type="text" id="83filename" maxlength="12" ...>
Атрибут minlength

С помощью атрибута minlength можно задавать минимальную длину вводимого значения или текстового поля. Он полезен, когда требуется указать минимальную длину информации, которую должен предоставить пользователь. Например, если требуется указать, что имя файла должно состоять минимум из 8 символов, это можно сделать следующим образом.

<input type="text" id="83filename" minlength="8" ...>
Атрибут novalidate

В некоторых случаях можно позволить пользователю отправить форму, даже если она содержит ошибки. Для этого добавьте в элемент формы или отдельные поля ввода атрибут novalidate. В этом случае все псевдоклассы и API-интерфейсы JavaScript все равно позволят вам проверять правильность заполнения формы.

<form role="form" novalidate>
  <label for="inpEmail">Email address</label>
  <input type="email" ...>
</form>

Для более сложной проверки в реальном времени используйте JavaScript

Когда встроенной проверки и регулярных выражений недостаточно, можно использовать API-интерфейс проверки ограничений – мощное средство для выполнения нестандартной проверки. С помощью этого API-интерфейса можно, например, задать нетипичную ошибочную ситуацию, проверить корректность элемента и определить причину, по которой данный элемент является некорректным:

API-интерфейс Описание
setCustomValidity() Задает нестандартное сообщение о результатах проверки, а свойству customError объекта ValidityState присваивает значение true.
validationMessage Возвращает строку с указанием причины, по которой поле не прошло проверку.
checkValidity() Возвращает значение true, если элемент прошел проверку по всем ограничениям. В противном случае возвращается значение false. Определение реакции страницы на ситуацию, когда проверка возвращает значение false, остается за разработчиком.
reportValidity() Возвращает значение true, если элемент прошел проверку по всем ограничениям. В противном случае возвращается значение false. Когда страница возвращает значение false, о нарушении ограничения сообщается пользователю.
validity Возвращает объект ValidityState, представляющий состояния корректности элемента.
Задавайте нестандартные сообщения о результатах проверки

Если поле не проходит проверку, обозначьте его как некорректное с помощью setCustomValidity() и поясните, в чем заключается ошибка. Например, при заполнении регистрационной формы пользователю может быть предложено для подтверждения его адреса электронной почты ввести его дважды. Используйте событие blur после ввода данных во втором поле, чтобы проверить правильность указанных данных и выдать соответствующий ответ. Например:

if (input.value != primaryEmail) {
  // the provided value doesn't match the primary email address
  input.setCustomValidity('The two email addresses must match.');
  console.log("E-mail addresses do not match", primaryEmail, input.value);
} else {
  // input is valid -- reset the error message
  input.setCustomValidity('');
}
Не позволяйте отправлять формы с ошибками

Поскольку некоторые браузеры позволяют пользователю отправлять формы, даже если в них есть некорректные данные, необходимо отслеживать событие отправки и с помощью checkValidity() в элементе формы определять ее корректность. Например:

form.addEventListener("submit", function(evt) {
  if (form.checkValidity() === false) {
    evt.preventDefault();
    alert("Form is invalid - submission prevented!");
    return false;
  } else {
    // To prevent data from being sent, we've prevented submission
    // here, but normally this code block would not exist.
    evt.preventDefault();
    alert("Form is valid - submission prevented to protect privacy.");
    return false;
  }
});

Отображайте ответ в реальном времени

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

Пвевдокласс Использование
:valid В явном виде задает стиль, который будет использоваться для поля ввода, когда указанное в нем значение соответствует всем требованиям проверки.
:invalid В явном виде задает стиль, который будет использоваться для поля ввода, когда указанное в нем значение не соответствует всем требованиям проверки.
:required В явном виде задает стиль элемента ввода, для которого задан атрибут required.
:optional В явном виде задает стиль элемента ввода, для которого не задан атрибут required.
:in-range В явном виде задает стиль элемента ввода числа, значение которого находится в пределах диапазона.
:out-of-range В явном виде задает стиль элемента ввода числа, значение которого находится вне диапазона.

Проверка выполняется мгновенно, а это означает, что, когда страница загружается, поля могут быть обозначены как некорректные, даже если пользователь еще не приступал к их заполнению. Это также означает, что, пока пользователь не закончил вводить информацию, для оформления поля может использоваться стиль, предназначенный для полей с ошибочными данными и указывающий на то, что введено неверное значение. Во избежание таких ситуаций можно с помощью 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);
}