Атрибут placeholder тега <input>
Описание
Атрибут placeholder задаёт подсказку, которая отображается в поле ввода, пока пользователь не начал вводить текст. Подсказка исчезает автоматически при получении полем фокуса.
<!-- Простое текстовое поле -->
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username"
placeholder="Введите ваш логин">
<!-- Поле с подсказкой о формате -->
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone"
placeholder="+7 (XXX) XXX-XX-XX">
Поддерживаемые типы input:
| Тип | Пример placeholder | Рекомендации |
|---|---|---|
| text | "Иван Иванов" | Пример ожидаемого значения |
| "example@domain.com" | Покажите формат email | |
| tel | "+7 900 123-45-67" | Покажите формат телефона |
| password | Не рекомендуется | Лучше использовать подсказку рядом |
| search | "Поиск товаров..." | Опишите что можно найти |
| textarea | "Опишите вашу проблему..." | Направляющий текст |
Пример с CSS-стилизацией:
<style>
input::placeholder {
color: #999;
font-style: italic;
opacity: 1; /* Firefox уменьшает opacity по умолчанию */
}
input:focus::placeholder {
color: #ccc;
}
</style>
<label for="search">Поиск:</label>
<input type="search" id="search" name="q"
placeholder="Название товара или артикул...">
Рекомендации:
- Используйте краткие, понятные подсказки
- Показывайте пример формата для полей с особыми требованиями
- Не заменяйте placeholder на <label> - это разные элементы
- Проверяйте контрастность текста placeholder
- Избегайте важной информации в placeholder - она исчезает при вводе
Пример с адаптивной подсказкой:
<label for="coupon">Промокод:</label>
<input type="text" id="coupon" name="coupon"
placeholder="Введите промокод"
onfocus="this.placeholder='Например: SUMMER2023'"
onblur="this.placeholder='Введите промокод'">
Ограничения:
- Не поддерживает многострочный текст (для textarea)
- В IE9 и ниже требует полифила
- Не должен использоваться как замена label
- Может вызывать проблемы доступности
Пример с валидацией:
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="your.email@example.com"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
title="Введите корректный email адрес"
required>
Примечание: Атрибут placeholder - это эффективный способ улучшить пользовательский опыт, но не следует полагаться на него как на единственный источник информации о назначении поля. Всегда используйте соответствующие элементы <label>.