Placeholder

У некоторых текстовых полей ввода есть возможность указать атрибут placeholder. Часто этот атрибут используется не по назначению. Основная задумка этого атрибута — предоставить пользователю короткую подсказку с образцом данных или ожидаемым форматом ввода, когда в поле нет заранее предустановленного значения (value).

Вот примеры правильного (✅) и неправильного (❌) использования атрибута:



Ваше имя:




Email:


Email:




Дата рождения:


Дата рождения:




Телефон:


Телефон:




Номер паспорта:


Номер паспорта:

2 буквы и 7 цифр с предпоследней страницы паспорта

Таким образом, placeholder не является:

- Заменой лейбла
- Дубликатом лейбла
- Призывом к действию
- Маской
- Инструкцией

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

input::placeholder {
/* Стили текста placeholder */
}

input:placeholder-shown {
/* Стили input, когда виден placeholder */
}