Атрибут disabled блокирует элемент
HTML формы,
то есть делает его неактивным. Является атрибутом
без значения.
Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью JavaSctipt.
Поведение
В случае кнопки (button
или input
с атрибутом type в значениях button,
reset или submit) блокировка
означает, что на кнопку нельзя будет нажать.
В случае с текстовым полем ввода (input
или textarea)
в нем нельзя будет поменять или скопировать
текст. В случае с чекбоксами
и радио
их состояние (отмечено или нет) нельзя будет
сменить. В случае с выпадающими списками
select
нельзя будет сменить выбранный пункт списка.
Заблокированный элемент по умолчанию имеет серый фон. Он также не будет участвовать в переходах клавишей Tab.
Пример . Заблокированная кнопка
Давайте заблокируем кнопку с помощью атрибута
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>
: