Атрибут HTML: placeholder

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

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

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

Примечание: Атрибут placeholder не может содержать символы перевода строки (LF) или возврата каретки (CR). Если они присутствуют в значении, текст подстановки будет усечен.

Вопросы доступности

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

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

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

Пример

HTML

html

<form action="/en-US/docs/Web/HTML/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 # attr-input-placeholder
Стандарт HTML # attr-textarea-placeholder

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`placeholder`	4	12	4	≤12.1	5	18	4	≤12.1	5	1.0	≤37
`line_breaks`	36	12	59	23	Нет	36	59	24	Нет	3.0	37

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`placeholder`	3	12	4	≤12.1	4	18	4	≤12.1	3.2	1.0	≤37

html.elements.input.placeholder

Таблицы BCD загружаются только в браузере

html.elements.textarea.placeholder

Таблицы BCD загружаются только в браузере

См. также

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder