Атрибут disabled
Атрибутът disabled блокира елемента
на HTML формата,
тоест го прави неактивен. Той е атрибут
без стойност.
Блокирането на елементи обикновено е необходимо, за да се забрани на потребителя да променя някои стойности (които, въпреки това, трябва да бъдат показвани на потребителя под формата на елементи на формата). Понякога елементите се блокират (и блокирането се премахва) чрез JavaSctipt.
Поведение
В случая с бутон (button
или input
с атрибут type със стойности button,
reset или submit) блокирането
означава, че бутонът няма да може да бъде натиснат.
В случая с текстово поле за въвеждане (input
или textarea)
в него няма да може да се променя или копира
текст. В случая с чекбоксите
и радио бутоните
тяхното състояние (отметнато или не) няма да може да бъде
променено. В случая с падащите списъци
select
няма да може да се промени избраният пункт от списъка.
Блокиран елемент по подразбиране има сив фон. Той също така няма да участва в преходите с клавиша Tab.
Пример . Блокиран бутон
Нека блокираме бутон с помощта на атрибута
disabled. За сравнение, до него има пример
за неблокиран бутон (опитайте да го натиснете):
<button disabled>text</button>
<button>text</button>
:
Пример . Блокиран чекбокс
А сега нека разгледаме блокиран чекбокс. За сравнение, до него има пример за неблокиран чекбокс:
<input type="checkbox" disabled>
<input type="checkbox">
:
Пример . Блокиран и отметнат чекбокс
Нека видим как изглежда блокиран
и отметнат с помощта на атрибута checked
чекбокс. За сравнение, до него
има пример за неблокиран
отметнат чекбокс:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Пример . Блокирано текстово поле
А сега нека блокираме текстово поле. За сравнение, до него има пример за неблокирано текстово поле:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Пример . Блокиран textarea
А тук ще видим блокиран textarea (обърнете внимание, че размерът на блокирания textarea може да се променя). За сравнение, до него има пример за неблокиран textarea:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Пример . Блокиран падащ списък
Нека видим как работи блокиран
select.
За сравнение, до него има пример за неблокиран
падащ списък:
<select disabled>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
<select>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
:
