Атрибут disabled блокирует элемент HTML формы, то есть делает его неактивным.

В случае кнопки (button или input с атрибутом type в значениях button, reset или submit) блокировка означает, что на кнопку нельзя будет нажать.

В случае с текстовым полем ввода (input или textarea) в нем нельзя будет поменять или скопировать текст.

В случае с чекбоксами и радио кнопочками их состояние (отмечено или нет) нельзя будет сменить.

В случае с выпадающими списками select нельзя будет сменить выбранный пункт списка.

Заблокированный элемент по умолчанию имеет серый фон. Он также не будет участвовать в переходах клавишей Tab.

Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью JavaSctipt.

См. также псевдоклассы disabled и enabled, которые задают стили заблокированным и незаблокированным элементам.

Примеры

Пример . Заблокированная кнопка

В данном примере кнопка заблокирована с помощью атрибута disabled. Для сравнения рядом привожу пример незаблокированной кнопки (попробуйте на нее нажать):

<button disabled>кнопка</button> <button>кнопка</button>

Результат выполнения кода:

Пример . Заблокированный чекбокс

В данном примере можно наблюдать заблокированный флажок чекбокс. Для сравнения рядом привожу пример незаблокированного флажка:

<input type="checkbox" disabled> <input type="checkbox">

Результат выполнения кода:

Пример . Заблокированный и отмеченный чекбокс

В данном примере можно наблюдать заблокированный и отмеченный с помощью атрибута checked флажок чекбокс. Для сравнения рядом привожу пример незаблокированного отмеченного флажка:

<input type="checkbox" disabled checked> <input type="checkbox" checked>

Результат выполнения кода:

Пример . Заблокированный текстовый инпут

В данном примере можно наблюдать заблокированный инпут. Для сравнения рядом привожу пример незаблокированного инпута:

<input type="text" value="Привет:)" disabled> <input type="text" value="Привет:)">

Результат выполнения кода:

Пример . Заблокированный текстареа

В данном примере можно наблюдать заблокированный текстареа (обратите внимание на то, что размер заблокированного textarea можно менять). Для сравнения рядом привожу пример незаблокированного текстареа:

<textarea disabled>Привет:)</textarea> <textarea>Привет:)</textarea>

Результат выполнения кода:

Пример . Заблокированный выпадающий список

В данном примере можно наблюдать заблокированный select. Для сравнения рядом привожу пример незаблокированного выпадающего списка:

<select disabled>
	<option>Москва</option>
	<option selected>Минск</option>
	<option>Киев</option>
	<option>Лондон</option>
</select>

<select>
	<option>Москва</option>
	<option selected>Минск</option>
	<option>Киев</option>
	<option>Лондон</option>
</select>

Результат выполнения кода: