Placeholder и label: почему подсказка внутри поля не заменяет подпись, и какую спецификацию поля использовать
Серый текст внутри поля исчезает, как только человек начинает печатать. Почему placeholder не заменяет label, где размещать подсказки, какой цвет рамки проходит проверку и точная спецификация поля для разработчика.
Placeholder не является подписью. Он исчезает, как только человек начинает печатать, а вместе с ним пропадает единственная подсказка о том, для чего вообще это поле. Ставьте настоящую подпись над каждым полем, подсказки под ним, делайте видимую рамку, а placeholder оставляйте только для примера. Вот почему так, и вот точная спецификация.
Что идет не так, когда placeholder заменяет подпись
До ввода: выглядит чисто
✕ После ввода: для чего было это поле?
Левое поле выглядит аккуратно, поэтому его так любят дизайнеры. Правое поле то же самое, только двумя секундами позже. Слова «Email» больше нет, проверить подпись нельзя, а в длинной форме человек не понимает, какой ответ к какому полю относится.
Это проблема памяти, а не вкуса. Исследование Nielsen Norman Group о placeholder в полях форм показало, что исчезающий текст нагружает кратковременную память и мешает перепроверить ответы перед отправкой. Наш общий гид по лучшим практикам дизайна форм охватывает всю форму, а эта статья глубоко разбирает одно решение, которое создает больше всего проблем.
Есть и вторая проблема. Текст placeholder по умолчанию серый, и этот серый обычно слишком бледный. Популярный серый #8E8E93 для placeholder дает контраст около 3,3 к 1 на белом, меньше 4,5 к 1, которые WCAG требует для текста. Так что единственную подсказку, которую вы дали, еще и трудно прочитать.
Решение 1: настоящая подпись над полем
✓ Подпись сверху: остается после ввода
Рабочая почта
✓ Placeholder только как пример
Подпись находится вне поля, поэтому ввод ее не затрагивает. Поставьте ее над полем, по левому краю, 15 px, semibold. Сверху лучше, чем сбоку: так работает при любой ширине, в том числе на телефоне, а взгляд движется по форме вниз одной прямой линией.
Не прячьте подпись ради экономии места. Если в макете нет места для подписей, неправ макет, а не правило. Плавающие подписи, которые уменьшаются в угол при фокусе, это компромисс: подпись остается, но она мелкая, требует аккуратной анимации и сложнее в доступной реализации, чем обычная подпись сверху.
Именно настоящую подпись озвучивают скринридеры. В HTML свяжите ее с полем, чтобы нажатие на подпись ставило фокус в input:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
Решение 2: подсказки под полем
Пароль
Не меньше 8 символов.
✓ Подсказка под полем: остается, пока печатаешь
✕ Подсказка как placeholder: пропала с первой клавиши
Самое полезное, что поле может сказать, например формат или правило, нужно человеку именно во время набора. Поэтому оно не может жить в placeholder, где исчезает при первом нажатии. Перенесите его под поле, 13 px, более тихим серым, и оно будет видно все время.
Ошибки используют тот же слот. Когда что-то идет не так, строка подсказки может превратиться в сообщение об ошибке, и макет не прыгает. О том, как должно выглядеть это сообщение, рассказывает наша статья про цвет сообщения об ошибке.
Решение 3: рамка, которую видно
✕ Рамка #E5E5E5: призрак
✓ Рамка #79747E: легко найти
Поле это элемент управления, а элемент управления должен быть заметен. Призрачно-серая рамка слева любимица дизайн-файлов, потому что выглядит легко. На реальном экране она почти исчезает, и люди не понимают, куда нажимать.
WCAG 1.4.11 требует, чтобы визуальная информация, нужная для распознавания компонента интерфейса, имела контраст не менее 3 к 1 с соседним цветом. #E5E5E5 на белом дает около 1,3 к 1, это провал. #79747E, цвет outline в Material 3, дает около 4,6 к 1, это уверенный проход. Берите 1,5 px, чтобы рамка держалась и на экранах с низкой плотностью.
Обратите внимание на разницу с разделителями. Светлый серый вроде #E5E5EA нормален между строками списка, ведь разделитель должен лишь ощущаться. Рамку поля нужно видеть. О разделителях и серых поверхностях мы писали в статье про цвет фона светлой темы.
Решение 4: попросите правильную клавиатуру
Поле, которое знает свое назначение, может открыть полезную клавиатуру, и на iPhone, и на Android. Поле email, которое открывается с готовой клавишей @, экономит нажатие и предотвращает опечатки. В HTML это один атрибут:
| Поле | Тип ввода | Что открывает телефон |
|---|---|---|
type="email" | Клавиатура с @ и . | |
| Телефон | type="tel" | Цифровая панель |
| Сайт | type="url" | Клавиатура с / и .com |
| Карта или код | inputmode="numeric" | Цифровая панель, без счетчика |
| Поиск | type="search" | Клавиша поиска на клавиатуре |
Добавьте значения autocomplete, например email и name, чтобы телефон мог заполнить поле сам.
Спецификация поля
| Часть | Значение |
|---|---|
| Подпись | Над полем, 15 px, semibold |
| Поле | Высота 48 px, радиус 12 px |
| Рамка | 1,5 px, цвет #79747E |
| Текст | 16 px, не меньше |
| Подсказка | Под полем, 13 px |
| Placeholder | Пример или ничего |
Текст 16 px важен на iPhone: Safari приближает страницу, когда человек нажимает на поле с более мелким текстом, и это выглядит как баг.
.field label { font: 600 15px/1.3 system-ui; display: block; margin-bottom: 6px; }
.field input {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid #79747E;
border-radius: 12px;
}
.field input::placeholder { color: #8E8E93; }
.field .hint { font-size: 13px; margin-top: 6px; }
Высота 48 px дает удобную зону касания, а радиус 12 px это выбор, а не правило: подстройте под свою систему и держите одинаковым у всех полей.
FAQ
Можно ли использовать placeholder вместо подписи?
Нет. Placeholder исчезает, когда человек начинает печатать, и поле теряет название. Поставьте видимую подпись над полем, а placeholder оставьте для примера формата или не заполняйте его вовсе.
Доступен ли текст placeholder?
По умолчанию редко. Обычно это светло-серый текст с низким контрастом, он пропадает при вводе, а некоторые вспомогательные технологии не считают его подписью. Доступный выбор это настоящая подпись, связанная с полем ввода.
Где разместить подпись: над полем или внутри?
Над полем, по левому краю. Так работает при любой ширине экрана, подпись видна во время набора, а взгляд идет по одной прямой линии вниз по форме.
Что писать в placeholder?
Пример формата, например name@company.com, или ничего. Никогда не помещайте туда инструкцию, которая нужна во время набора. Ее место в подсказке под полем.
Какого цвета должна быть рамка поля ввода?
Достаточно темной, чтобы давать контраст не менее 3 к 1 с фоном страницы, как требует WCAG 1.4.11. #79747E, цвет outline в Material 3, дает около 4,6 к 1 на белом. Бледный #E5E5E5 дает около 1,3 к 1 и не проходит.
Решают ли плавающие подписи проблему placeholder?
Частично. Они сохраняют подпись на виду, уменьшая ее над текстом, но мелкий размер, анимация и работа над доступностью делают обычную подпись над полем более надежным выбором по умолчанию.
Источники
- Nielsen Norman Group, Placeholders in Form Fields Are Harmful (Katie Sherwin, 2014): текст placeholder исчезает при вводе, нагружает кратковременную память и затрудняет проверку ответов.
- WCAG 2.1, 1.4.11 Non-text Contrast (3 к 1 для компонентов интерфейса) и 1.4.3 Contrast (Minimum).
- Контрасты на белом, вычисленные по формуле относительной яркости WCAG: #E5E5E5 1,26 к 1, #79747E 4,55 к 1, серый placeholder #8E8E93 3,26 к 1. #79747E это Outline из Material 3 (NeutralVariant50), взятый из androidx Compose ColorLightTokens.
- MDN, элемент input, атрибут type:
type="email"открывает на телефонах клавиатуру для почты. - Размеры полей в таблице спецификации (подпись 15 px, высота 48 px, радиус 12 px, подсказка 13 px) это наша собственная рекомендация, а не значение платформы.
- Впервые опубликовано как карусель в UX Brainy.
Want every form in your product to feel this easy to fill in? Our team designs and builds product UI with the field details decided once.
Get Started
