Атрибут 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 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>
:
