Как добавить и оформить подсказку в поле (placeholder)

Короткий ответ

Текст-подсказку внутри пустого поля задаёт атрибут placeholder, а его вид — псевдоэлемент ::placeholder:

<style>
  input { padding: 8px; }
  input::placeholder { color: slategray; font-style: italic; }
</style>
 
<input type="email" placeholder="anna@example.com">

Подсказка исчезает, как только пользователь начинает печатать.

Что писать в подсказке

Лучше всего — пример значения или формат: anna@example.com, DD.MM.YYYY. Название поля и важные правила пишите в подписи над полем, иначе пользователь их не увидит после начала ввода:

<label style="display: grid; gap: 4px; max-width: 260px;">
  Date of birth
  <input type="text" placeholder="DD.MM.YYYY" style="padding: 8px;">
</label>

Пустое поле в CSS

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

Частая ошибка

Подсказку используют вместо подписи: поле без <label>, а название — только в placeholder. Стоит начать печатать, и становится непонятно, что это было за поле. Многие программы чтения с экрана к тому же не читают подсказку как название. Кроме того, светло-серый текст часто слишком бледный, чтобы его прочитать.

<input placeholder="Name"> <input placeholder="Surname">