Ответ
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) или четкий пример под полем.
Ответ 18+ 🔞
А, слушай, вот эта штука — placeholder! Ну, та самая подсказка в полях ввода, которая тупо висит, пока ты туда не ткнешь. Вроде «Введите ваш email» или «Ищите тут». Выглядит просто, но, блядь, тут столько подводных камней, что мама не горюй!
Вот смотри, как это в коде выглядит, элементарно:
<input type="text" id="name" placeholder="Например, Иван Иванов">Всё, казалось бы, пиздец как просто. Но нет, ёпта! Разработчики и дизайнеры постоянно наступают на одни и те же грабли, будто в первый раз.
Главное правило, которое все игнорируют, пока не прилетит от тимлида: placeholder — это НЕ замена нормальной подписи поля (<label>). Это просто намёк, лёгкий пшик. Скринридеры для слепых эту подсказку могут проигнорировать нахуй. Представь: человек не видит, заходит на форму, а там только плейсхолдер «Введите пароль». А какого хрена пароль? От чего? Куда? Пиздец, а не доступность. Поэтому <label for="pass">Пароль</label> — святое дело, без него ни шагу.
Второй момент, от которого волосы дыбом: туда нельзя пихать критически важную информацию! Типа «Пароль должен быть не короче 8 символов, с цифрой и спецсимволом @#$%». Это, блядь, инструкция! Её нужно писать РЯДОМ с полем, навсегда. Потому что как только пользователь кликнул — бац, и инструкция испарилась. Он сидит и хуярит пароль «12345», а потом орет, что форма глючная. Сам-то дурак!
Что ещё важно? Он не является значением по умолчанию. Если отправить форму с пустым полем, на сервер улетит пустота, а не текст «Например, Иван Иванов». Для дефолтных значений есть отдельный, ёбаный, атрибут value. Не путай!
А теперь, блядь, с точки зрения тестировщика (того, кто всё это потом будет проверять и материться), вот на что надо смотреть:
- Есть ли он вообще? И не кривой ли текст, вроде «Введите ваш ваш email»?
- Исчезает ли при фокусе? Кликнул — текст пропал. Убрал курсор, поле пустое — текст вернулся. Если не работает — всё, пизда, баг.
- Не ломает ли валидацию? Поле с плейсхолдером должно считаться пустым. А то бывает, проверка срабатывает на его текст, и ты уже не пройдёшь.
- Переведён ли? Если сайт на двух языках, а в форме красуется «Enter your name» — это пиздец, позор и косяк локализатора.
- Не слишком ли длинный? Если для ввода даты нужно впихнуть пояснение «ДД.ММ.ГГГГ», то лучше сделать маску ввода или вынести пример отдельно. А то в узком поле эта хуйня не влезет и будет обрезаться, выглядеть как «ДД.ММ.ГГ...». Ебушки-воробушки, какой кошмар!
Короче, вещь вроде простая, но, как и всё в этой жизни, требует, чтобы мозги включали. А то получается пиздопроебибна, а не интерфейс.