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

Описание

Атрибут hidden скрывает кнопку от отображения на странице, делая её невидимой и недоступной для взаимодействия. Это полезно для временного скрытия элементов без удаления их из DOM.

Пример использования:
<button hidden>Эта кнопка скрыта</button> <button onclick="document.getElementById('secret-btn').hidden = false"> Показать скрытую кнопку </button> <button id="secret-btn" hidden onclick="alert('Сюрприз!')"> Секретная кнопка </button>
Аспект Поведение Примечание
Отображение Полностью скрывает элемент Эквивалентно display: none
Доступность Удаляется из accessibility tree Скринридеры не видят элемент
DOM Остаётся в дереве документа Можно найти через JavaScript

Разница между hidden и другими способами скрытия:

<button hidden>Скрыто через hidden</button> <button style="display: none">Скрыто через CSS</button> <button style="visibility: hidden">Скрыто через visibility</button> <button style="opacity: 0">Скрыто через opacity</button>

Практический пример с динамическим управлением:

<button id="toggle-btn" onclick="toggleButton()"> Переключить видимость </button> <button id="target-btn">Я исчезаю и появляюсь</button> <script> function toggleButton() { const btn = document.getElementById('target-btn'); btn.hidden = !btn.hidden; } </script>

Важные особенности:

  • Скрытые элементы не занимают место в layout
  • Не реагируют на события мыши/клавиатуры
  • Можно переопределить в CSS: [hidden] { display: block !important; }
  • Поддерживается всеми современными браузерами

Рекомендации по использованию:

  • Используйте для элементов, которые могут понадобиться позже
  • Не применяйте для чувствительных данных (исходный код остаётся видимым)
  • Для сложных анимаций используйте CSS-переходы
  • Сочетайте с aria-hidden для полного скрытия от скринридеров

Примечание: Атрибут hidden следует использовать вместо CSS-правил display: none, когда скрытие является частью логики приложения, а не стилевого оформления.