Atrybut disabled
Atrybut disabled blokuje element
formularza HTML,
czyli czyni go nieaktywnym. Jest atrybutem
bez wartości.
Blokowanie elementów jest zwykle potrzebne po to, aby zabronić użytkownikowi zmiany niektórych wartości (które jednak powinny być pokazane użytkownikowi w postaci elementów formularza). Czasami elementy są blokowane (i odblokowywane) za pomocą JavaSctipt.
Zachowanie
W przypadku przycisku (button
lub input
z atrybutem type w wartościach button,
reset lub submit) blokada
oznacza, że przycisku nie będzie można kliknąć.
W przypadku pola tekstowego (input
lub textarea)
nie będzie można w nim zmienić lub skopiować
tekstu. W przypadku pól wyboru
i przycisków opcji
ich stanu (zaznaczone lub nie) nie będzie można
zmienić. W przypadku list rozwijanych
select
nie będzie można zmienić wybranego elementu listy.
Zablokowany element domyślnie ma szare tło. Nie będzie również uczestniczył w przejściach klawiszem Tab.
Przykład . Zablokowany przycisk
Zablokujmy przycisk za pomocą atrybutu
disabled. Dla porównania obok przykład
niezablokowanego przycisku (spróbujmy na niego
kliknąć):
<button disabled>text</button>
<button>text</button>
:
Przykład . Zablokowane pole wyboru
A teraz spójrzmy na zablokowane pole wyboru. Dla porównania obok patrzymy na przykład niezablokowanego pola wyboru:
<input type="checkbox" disabled>
<input type="checkbox">
:
Przykład . Zablokowane i zaznaczone pole wyboru
Spójrzmy, jak wygląda zablokowane
i zaznaczone za pomocą atrybutu checked
pole wyboru. Dla porównania obok
odwołajmy się do przykładu niezablokowanego
zaznaczonego pola wyboru:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Przykład . Zablokowane pole tekstowe
A teraz zablokujmy pole input. Dla porównania obok spójrzmy na przykład niezablokowanego pola:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Przykład . Zablokowane textarea
A tutaj zobaczymy zablokowane textarea (zwróć uwagę na to, że rozmiar zablokowanego textarea można zmieniać). Dla porównania obok odwołajmy się do przykładu niezablokowanego textarea:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Przykład . Zablokowana lista rozwijana
Spójrzmy jak działa zablokowany
select.
Dla porównania obok spójrzmy na przykład niezablokowanej
listy rozwijanej:
<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>
:
