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

Описание

Атрибут disabled делает кнопку неактивной, предотвращая любые взаимодействия с ней. Пользователь не может нажать на кнопку, а форма не будет включать её данные при отправке.

Пример использования:
<button disabled>Неактивная кнопка</button>

Основные характеристики:

Аспект Поведение Примечание
Взаимодействие Кнопка не реагирует на клики Нельзя нажать или активировать
Фокус Нельзя получить фокус Tab-навигация пропускает кнопку
Внешний вид Стандартный серый стиль Можно кастомизировать через CSS

Практический пример с формой:

<form> <input type="checkbox" id="agree"> <label for="agree">Я согласен</label> <button id="submit-btn" disabled>Отправить</button> <script> document.getElementById('agree').addEventListener('change', function() { document.getElementById('submit-btn').disabled = !this.checked; }); </script> </form>

Стилизация disabled-кнопки:

<style> button:disabled { opacity: 0.6; cursor: not-allowed; background-color: #ccc; } </style> <button disabled>Стилизованная кнопка</button>

Важные замечания:

  • Disabled-кнопки не отправляются с формой (в отличие от readonly)
  • Состояние можно изменять динамически через JavaScript
  • Для доступности добавьте поясняющий текст при наведении
  • Не используйте для скрытия функционала - лучше удалите кнопку

Разница между disabled и readonly:

<!-- Disabled кнопка --> <button disabled>Неактивна</button> <!-- Readonly (не применяется к button) --> <input type="text" readonly value="Только чтение">

Примечание: Используйте disabled для временного отключения функционала, но обеспечьте пользователю понятную обратную связь, почему кнопка неактивна и как сделать её активной.