Атрибут placeholder в HTML: что это и для чего нужен

Атрибут placeholder (по-русски «заполнитель») выводит в пустом поле серый текст-подсказку: пример ввода или короткое пояснение. Как только в поле появляется хотя бы один символ, подсказка исчезает. Прописывают placeholder в тегах <input> и <textarea>, а самой подсказкой браузер данными не считает: на сервер она не уходит.

В этой статье

1. Атрибут placeholder в HTML: что это и для чего нужен
2. Для каких полей работает placeholder: типы input, textarea и select
3. Многострочный placeholder: textarea и перенос строки в input
4. Чем placeholder отличается от label и title: доступность и контраст
5. Стиль placeholder: ::placeholder и :placeholder-shown
6. Плавающее название поля: placeholder с пробелом и :placeholder-shown
7. Как изменить placeholder через JavaScript
8. Аналог placeholder для contenteditable: data-placeholder и ловушка с br
9. Placeholder не отправляется на сервер и не заменяет required
10. Частые ошибки с атрибутом placeholder
11. Шпаргалка по атрибуту placeholder

Атрибут placeholder в HTML: что это и для чего нужен

Слово placeholder буквально означает «то, что занимает место». Подсказка занимает место в пустом поле и уступает его, когда посетитель начинает писать. Запись простая: слово placeholder, знак равенства и текст подсказки в кавычках внутри открывающего тега.

HTML

<input placeholder="Например, Иван">
<textarea placeholder="Напишите комментарий"></textarea>

Результат

Введите букву в любое поле: подсказка пропадёт, и строка «Подсказка в поле» сменится на «скрыта». Сотрите текст, и подсказка вернётся.

Скрипт в примере спрашивает у поля, показана ли подсказка в этот момент: для этого есть селектор :placeholder-shown. Он совпадает с полем, пока подсказка видна, то есть пока значение пустое.

Для каких полей работает placeholder: типы input, textarea и select

Атрибут работает у <input> с текстовыми типами и у <textarea>. Для остальных типов браузер запись примет, но подсказку не нарисует. В демонстрации выберите значение type и посмотрите, как реагирует поле. Строка под полем сообщает результат проверки, а в последней строке собрана запись, которую получил браузер.

HTML

<input type="text" placeholder="Подсказка">
<input type="date" placeholder="Подсказка">

Результат

Подсказка видна у text, search, url, tel, email, password и number. У date, time, month, color, range, checkbox и file её нет, хотя атрибут в разметке остаётся.

Где прописан placeholder	Подсказка видна	Что делать, если нужна подсказка
text, search, url, tel, email, password, number	Да	Ничего, атрибут работает
<textarea>	Да, в том числе несколько строк	Ничего, атрибут работает
date, time, month, week, datetime-local	Нет: поле показывает свои части даты	Пояснение написать рядом с полем текстом
color, range, checkbox, radio, file	Нет: у поля нет места для текста	Название поля написать в <label>
<select>	Нет: у списка такого атрибута нет	Первый <option> с пустым value и текстом «Выберите город»

Для списка подсказку подменяют первым пунктом: <option value="">Выберите город</option>. Если пункт нужен только как подсказка, к нему добавляют атрибуты disabled и selected, тогда посетитель не сможет выбрать его повторно. Как выглядят остальные значения type, показано на странице атрибута type.

Многострочный placeholder: textarea и перенос строки в input

В <textarea> подсказка может занимать несколько строк: перенос задаёт символ перевода строки, который в атрибуте записывают кодом 
. В обычном однострочном <input> перенос игнорируется, и строки склеиваются в одну.

HTML

<textarea rows="4"
  placeholder="Строка 1&#10;Строка 2&#10;Строка 3"></textarea>

<input
  placeholder="Строка 1&#10;Строка 2&#10;Строка 3">

Результат

В textarea подсказка выводится тремя строками, в input строки идут подряд и обрезаются по ширине поля.

Нужна многострочная подсказка, берите textarea. Обычному полю лучше дать короткий текст в одну строку, потому что длинная подсказка в узком поле просто обрезается.

Чем placeholder отличается от label и title: доступность и контраст

Подсказка выглядит как название поля, но название она заменить не может. Пока поле пустое, посетитель видит подсказку. После первого символа она исчезает, и без названия рядом остаётся непонятно, что нужно вводить. К тому же серый цвет подсказки по умолчанию, #757575, даёт на белом фоне контраст около 4,6 к 1: этого едва хватает для требуемых 4,5 к 1, а любое осветление текста контраст нарушает. Для программ чтения с экрана ситуация такая: если у поля нет названия, браузер берёт в его качестве текст placeholder, но надёжным способом это не считается. Название задают тегом <label>, а подробности про сочетание подсказки и названия разобраны в уроке «label, placeholder и доступность форм ».

HTML

<input placeholder="Ваш город">

<label for="city">Ваш город</label>
<input id="city" placeholder="Например, Одесса">

Результат

Нажмите «Ввести текст»: у первого поля исчезло всякое напоминание о том, что вводить, у второго название осталось над полем.

Признак	placeholder	label	title
Виден после ввода текста	Нет	Да	Только во всплывающей подсказке
Название поля для программ чтения	Запасной вариант	Основной способ	Запасной вариант
Что показывает	Пример или пояснение внутри поля	Название рядом с полем	Текст при наведении мыши
Отправляется на сервер	Нет	Нет	Нет

Про пояснение при наведении мыши подробно рассказано на странице атрибута title, а разницу между подсказкой и настоящим значением поля показывает раздел про атрибут value .

Стиль placeholder: ::placeholder и :placeholder-shown

Подсказку можно оформлять отдельно от текста поля. Для этого есть псевдоэлемент ::placeholder: он затрагивает только саму подсказку и принимает цвет, курсив, размер шрифта, регистр и межбуквенный интервал. А селектор :placeholder-shown выбирает всё поле, пока оно пустое, и позволяет, например, менять рамку или фон.

CSS

input::placeholder {
  color: #a83f2e;
  font-style: italic;
}

input:placeholder-shown {
  border-style: dashed;
}

Результат

Во втором поле подсказка красная и курсивная. В третьем рамка пунктирная, пока поле пусто: введите букву, и рамка станет сплошной.

Цвет подсказки подбирайте так, чтобы контраст с фоном оставался не ниже 4,5 к 1. Слишком светлая подсказка читается плохо, а слишком тёмная похожа на уже введённый текст.

Плавающее название поля: placeholder с пробелом и :placeholder-shown

Селектор :placeholder-shown позволяет сделать поле с названием, которое находится внутри пустого поля, а при вводе уезжает наверх. Хитрость в том, что placeholder заполняют одним пробелом: подсказка для глаза остаётся пустой, зато поле считается «пустым с подсказкой», пока в нём ничего не написано. Название при этом прописано настоящим <label> после поля. Когда в поле вводят символ, правило input:not(:placeholder-shown) + label перестаёт совпадать, и название поднимается.

HTML и CSS

<div class="field">
  <input id="city" placeholder=" ">
  <label for="city">Город</label>
</div>

<style>
.field { position: relative; }
.field label {
  position: absolute;
  left: 11px;
  top: 14px;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: 4px;
  font-size: 11px;
}
</style>

Результат

Щёлкните по полю или введите букву: название поднимается наверх. Если стереть текст и убрать фокус, название вернётся в поле.

Атрибут placeholder совсем без значения тут не подойдёт: без него :placeholder-shown не сработает. Пустая строка placeholder="" тоже совпадает с :placeholder-shown, но в разметке она неотличима от случайно пропущенного значения, поэтому вместо неё пишут пробел: так видно, что подсказка стоит нарочно, а посетитель её всё равно не увидит.

Как изменить placeholder через JavaScript

Сменить подсказку скрипт может двумя способами: записать значение в свойство input.placeholder или вызвать setAttribute('placeholder', ...). Результат одинаковый, потому что свойство повторяет атрибут. Удаление атрибута отличается только тем, что getAttribute('placeholder') вернёт null, а свойство input.placeholder даст пустую строку.

JavaScript

const input = document.querySelector('input');

input.placeholder = 'Kyiv';
input.setAttribute('placeholder', 'Odesa');
input.removeAttribute('placeholder');

console.log(input.getAttribute('placeholder')); // null
console.log(input.placeholder); // ''
console.log(input.matches(':placeholder-shown'));
// false

Результат

Нажимайте кнопки по очереди и следите за таблицей. После удаления атрибута подсказка исчезает, и поле больше не совпадает с :placeholder-shown.

Если поле заполняет посетитель, подсказку в нём скрипт может менять сколько угодно: введённый текст она не затронет.

Аналог placeholder для contenteditable: data-placeholder и ловушка с br

У редактируемого блока, который включают атрибутом contenteditable, подсказки нет: placeholder у <div> не работает. Зато подсказку можно изобразить стилями. Текст записывают в data-placeholder, а в CSS выводят его через content: attr(data-placeholder) в псевдоэлементе before, пока блок пустой. Есть ловушка: после того как посетитель набрал текст и стёр его, внутри блока может остаться тег br. Блок перестаёт быть пустым, и селектор :empty больше не срабатывает.

CSS

/* подсказка пропадает после стирания */
.editor:empty::before {
  content: attr(data-placeholder);
}

/* подсказка возвращается */
.editor:empty::before,
.editor:has(> br:only-child)::before {
  content: attr(data-placeholder);
}

Результат

Введите слово в оба блока и сотрите его клавишей Backspace. У первого блока подсказка не вернётся, у второго вернётся, а в innerHTML видно оставшийся тег br.

Второй вариант записан с селектором :has(> br:only-child): он выбирает блок, внутри которого остался единственный элемент br. Так подсказка работает и до ввода, и после стирания текста.

Placeholder не отправляется на сервер и не заменяет required

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

HTML и JavaScript

<form>
  <input name="city" required placeholder="Город">
</form>

<script>
const input = document.querySelector('input');
console.log(input.checkValidity());
// false при пустом поле
console.log(new FormData(form).get('city')); // ''
</script>

Результат

Нажмите «Проверить поле» при пустом поле: валидность false, на сервер уходит пустая строка. Введите слово и проверьте ещё раз.

Если нужно, чтобы на сервер ушло значение, которое посетитель не менял, записывайте его в value, а не в placeholder.

Частые ошибки с атрибутом placeholder

Почти все ошибки с placeholder возникают от ожидания, что серый текст в поле сам станет названием поля или настоящим значением. В таблице собраны такие записи и то, к чему они приводят.

Запись	Что получится	Как правильно
<input type="date" placeholder="дд.мм.гггг">	Подсказки в поле нет, атрибут игнорируется	Написать пояснение рядом с полем
<input type="range" placeholder="...">, checkbox, file	Атрибут не даёт никакого эффекта	Название задать тегом <label>
<input placeholder="Строка 1&#10;Строка 2">	Переноса строки нет, строки идут подряд	Использовать <textarea>
Поле без <label>, только с placeholder	После ввода пропадает напоминание, что вводить	Добавить <label>
::placeholder { color: #ccc }	Контраст ниже 4,5 к 1, подсказку трудно прочитать	Брать цвет не светлее #757575
Длинный текст в узком поле	Подсказка обрезается по краю поля	Сократить подсказку, пояснение вынести под поле
<select placeholder="Город">	Атрибут у списка не работает	Первый <option> с пустым value
Пример данных в placeholder вместо value	Данные посетитель вводит сам, на сервер они не уходят	Если значение нужно по умолчанию, записать его в value
<input required placeholder="Город"> как защита от пустого поля	Подсказка не считается значением, форма не отправится	Это нормальное поведение: подсказку не считать данными
[contenteditable]:empty::before	После стирания текста подсказка не возвращается	Добавить :has(> br:only-child)
Тёмная подсказка, похожая на введённый текст	Посетитель принимает её за уже заполненное поле	Не менять серый цвет по умолчанию
Только placeholder для программ чтения с экрана	Название поля зависит от запасного правила браузера	Название поля задать через <label>

Шпаргалка по атрибуту placeholder

Когда нужно быстро вспомнить запись, ищите задачу в левом столбце. Правый столбец ведёт на отдельную страницу справочника.

Что нужно	Что прописать	Тег
Подсказка в текстовом поле	<input placeholder="Например, Иван">	<input>
Многострочная подсказка	<textarea placeholder="Строка 1&#10;Строка 2">	<textarea>
Подсказка в списке	<option value="">Выберите город</option>	<option>
Цвет подсказки	input::placeholder { color: ... }	<input>
Узнать, показана ли подсказка	input.matches(":placeholder-shown")	<input>
Скрытая подсказка для плавающего названия	<input placeholder=" ">	<input>
Подсказка в contenteditable	[contenteditable]:empty::before	<div>
Настоящее значение по умолчанию	<input value="Одесса">	<input>

Назад в справочник: Атрибуты полей ввода

Урок курса: label, placeholder и доступность форм

Предыдущий атрибут: Атрибут value

Ещё атрибут: Атрибут type