Placeholder

В HTML подсказку задаёт атрибут placeholder у полей input и textarea. Он хорош для коротких примеров: «+7 900 000-00-00», «ivan@example.ru», «Например, шкаф-купе». Человек сразу видит, в каком виде ждут данные, и реже ошибается.

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

Подсказка, а не метка

Самая частая ошибка — форма без подписей, где название поля спрятано в placeholder: «Имя», «Телефон», «Комментарий». Выглядит минималистично, но:

• после ввода непонятно, какое поле что означает, особенно при проверке перед отправкой;
• браузерное автозаполнение заполняет поля, и подсказок не видно вовсе;
• светло-серый текст плохо читается людьми со слабым зрением;
• не все экранные дикторы надёжно озвучивают placeholder как название поля.

Поэтому у каждого поля должна быть постоянная метка поля — элемент label, а placeholder остаётся дополнением.

Пример поля телефона

<label for="phone">Телефон</label>
<input id="phone" name="phone" type="tel"
       autocomplete="tel"
       placeholder="+7 900 000-00-00">

Метка остаётся на месте всегда, подсказка показывает формат, а autocomplete="tel" позволяет браузеру подставить номер одним нажатием.

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

Цвет и шрифт подсказки меняют псевдоэлементом ::placeholder. Цвет стоит брать достаточно тёмным для читаемости, но отличимым от вводимого текста. Псевдокласс :placeholder-shown срабатывает, пока поле пустое и подсказка видна. На нём строят «плавающие» метки, которые при вводе уменьшаются и поднимаются над полем: так и место сэкономлено, и подпись не исчезает.

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