Input field placeholder

Input field placeholder (от англ. place — место, holder — держатель; также «текст-подсказка», «заполнитель») — это элемент пользовательского интерфейса в виде текста, отображаемый внутри поля ввода (input field) до того, как пользователь начнёт вводить данные. Обычно placeholder служит для краткого описания ожидаемого формата, содержания или примера вводимых данных, исчезая при получении полем фокуса или при начале ввода. Является атрибутом HTML-элементов <input> и <textarea>, определённым в спецификациях HTML5 и последующих версиях.

История

Концепция текста-подсказки внутри поля ввода существовала в пользовательских интерфейсах задолго до появления HTML5. В веб-дизайне начала 2000-х годов для имитации placeholder использовались JavaScript-скрипты, которые помещали подсказку в значение поля (value) и очищали его при фокусе. Этот подход имел недостатки: подсказка отправлялась на сервер вместе с данными формы, если пользователь не вводил свои данные, и требовала дополнительной обработки.

Стандартизация placeholder произошла в спецификации HTML5, опубликованной рабочей группой W3C (World Wide Web Consortium) в 2008 году (черновик) и окончательно утверждённой в 2014 году. Атрибут placeholder был включён в спецификацию для элементов <input> и <textarea>. Первыми браузерами, поддержавшими этот атрибут, стали Safari 4 (2008) и Google Chrome 2 (2009). К 2011 году поддержка была реализована в Firefox 4, Opera 11 и Internet Explorer 10. В настоящее время атрибут placeholder поддерживается всеми современными браузерами.

Технические характеристики

Синтаксис HTML

В HTML атрибут placeholder добавляется к тегам <input> или <textarea>: ``html <input type="text" placeholder="Введите ваше имя"> <textarea placeholder="Опишите проблему..."></textarea> `` Значением атрибута является строка текста, которая будет отображаться внутри поля. Длина текста не ограничена стандартом, но на практике рекомендуется не превышать 100–150 символов, чтобы подсказка полностью помещалась в поле.

Поведение

Отображение: placeholder отображается серым (или заданным через CSS) цветом, пока поле пусто и не находится в фокусе.
Исчезновение: при получении полем фокуса (событие focus) placeholder обычно исчезает, чтобы не мешать вводу. В некоторых браузерах (например, старых версиях Chrome) placeholder мог оставаться до начала ввода первого символа.
Восстановление: если поле теряет фокус (событие blur) и остаётся пустым, placeholder отображается снова.

Стилизация через CSS

Placeholder можно стилизовать с помощью псевдоэлементов и псевдоклассов CSS. Однако из-за различий в реализации браузерами требуется использовать вендорные префиксы:

::placeholder — стандартный псевдоэлемент (CSS Pseudo-Elements Module Level 4, рекомендован с 2021 года).
::-webkit-input-placeholder — для браузеров на движке WebKit (Chrome, Safari, Opera).
::-moz-placeholder — для Firefox (начиная с версии 19).
:-ms-input-placeholder — для Internet Explorer 10–11.
:-moz-placeholder — для старых версий Firefox (до 19).

Пример стилизации: ``css input::placeholder { color: #999; font-style: italic; opacity: 1; / По умолчанию в Firefox opacity: 0.54 / } ` Свойства, которые можно применять к placeholder: color, font, background, text-shadow, text-transform, letter-spacing, word-spacing и другие, связанные с оформлением текста. Свойства, влияющие на размеры и позиционирование (например, width, height, padding`), обычно не применяются.

Применение

Основные функции

Пример ввода: показ ожидаемого формата данных (например, «+7 (999) 123-45-67» для номера телефона или «01.01.2000» для даты).
Краткая инструкция: указание типа данных («Имя пользователя», «Пароль»), если метка (label) не используется или находится вне поля.
Экономия места: позволяет отказаться от отдельной метки над полем, что актуально для мобильных интерфейсов и форм с ограниченным пространством.
Улучшение юзабилити: снижает когнитивную нагрузку, подсказывая пользователю, что именно нужно ввести.

Типичные сценарии использования

Формы регистрации и авторизации (логин, пароль, email).
Формы обратной связи (имя, телефон, сообщение).
Поисковые строки (например, «Поиск по сайту»).
Поля ввода даты, времени, адреса, номера карты.
Комментарии и текстовые поля в социальных сетях, форумах, блогах.

Доступность (Accessibility)

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

Основные проблемы

Отсутствие постоянной метки: placeholder исчезает при фокусе, поэтому пользователь, начавший ввод, может забыть, что нужно вводить. Это особенно критично для длинных форм.
Низкая контрастность: по умолчанию placeholder отображается светло-серым цветом, что затрудняет чтение для людей с ослабленным зрением.
Недостаточная поддержка скринридерами: не все программы экранного доступа корректно озвучивают placeholder, или делают это только при определённых настройках. Например, JAWS (Job Access With Speech) может не объявлять placeholder, если поле уже имеет метку.
Путаница с введёнными данными: пользователи с когнитивными нарушениями могут воспринимать placeholder как уже введённые данные.

Критика и альтернативы

Критика

Проблемы с юзабилити: placeholder исчезает при фокусе, что может дезориентировать пользователя, особенно в мобильных интерфейсах, где клавиатура перекрывает часть экрана.
Несоответствие стандартам доступности: как указано выше, placeholder не может заменить метку поля.
Путаница с заполненными полями: в некоторых браузерах (например, старых версиях Internet Explorer) placeholder мог отображаться даже при введённых данных, если они совпадали с текстом подсказки.
Ограниченная стилизация: возможности CSS для оформления placeholder ограничены по сравнению с обычным текстом.

Альтернативы

Плавающие метки (floating labels): метка изначально находится внутри поля, но при фокусе или вводе «всплывает» над полем. Сочетает преимущества placeholder и постоянной метки.
Внешние метки (<label>): классический подход, когда метка располагается над или слева от поля ввода. Наиболее доступный и предсказуемый вариант.
Подсказки под полем (hint text): текст-подсказка отображается под полем ввода и не исчезает при фокусе. Может быть оформлен меньшим шрифтом или другим цветом.
Всплывающие подсказки (tooltip): при фокусе на поле появляется всплывающая подсказка с примером или форматом ввода.

Интересные факты

В спецификации HTML5 placeholder изначально назывался «hint text» (текст-подсказка), но позже был переименован в «placeholder» для соответствия терминологии пользовательских интерфейсов.
В некоторых браузерах (например, Firefox) для placeholder установлена полупрозрачность (opacity: 0.54) по умолчанию, что может вызывать проблемы с контрастностью.
Атрибут placeholder можно использовать не только для текстовых полей, но и для полей ввода пароля, email, URL, поиска, телефона и других типов, поддерживаемых HTML5.
В мобильных браузерах (например, Safari на iOS) placeholder может не исчезать при фокусе, если поле ввода находится в режиме «ввод с клавиатуры».

Источники

HTML5.2 Recommendation, W3C, 2017.
Web Content Accessibility Guidelines (WCAG) 2.1, W3C, 2018.
MDN Web Docs: <input>: The Input (Form Input) element, Mozilla.
CSS Pseudo-Elements Module Level 4, W3C, 2021.
«Placeholder Attribute: Bad for Accessibility», Nielsen Norman Group, 2016.
«Floating Labels: A Better Alternative to Placeholder Text», UX Movement, 2013.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →