Поле ввода Input

Поле ввода дает возможность указать значение с помощью клавиатуры.

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

Если вводимое значение имеет определенный формат, используйте специальную версию поля:

• Поле с маской
• Поле с паролем
• Поле с валютой
• Поле с телефоном

В HTML5 поле ввода может быть разных типов — color, date, email, password, text, url и т.д. В сервисах Контура используйте только типы text и password. Остальные типы либо не поддерживаются основными браузерами, либо предлагают плохой пользовательский интерфейс и валидацию, которая будет отличаться по дизайну от нашей.

Название поля пишется с заглавной буквы.

Называйте поле ввода существительным, указывающим что нужно ввести. Избегайте в названии слов «ваш», «введите» и подобных — они не несут смысла.

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

Если из названия не очевидно, как заполнять поле, используйте плейсхолдер – подсказку, которая отображается внутри поля, пока оно не заполнено.

При получении полем фокуса плейсхолдер становится светлее, при вводе первого символа исчезает.

Плейсхолдер не должен подсказывать конкретное значение, которое нужно ввести в поле.

Если поле вычисляемое и вы рассчитали значение — используйте автополе:

Если вы предполагаете значение — предзаполните поле, пользователь сможет его отредактировать:

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

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

Не используйте плейсхолдер для указания названий полей во всей форме. В заполненном состоянии такая форма становится «слепой»:

Если пользователю нужно часто очищать поле и вводить новое значение — используйте для этого специальную кнопку-крестик.

Крестик показывается, когда в поле введен хотя бы 1 символ. Крестик показывается даже когда фокус находится вне поля.

При клике на крестик фокус переходит в поле, введенное значение стирается:

При наведении иконка становится темнее:

Область для нажатия по высоте равна полю ввода, по ширине 28 px:

Internet Explorer 10 рисует свой крестик для любого поля ввода в фокусе. Чтобы этот крестик не перекрывал нашу иконку, нужно дописать стиль:

Счетчик введенных символов в обычном инпуте работает так же, как и в многострочном поле. Располагается справа, на той же строке, что и вводимый текст:

Смотрите подробное описание работы счетчика в гайде по многострочному полю.

Поле ввода, как и кнопка, может быть трех размеров. Используйте средние и большие поля ввода в том случае, если это главные контролы на странице. Например, поле поиска в справочнике. В средних полях размер шрифта — 16 px, а в самых больших — 18 px.

Название поля должно выравниваться по базовой линии текста в поле:

Название поля в несколько строк должно выравниваться по базовой линии первой строки:

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

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

В рамках одной формы нужно выбрать 3-4 ширины для полей. Так форма выглядит проще и аккуратнее.

При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка, которая сохраняется до потери фокуса.

Чёрная рамка фокуса не появляется если поле находится в состоянии ошибки или предупреждения, до тех пор пока значение в поле не будет изменено.

Допустимо переносить фокус на следующее поле при нажатии клавиши Enter в поле — иногда такое поведение удобно и интуитивно понятно для пользователя. Если поле последнее в форме, переход фокуса по Enter не должен происходить на кнопку отправки формы.

Поле с ошибкой подсвечивается красной рамкой.

О поведении полей ввода с ошибками читайте в гайде по валидации.

Углы поля имеют скругления в 2px. В рамке поля используется чисто черный цвет с непрозрачностью 16% — так поле достаточно контрастно выглядит на серых и цветных фонах.

Состояния: