<divelopers>: “Placeholder У некоторых текстовых полей ввода есть возможность указать…”

Placeholder

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

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

<!-- ❌ Замена лейбла -->
<input 
  type="text"
  id="name"
  name="name"
  placeholder="Имя"
> 

<!-- ✅ Пример данных -->
<label for="name">
  Ваше имя:
</label>
<input
  type="text"
  id="name"
  name="name"
  placeholder="Алексей"
>

<!-- ... -->

<!-- ❌ Дублирование лейбла -->
<label for="email">
  Email:
</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="Email"
> 

<!-- ✅ Пример данных -->
<label for="email">
  Email:
</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="john.doe@mail.com"
> 

<!-- ... -->

<!-- ❌ Призыв к действию -->
<label for="birthdate">
  Дата рождения:
</label>
<input
  type="text"
  id="birthdate"
  name="birthdate"
  placeholder="Введите дату рождения"
> 

<!-- ✅ Ожидаемый формат -->
<label for="birthdate">
  Дата рождения:
</label>
<input
  type="text"
  id="birthdate"
  name="birthdate"
  placeholder="ДД.ММ.ГГГГ"
> 

<!-- ... -->

<!-- ❌ Маска -->
<label for="name">
  Телефон:
</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="+375 (__) ___-__-__"
> 

<!-- ✅ Пример данных -->
<label for="name">
  Телефон:
</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="+375 (12) 345-67-89"
> 

<!-- ... -->

<!-- ❌ Инструкция -->
<label for="passnum">
  Номер паспорта:
</label>
<input
  type="text"
  id="passnum"
  name="passnum"
  placeholder="2 буквы и 7 цифр с предпоследней страницы паспорта"
> 

<!-- ✅ Пример данных -->
<label for="passnum">
  Номер паспорта:
</label>
<input
  type="text"
  id="passnum"
  name="passnum"
  placeholder="AH1234567"
  aria-describedby="info"
> 
<p id="info">2 буквы и 7 цифр с предпоследней страницы паспорта</p>

Таким образом, placeholder не должен:

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

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

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

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