Atributul disabled
Atributul disabled blochează un element
HTML de formular,
adică îl face inactiv. Este un atribut
fără valoare.
Blocarea elementelor este de obicei necesară pentru a interzice utilizatorului să modifice unele valori (care, totuși, trebuie să fie afișate utilizatorului sub formă de elemente de formular). Uneori elementele sunt blocate (și deblocate) cu ajutorul JavaSctipt.
Comportament
În cazul butonului (button
sau input
cu atributul type în valorile button,
reset sau submit) blocarea
înseamnă că butonul nu va putea fi apăsat.
În cazul câmpului text de introducere (input
sau textarea)
în el nu se va putea schimba sau copia
textul. În cazul casetelor de bifare
și butoanelor radio
starea lor (bifat sau nu) nu va putea fi
schimbată. În cazul listelor drop-down
select
nu se va putea schimba elementul selectat din listă.
Un element blocat implicit are un fundal gri. De asemenea, nu va participa la tranzițiile cu tasta Tab.
Exemplu . Buton blocat
Să blocăm un buton cu ajutorul atributului
disabled. Pentru comparație, alături un exemplu
de buton neblocat (încercați să apăsați pe el):
<button disabled>text</button>
<button>text</button>
:
Exemplu . Caseta de bifare blocată
Acum să ne uităm la o casetă de bifare blocată. Pentru comparație, alături vedem exemplul unei casete de bifare neblocate:
<input type="checkbox" disabled>
<input type="checkbox">
:
Exemplu . Caseta de bifare blocată și bifată
Să vedem cum arată o casetă de bifare blocată
și bifată cu ajutorul atributului checked.
Pentru comparație, alături
să ne referim la exemplul unei casete de bifare bifate
neblocate:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Exemplu . Câmp text blocat
Acum să blocăm un câmp de introducere. Pentru comparație, alături să ne uităm la exemplul unui câmp de introducere neblocat:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Exemplu . Textarea blocată
Aici vom vedea o textarea blocată (observați că dimensiunea textareei blocate poate fi modificată). Pentru comparație, alături să ne referim la exemplul unei textaree neblocate:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Exemplu . Listă drop-down blocată
Să vedem cum funcționează un
select blocat.
Pentru comparație, alături să ne uităm la exemplul unei liste drop-down
neblocate:
<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>
:
