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

Описание

Атрибут disabled отключает элемент формы <input>, делая его неактивным для пользователя. Отключенные поля не могут быть изменены и их данные не отправляются на сервер.

Пример использования:
<form> <label>Имя: <input type="text" name="username" disabled value="Гость"> </label> <label><input type="checkbox" name="terms" disabled> Принять условия</label> <input type="submit" value="Отправить" disabled> </form>

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

Аспект Поведение Примечание
Фокус Нельзя получить фокус Tab-навигация пропускает элемент
Изменение Значение нельзя изменить Для всех типов input
Отправка формы Данные не отправляются В отличие от readonly
Внешний вид Стандартный серый стиль Можно кастомизировать через CSS

Стилизация отключенных элементов:

<style> input:disabled { opacity: 0.7; cursor: not-allowed; background-color: #f5f5f5; } input[type="submit"]:disabled { background-color: #cccccc; color: #666666; } </style> <input type="text" value="Неактивное поле" disabled> <input type="submit" value="Отправить" disabled>

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

  • Используйте для временного отключения зависимых полей
  • Сочетайте с readonly для полей только для чтения
  • Добавляйте подсказки, почему поле отключено
  • Для доступности используйте aria-disabled в сложных компонентах

Ограничения и совместимость:

  • Поддерживается всеми браузерами
  • Нельзя отменить через CSS
  • В отличие от readonly, действует на все типы input
  • Состояние можно менять через JavaScript

Примечание: Атрибут disabled - важный инструмент UX для управления потоком заполнения форм. Для сложных сценариев рассмотрите использование aria-disabled с кастомной JavaScript-логикой.