Ответ
Placeholder (плэйсхолдер) — это атрибут HTML-элемента <input> или <textarea>, который отображает подсказывающий текст внутри поля ввода, пока пользователь не начал вводить свои данные. Он исчезает при получении полем фокуса.
Синтаксис и пример:
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите ваш логин">
<label for="search">Поиск:</label>
<input type="search" id="search" name="q" placeholder="Введите запрос...">Ключевые характеристики и best practices:
- Назначение: Только подсказка, а не замена
<label>. Элемент<label>обязателен для доступности (accessibility). - Доступность (Accessibility):
- Скринридеры могут не всегда зачитывать placeholder.
- Нельзя помещать в placeholder критически важную информацию (например, формат ввода пароля). Эту информацию нужно выносить в отдельный текст рядом с полем.
- Не является значением по умолчанию:
- При отправке формы пустое поле с placeholder не передает его текст на сервер.
- Для значений по умолчанию используйте атрибут
value.
Что проверять в тестировании (QA-чеклист):
- ✅ Наличие и релевантность: Placeholder присутствует и его текст соответствует ожидаемому формату ввода.
- ✅ Визуальное поведение: Текст отображается серым/приглушенным цветом, исчезает при фокусе и появляется снова, если поле очищено и фокус убран.
- ✅ Валидация: Placeholder не мешает вводу и проверке данных. Поле считается пустым, даже если в нем отображается placeholder.
- ✅ Локализация: Текст placeholder переведен корректно, если приложение мультиязычное.
- ✅ Альтернатива для длинных текстов: Для сложных форматов ввода (например, даты) вместо длинного placeholder лучше использовать маску ввода (
input mask) или четкий пример под полем.