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

Описание

Атрибут title в теге <textarea> задает всплывающую подсказку (tooltip), которая появляется при наведении курсора на текстовое поле. Это полезно для:

  • Дополнительных пояснений к полю ввода
  • Доступности (читается скринридерами)
  • Отображения подсказок при нехватке места в интерфейсе
Пример использования:
<textarea title="Введите ваш комментарий (максимум 500 символов)"></textarea>

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

  • Подсказка появляется после небольшой задержки (обычно 1-2 секунды)
  • На мобильных устройствах может не отображаться
  • Читается программами экранного доступа
  • Поддерживает многострочный текст (через \n)

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

  • Используйте краткие и информативные подсказки
  • Избегайте дублирования информации из <label>
  • Для сложных подсказок рассмотрите JavaScript-решения
  • Тестируйте отображение в разных браузерах

Пример с многострочной подсказкой:

<textarea title="Первая строка подсказки\nВторая строка\nТретья строка"> Текстовое поле с многострочной подсказкой </textarea>

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

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

Сравнение с аналогичными атрибутами:

Атрибут Назначение Когда использовать
title Всплывающая подсказка при наведении Для дополнительных пояснений
placeholder Подсказка внутри пустого поля Для примеров ввода
aria-label Невидимая подпись для доступности Когда нет визуального label

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

<div class="form-group"> <label for="feedback">Обратная связь:</label> <textarea id="feedback" title="Пожалуйста, опишите ваше впечатление подробно" aria-describedby="feedback-help"> </textarea> <div id="feedback-help" class="help-text"> Максимум 1000 символов </div> </div> <style> .help-text { font-size: 0.8em; color: #666; } </style>

Примечание: Для сложных интерфейсов:

  • Используйте специализированные библиотеки для тултипов
  • Рассмотрите скрытые/раскрывающиеся блоки с подсказками
  • Для важной информации избегайте зависимости от hover-состояния