Плейсхолдер или подпись поля — что выбрать в форме (и почему серый текст внутри теряет заявки)

Форма из четырёх полей без единой подписи выглядит аккуратно: серый текст внутри полей, ничего лишнего. Именно так её и рисует большинство шаблонов — и именно так её тебе сгенерирует ИИ, если не уточнить.

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

Разберём честно, кто где выигрывает.

Что это вообще за две штуки

Подпись поля (label) — текст снаружи поля: «Телефон». Он виден всегда.

Плейсхолдер (placeholder) — серый текст внутри пустого поля: «+7 999 123-45-67». Он исчезает, как только человек начинает печатать.

Спецификация HTML на этот счёт высказывается прямо: атрибут placeholder не должен использоваться вместо подписи. Там же объясняется разница по смыслу: подпись видна всё время, плейсхолдер — только до ввода, а подсказка в title показывается, когда человек её попросит.

Шесть критериев, по которым они расходятся

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

2. Можно проверить форму перед отправкой. С подписями — пробежал глазами сверху вниз и убедился, что всё на местах. Без подписей проверить нечего: одни значения без имён. Особенно больно, когда браузер подставил автозаполнение не туда.

3. Можно починить ошибку. Форма вернулась с ошибкой — а инструкция, что именно тут ждали, испарилась вместе с плейсхолдером. Приходится чистить поле, чтобы её увидеть.

4. Работает при вводе с клавиатуры. Человек, идущий по полям на Tab, не останавливается разглядывать следующее поле. Подпись он видит, исчезающий плейсхолдер — нет.

5. Поле заметно. Тут главный проигрыш: заполненное на вид поле теряется. Хуже того, серый текст часто принимают за уже введённое значение — и пропускают поле сознательно.

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

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

Плавающая подпись — честный компромисс

Есть промежуточный вариант: подпись лежит внутри поля, а при фокусе уезжает наверх и остаётся там (floating label). Он закрывает первые четыре проблемы: текст виден во время ввода, форму можно проверить, ошибку — починить, и на Tab всё читается.

Но две проблемы остаются: поле всё ещё выглядит заполненным, и вопросы доступности никуда не делись. Так что это компромисс для тесных экранов, а не лучший вариант вообще.

Кому что подойдёт — прямой ответ

• Любая форма, где больше одного поля — подпись снаружи, всегда видимая. Это выбор по умолчанию, спорить тут не о чем.
• Плейсхолдер — только как дополнение к подписи и только как пример формата: «+7 999 123-45-67», «дд.мм.гггг». Никогда как замена.
• Плавающая подпись — если экран действительно тесный и лишняя строка ломает вёрстку.
• Поле поиска в шапке — единственный случай, где плейсхолдер в одиночку допустим: поле одно, оно с иконкой, задача очевидна. Но подпись для программ чтения с экрана всё равно нужна — её просто скрывают визуально.

Важное следствие для тех, кто собирает форму с ИИ: сгенерированная разметка почти всегда приходит без label. Одна фраза в промпте — «у каждого поля видимая подпись снаружи, плейсхолдер только как пример формата» — закрывает вопрос сразу. Подробнее про такие правила — в гайде как переписать тексты интерфейса с ИИ.

А если дизайнер настаивает на «чистой» форме без подписей?

Аргумент против — не эстетика, а заявки. Спроси, что важнее: минус одна строка на макете или минус часть отправленных форм. Заодно предложи плавающую подпись: визуально почти то же самое.

Можно оставить плейсхолдер как пример формата?

Да, это его настоящая работа. Подпись отвечает на вопрос «что сюда», плейсхолдер — «в каком виде». Только не прячь в него требования вроде «минимум 8 символов»: такие вещи должны оставаться на экране постоянно. Формулировки — по правилам микрокопии.

Что насчёт длинных подсказок?

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