placeholder атрибут HTML

Атрибут placeholder задаёт текст, отображаемый в элементе управления формы, когда у него нет значения. Текст-заполнитель должен кратко подсказывать пользователю, какие данные следует ввести в элемент управления.

Эффективный текст-заполнитель — это слово или короткая фраза, указывающая на ожидаемый тип данных, а не объяснение или приглашение к действию. Заполнитель нельзя использовать вместо <label>. Поскольку заполнитель не виден, если значение элемента управления формы не равно null, использование placeholder вместо <label> для подсказки ухудшает удобство использования и доступность.

Атрибут placeholder поддерживается следующими типами input: text, search, url, tel, email и password. Он также поддерживается элементом <textarea>. В примере ниже показано использование атрибута placeholder для пояснения ожидаемого формата данных в поле ввода.

Проблемы доступности

Заполнители следует использовать только для примера типа данных, которые нужно ввести в форму; никогда не используйте их вместо элемента <label> — это ухудшает доступность и удобство работы.

Текст <label> визуально и программно связан с соответствующим элементом управления формы. Программы чтения с экрана по умолчанию не озвучивают содержимое заполнителя, но озвучивают содержимое метки; именно метка сообщает пользователям вспомогательных технологий, какие данные нужно ввести в элемент управления. Метки также улучшают взаимодействие с пользователями указывающих устройств: когда пользователь нажимает или касается <label>, фокус перемещается на связанный с меткой элемент управления формы.

На заполнители нельзя полагаться как на замену метке даже тем, кто не использует вспомогательные технологии. Текст-заполнитель отображается с меньшей контрастностью, чем обычный текст элемента управления формы. Это сделано намеренно, чтобы пользователи не путали текст-заполнитель с введёнными данными. Однако недостаточная контрастность может создавать проблемы для людей с ослабленным зрением. Кроме того, текст-заполнитель исчезает из полей формы, когда пользователь начинает вводить текст. Если заполнитель содержит инструкции или примеры, которые исчезают, это может сбить с толку пользователей с когнитивными нарушениями. Форма также становится недоступной, если в качестве заполнителя использовалась метка.

Пример

HTML

<form action="/en-US/docs/Web/HTML/Reference/Attributes/placeholder">
  <label for="name">Enter your name:</label>
  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
  <button type="submit">Submit</button>
</form>

Результат

Спецификации

Совместимость с браузерами

html.elements.input.placeholder

html.elements.textarea.placeholder

См. также

• HTML title
• CSS :placeholder-shown селектор псевдокласса
• CSS ::placeholder селектор псевдоэлемента