Поле ввода Input

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

Когда использовать

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

Если нужно ввести больше 5 слов — используйте многострочное поле ввода.

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

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

Название

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

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

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

Плейсхолдер

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

Плейсхолдер (от английского placeholder) — местозаполнитель. Часто используют синоним «ватермарк», но плейсхолдер — более правильное название, т.к. совпадает с соответствующим атрибутом тегов input и textarea.

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

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

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

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

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

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

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

Очистка поля

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

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

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

Для иконки используется символ из шрифта Kontur Iconic. При наведении иконка становится темнее:

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

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

Размер и расположение

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

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

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

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

Работа с клавиатурой

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

При нажатии клавиши Enter фокус переходит на следующее поле. Если поле последнее в форме, ничего не происходит.

Валидация

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

Дизайн

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

Состояния: