Атрибут placeholder тега <textarea>

Описание

Атрибут placeholder в теге <textarea> задаёт подсказку, которая отображается в поле, когда оно пустое. Эта подсказка исчезает автоматически, когда пользователь начинает ввод текста.

Пример использования:
<textarea placeholder="Опишите вашу проблему подробно..."></textarea>

Особенности работы:

  • Подсказка отображается только для пустых полей
  • Исчезает при получении фокуса или начале ввода
  • Не заменяет элемент <label>
  • Не отправляется на сервер при отправке формы

Рекомендации:

  • Используйте краткие и понятные подсказки
  • Сочетайте с элементом <label> для доступности
  • Избегайте важной информации в placeholder
  • Используйте CSS для стилизации подсказки

Пример с label и стилизацией:

<style> textarea::placeholder { color: #999; font-style: italic; } </style> <label for="feedback">Обратная связь:</label> <textarea id="feedback" placeholder="Пожалуйста, опишите ваше впечатление..."></textarea>

Ограничения:

  • Некоторые старые браузеры не поддерживают стилизацию
  • Плохая видимость при недостаточном контрасте
  • Может быть ошибочно принят за заполненное поле
  • Не подходит для сложных инструкций

Сравнение с альтернативами:

Метод Преимущества Недостатки
placeholder Простота, встроенная поддержка Ограниченная стилизация
label + CSS Полный контроль над отображением Требует JavaScript для сложного поведения
title атрибут Подсказка при наведении Не видна постоянно

Пример хорошей практики:

<div class="input-group"> <label for="comment">Комментарий</label> <textarea id="comment" placeholder="Напишите ваш отзыв здесь..." aria-describedby="comment-hint"></textarea> <div id="comment-hint" class="hint-text"> Минимальная длина - 20 символов </div> </div> <style> .input-group { margin-bottom: 1rem; } .hint-text { font-size: 0.8em; color: #666; } textarea::placeholder { color: #aaa; transition: opacity 0.2s; } textarea:focus::placeholder { opacity: 0.5; } </style>

Примечание: Для сложных подсказок рассмотрите:

  • Кастомные JavaScript-решения
  • Плавающие label-элементы
  • Информационные иконки с tooltip