Подсказка в поле input или textarea (атрибут placeholder) | HTML примеры

• Атрибут placeholder
• Псевдоэлемент ::placeholder
• Псевдокласс :placeholder-shown
• Подсказка пропадает при получении фокуса
• Обрезать длинный подсказывающий текст и поставить многоточие
• Сделать смещающиеся или всплывающие label в веб-форме
• Для div с contenteditable
• Не рекомендуется
• Атрибут title
• Как сделать placeholder для select

Исчезающая подсказка в input и textarea HTML

Внутри пустого поля ввода input или textarea показывается надпись приглушенного цвета из атрибута placeholder, которая пропадает при вводе первого символа. Она может быть образцом значения или кратким описанием ожидаемого формата. [whatwg.org]

<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег label заменяют на атрибут placeholder, тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить label непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]

Плохо

Email Хорошо

Стилизация: изменить цвет placeholder CSS

Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder. Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition.

<style>
.raz::placeholder {
  color: red;
  opacity: 1; /* сделать обычным неполупрозрачным цветом в Firefox */ 
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Поменять стиль поля ввода с placeholder CSS

Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder.

<style>
[placeholder] {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input>
<textarea></textarea>
<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder.

<style>
.raz:placeholder-shown {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Подсказка пропадает при получении фокуса <input type="text | password | другие"> и <textarea></textarea>

<style>
.raz:focus::placeholder {
  opacity: 0;
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Обрезать длинный подсказывающий текст и поставить многоточие

<style>
.raz:placeholder-shown {
  text-overflow: ellipsis;
}
</style>

<input placeholder="Обязательно заполняется при наличии" class="raz">

<style>
.raz:placeholder-shown {
  text-overflow: "\01F4E7"; /* свойством text-overflow может быть любой символ, в том числе emoji */ 
}
</style>

<input type="email" class="raz6" placeholder="name@site.ru                        ">

Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.

Отчество  Обязательно заполняется при наличии

Отчество Обязательно заполняется при наличии

Сделать смещающиеся или всплывающие метки в веб-форме

Email

<style>
.raz {
  position: relative;
}
.raz input ~ span {
  position: absolute;
  bottom: 0;
  left: 2px;
  opacity: .5;
  transition: .2s;
}
.raz input:focus ~ span,
.raz input:not(:placeholder-shown) ~ span { /* когда будет хорошая поддержка :placeholder-shown браузерами */ 
  bottom: 100%;
  opacity: 1;
  font-size: 80%;
}
</style>

<label class="raz"><input type="email" placeholder="&nbsp;"><span>Email</span></label>

Email

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 50%;
  left: 2px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="Email"><span>Email</span></label>

Плавающие метки неоднородны с метками элементов других типов формы. Их менее контрастный цвет хуже различим. [medium.com]

ФИО Возраст 10-20 лет 20-30 лет 30-55 лет 55 лет и старше Плохо

Эффект placeholder для div

Атрибут placeholder работает только для input и textarea, даже если у других тегов указан атрибут contenteditable. [whatwg.org]

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
</style>

<div contentEditable placeholder="Можно ввести текст" class="raz"></div>

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
.raz:empty:not(:focus)::before { /* хак: если div задать и placeholder, то и эта запись будет работать .raz:empty:not(:placeholder-shown)::before */ 
  content: attr(data-placeholder);
  opacity: .5;
}
</style>

<div contentEditable data-placeholder="Можно ввести текст" class="raz"></div>

Древний метод на память, изменяющий value JavaScript

<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Email"
 title="Email"
/>