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

Описание

Атрибут hidden в теге <textarea> скрывает текстовое поле, делая его невидимым на странице. Однако, в отличие от disabled, скрытое поле остается частью DOM и может участвовать в отправке формы.

Пример использования:
<form> <textarea hidden name="hidden_data">Скрытые данные</textarea> <button type="submit">Отправить</button> </form>

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

  • Элемент полностью удаляется из визуального потока
  • Значение поля отправляется с формой (если есть name)
  • Не занимает место на странице
  • Может быть показано через JavaScript/CSS

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

Метод Видимость Отправка данных Доступность
hidden Не виден Да Не доступен
disabled Виден Нет Не доступен
CSS display: none Не виден Да Не доступен
type="hidden" Не виден Да Не доступен

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

  • Используйте для скрытых данных в формах
  • Для чувствительных данных лучше использовать input type="hidden"
  • Избегайте скрытия важных элементов интерфейса
  • Для временного скрытия используйте CSS

Пример динамического управления:

<textarea id="toggle-area">Контент</textarea> <button onclick="document.getElementById('toggle-area').toggleAttribute('hidden')"> Переключить видимость </button>

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

  • Не подходит для скринридеров (используйте aria-hidden)
  • Может быть обнаружено через DevTools
  • Не защищает данные от модификации
  • Поддержка в старых IE требует полифилов

Пример правильного использования:

<form id="user-form"> <!-- Лучше использовать input для скрытых данных --> <input type="hidden" name="user_id" value="123"> <!-- Textarea hidden для многострочных данных --> <textarea hidden name="user_meta"> {"preferences":{"theme":"dark","lang":"ru"}} </textarea> <button type="submit">Сохранить</button> </form>

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

  • Используйте CSS-классы для управления видимостью
  • Рассмотрите атрибуты ARIA для доступности
  • Для безопасности важных данных используйте серверное хранение