Каталог курсов

Заглушка, placeholder

Заглушка (placeholder) — текст, отображаемый в поле ввода формы на сайте до того, как пользователь начнёт заполнять это поле. Обычно используется для подсказки о формате ввода данных.

Реализуется в HTML-вёрстке и frontend-разработке с помощью атрибута placeholder для тега input. Один из вариантов заглушки — подсказка в поле «Пароль»: «Не менее 8 символов».

Применяется с целью улучшить юзабилити веб-страницы с интерактивными формами. Два основных способа расположения заглушки:

Дополнение заголовка. Заголовочная строка видна всё время и пропадает, когда пользователь начинает вводить данные. Это наиболее грамотный способ
Замещение заголовка. Заглушка используется вместо заголовка, что помогает уменьшить размер формы и количество текста на странице

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

Что нужно учитывать при внедрении заглушек в код сайта:

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

Узнайте больше в Медиа Нетологии:

Бесплатный курс по дизайну и UX:

Основы вёрстки сайта

Программы обучения Нетологии по программированию:

← В глоссарий