Атрибут placeholder в HTML — это встроенная текстовая подсказка внутри поля ввода, которая показывает пользователю, какой формат данных ожидается, пока поле пустое. Проще говоря, это «легкая надпись-призрак» в input или textarea: она помогает сориентироваться, но не заменяет label, не сохраняется как введенное значение и исчезает, когда пользователь начинает печатать.
Что такое placeholder в HTML и зачем он нужен
Placeholder — это атрибут формы, который выводит краткую подсказку внутри пустого поля ввода и помогает пользователю быстрее понять назначение элемента.
Если label — это табличка на двери, то placeholder — это короткая записка на стекле: она видна сразу, но не должна быть единственным источником информации. Атрибут поддерживается у текстовых полей, например у input с типами text, search, email, tel, url, password, а также у textarea. Его основная задача — сократить когнитивную нагрузку: человек видит пример формата и тратит меньше времени на догадки.
По данным исследования Baymard Institute по usability форм, понятные подсказки и примеры формата уменьшают число ошибок при заполнении полей и снижают вероятность отказа от формы. Это особенно заметно в полях с повышенным риском ошибки: email, телефон, адрес, промокод, поиск по сайту.
Где placeholder действительно полезен
- В строке поиска: «Например, беспроводные наушники».
- В поле email: «name@example.com».
- В поле телефона: «+380 67 123 45 67».
- В textarea для комментария: «Кратко опишите проблему».
Где placeholder использовать не стоит как единственную подсказку
- В длинных формах регистрации.
- В полях, где важно постоянное понимание назначения.
- В интерфейсах для пользователей с когнитивными или зрительными ограничениями.
Причина простая: как только человек начинает ввод, подсказка исчезает. Если формат сложный, пользователь остается без ориентира.
Как добавить подсказку в поле: синтаксис, работа атрибута и базовый пример
Добавить placeholder можно через одноименный атрибут у элемента input или textarea, указав в кавычках краткий текст подсказки.
Базовый синтаксис выглядит предельно просто: браузер сам покажет текст внутри пустого поля. Никакие скрипты для этого не нужны.
Пример для input
<label for="email">Email</label>
<input id="email" type="email" placeholder="name@example.com">Пример для textarea
<label for="message">Сообщение</label>
<textarea id="message" placeholder="Опишите вопрос в 2–3 предложениях"></textarea>Что важно помнить о работе placeholder
| Свойство | Как работает |
|---|---|
| Показывается только в пустом поле | Как только пользователь вводит текст, подсказка исчезает |
| Не отправляется как значение формы | На сервер уходит только то, что реально ввел пользователь |
| Не заменяет label | Для доступности и ясности поле должно иметь отдельную подпись |
| Поддерживается современными браузерами | Атрибут работает в актуальных версиях основных браузеров |
Плейсхолдер в полях ввода: чем он отличается от label и value
Placeholder — это временная подсказка внутри пустого поля, label — постоянная подпись поля, а value — уже заданное значение элемента.
Эти три вещи часто путают, хотя у них совершенно разные роли. Представьте стойку регистрации в отеле: label — это надпись «Номер паспорта», placeholder — пример «AB1234567», а value — уже вписанный номер, если система его подставила заранее.
Разница на практике
<label for="phone">Телефон</label>
<input id="phone" type="tel" placeholder="+380 67 123 45 67">В этом примере:
- Телефон — это label.
- +380 67 123 45 67 — это placeholder.
- Если бы в поле уже стояло реальное значение, оно задавалось бы через value.
Пример с value
<label for="city">Город</label>
<input id="city" type="text" value="Львов">Здесь «Львов» — это уже не подсказка, а содержимое поля. Пользователь увидит текст как введенное значение, и он будет отправлен при отправке формы, если не изменить его.
Я почти всегда советую писать label даже там, где кажется, что placeholder «и так все объясняет». На реальных проектах именно постоянная подпись поля чаще всего убирает путаницу и сокращает число незавершенных форм.
Как правильно написать текст placeholder: длина, примеры и UX-логика
Хороший placeholder — это короткая, конкретная и понятная подсказка, которая показывает формат или пример ожидаемого ввода.
Лучшие варианты состоят обычно из 1–5 слов или короткого шаблона. Чем короче и точнее подсказка, тем выше шанс, что пользователь считает ее мгновенно. Исследования Nielsen Norman Group по интерфейсам форм регулярно подтверждают один базовый принцип: пояснение должно помогать действию, а не конкурировать за внимание.
Каким должен быть качественный placeholder
- Кратким: без длинных инструкций.
- Конкретным: не «Введите данные», а «name@example.com».
- Релевантным формату поля.
- Нейтральным по тону и без двусмысленности.
Удачные и неудачные варианты
| Поле | Неудачно | Удачно |
|---|---|---|
| Введите ваш email сюда | name@example.com | |
| Поиск | Поиск по сайту | Например, зимние ботинки |
| Телефон | Телефон | +380 67 123 45 67 |
| Комментарий | Введите текст | Кратко опишите задачу |
Почему пример формата работает лучше абстрактной фразы
Мозг человека обрабатывает конкретный образ быстрее, чем расплывчатую инструкцию. Подсказка «ДД.ММ.ГГГГ» воспринимается как pattern, то есть как готовая схема действия. Это снижает микростресс на этапе ввода: пользователю не нужно строить правило с нуля, он просто повторяет образец.
Практическое наблюдение из продуктовых интерфейсов: в полях телефона, даты и email пользователи заметно реже ошибаются, когда видят именно шаблон, а не общую фразу. Особенно это видно на мобильных устройствах, где внимание раздроблено, а ввод сам по себе менее точен.
Как стилизовать placeholder через CSS
Стилизовать placeholder можно через псевдоэлемент ::placeholder, изменяя цвет, прозрачность, размер и начертание текста подсказки.
По умолчанию браузеры делают текст placeholder более бледным, чем основной ввод. Это удобно, но иногда контраст оказывается слишком слабым. Если подсказку трудно прочитать, она перестает выполнять свою задачу.
Пример стилизации
input::placeholder,
textarea::placeholder {
color: #6b7280;
opacity: 1;
font-style: italic;
}Почему не стоит делать placeholder слишком светлым
Низкий контраст ухудшает читаемость, особенно на экранах со сниженной яркостью и при дневном свете. Руководство WCAG рекомендует уделять внимание различимости текста интерфейса, а для критически важных инструкций лучше вообще не прятать смысл только в placeholder.
Пример поля с аккуратным оформлением
<label for="search">Поиск товаров</label>
<input id="search" type="search" placeholder="Например, рюкзак 20 л">input {
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
}
input::placeholder {
color: #64748b;
opacity: 1;
}Доступность placeholder: ошибки, ограничения и лучшие практики
С точки зрения доступности placeholder — это вспомогательный текст, а не полноценная замена подписи, инструкции или сообщения об ошибке.
Главная проблема в том, что подсказка исчезает после ввода и может быть недостаточно контрастной. Пользователи экранных считывателей, люди с нарушениями зрения и те, кто быстро заполняет форму с мобильного, нередко теряют контекст, если видят только placeholder без label.
Что делать правильно
- Всегда добавлять label.
- Использовать placeholder только как пример формата.
- Выносить важные инструкции рядом с полем, а не прятать их внутрь.
- Показывать ошибку отдельным сообщением, если формат неверный.
Корректный пример с пояснением
<label for="date">Дата встречи</label>
<input id="date" type="text" placeholder="ДД.MM.ГГГГ" aria-describedby="date-help">
<small id="date-help">Укажите дату в формате день.месяц.год</small>Когда я проверяю формы на удобство, самый частый сбой — дизайнер сделал красивый бледный placeholder и убрал label ради «чистого вида». Визуально это выглядит аккуратно, но в реальном использовании поле становится менее понятным уже через секунду после начала ввода.
Типичные ошибки при использовании placeholder в формах
Самая частая ошибка — попытка переложить на placeholder функции, для которых он изначально не предназначен.
Подсказка внутри поля должна быть легкой навигацией, а не центром всей логики формы. Когда в нее помещают длинные инструкции, юридические пояснения или обязательные правила, интерфейс начинает работать против пользователя.
Распространенные ошибки
- Использование placeholder вместо label.
- Слишком длинный текст: «Введите ваш адрес электронной почты, который вы используете для получения уведомлений».
- Слабый контраст и низкая читаемость.
- Подсказка без реального примера формата.
- Использование placeholder как единственного указания на обязательность поля.
Антипаттерн и исправленный вариант
<input type="text" placeholder="Введите здесь ваше полное имя, как оно указано в официальных документах">Лучше так:
<label for="fullname">Имя и фамилия</label>
<input id="fullname" type="text" placeholder="Например, Анна Коваль">Примеры placeholder для популярных полей: email, телефон, поиск, пароль
Для популярных полей лучше всего работают placeholder-тексты, которые показывают формат ввода, а не повторяют название поля.
Ниже — готовые решения, которые можно применять в формах регистрации, обратной связи, заказа и поиска по каталогу.
<label for="user-email">Email</label>
<input id="user-email" type="email" placeholder="name@example.com">Телефон
<label for="user-phone">Телефон</label>
<input id="user-phone" type="tel" placeholder="+380 67 123 45 67">Поиск
<label for="site-search">Поиск по каталогу</label>
<input id="site-search" type="search" placeholder="Например, чемодан 24 дюйма">Пароль
<label for="user-password">Пароль</label>
<input id="user-password" type="password" placeholder="Не менее 8 символов">Комментарий или заявка
<label for="request">Опишите задачу</label>
<textarea id="request" placeholder="Например, нужен лендинг для курса английского"></textarea>Когда placeholder не нужен и чем его заменить
Placeholder не нужен там, где поле и так понятно или где инструкция должна оставаться видимой во время всего ввода.
Например, в короткой форме с очевидными полями «Имя» и «Фамилия» дополнительная внутренняя подсказка может не дать никакой пользы. А в сложных сценариях, наоборот, нужна не исчезающая подсказка рядом с полем.
Чем можно заменить placeholder
- Текстом-пояснением под полем.
- Маской ввода для телефона или даты.
- Примером формата рядом с label.
- Пошаговой валидацией с мгновенной обратной связью.
Пример без placeholder, но с понятным интерфейсом
<label for="promo">Промокод</label>
<input id="promo" type="text" aria-describedby="promo-help">
<small id="promo-help">Введите код из письма, например SAVE10</small>Такой вариант часто удобнее: пояснение не исчезает и остается доступным в момент ввода.
Краткий чек-лист: как использовать placeholder без ошибок
Правильное использование placeholder сводится к одному правилу: он должен помогать вводу, а не объяснять интерфейс вместо других элементов.
- Добавляйте label для каждого поля.
- Пишите короткую подсказку, лучше в виде примера.
- Не помещайте в placeholder длинные инструкции.
- Проверяйте контраст текста.
- Не используйте подсказку как значение по умолчанию.
- Для сложных форматов добавляйте пояснение рядом с полем.
- Тестируйте форму на мобильных устройствах.
Итоги: что важно знать о placeholder в HTML
Placeholder — это краткая внутренняя подсказка для пустого поля, которая помогает показать формат ввода, но не заменяет label и не должна нести основную инструкцию.
Если использовать его правильно, форма становится понятнее и заполняется быстрее: пользователь видит пример, меньше ошибается и легче ориентируется в интерфейсе. Лучший подход — сочетать постоянную подпись поля, короткий placeholder и при необходимости дополнительное пояснение под полем. Именно такая связка дает не просто аккуратный вид, а реальное удобство в использовании.