Attributo disabled
L'attributo disabled blocca un elemento
HTML di un modulo,
cioè lo rende non attivo. È un attributo
senza valore.
Bloccare gli elementi di solito è necessario per vietare all'utente di modificare alcuni valori (che, tuttavia, devono essere mostrati all'utente sotto forma di elementi del modulo). A volte gli elementi vengono bloccati (e sbloccati) tramite JavaSctipt.
Comportamento
Nel caso di un pulsante (button
o input
con l'attributo type con valori button,
reset o submit) il blocco
significa che il pulsante non potrà essere premuto.
Nel caso di un campo di input testuale (input
o textarea)
non sarà possibile modificare o copiare
il testo. Nel caso delle checkbox
e dei pulsanti radio
non sarà possibile cambiarne lo stato (selezionato o meno).
Nel caso dei menu a tendina
select
non sarà possibile cambiare la voce selezionata.
Un elemento bloccato per impostazione predefinita ha uno sfondo grigio. Inoltre non parteciperà agli spostamenti con il tasto Tab.
Esempio . Pulsante bloccato
Blocchiamo un pulsante con l'attributo
disabled. Per confronto, accanto c'è un esempio
di pulsante non bloccato (provate a premere
su di esso):
<button disabled>testo</button>
<button>testo</button>
:
Esempio . Checkbox bloccata
Ora diamo un'occhiata a una casella di spunta bloccata. Per confronto, accanto c'è un esempio di casella di spunta non bloccata:
<input type="checkbox" disabled>
<input type="checkbox">
:
Esempio . Checkbox bloccata e selezionata
Vediamo come appare una casella di spunta
bloccata e selezionata con l'attributo checked.
Per confronto, accanto
vediamo un esempio di casella di spunta selezionata
non bloccata:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Esempio . Input testuale bloccato
Ora blocchiamo un input. Per confronto, accanto vediamo un esempio di input non bloccato:
<input type="text" value="testo" disabled>
<input type="text" value="testo">
:
Esempio . Textarea bloccato
Qui vediamo un textarea bloccato (si noti che le dimensioni del textarea bloccato possono essere modificate). Per confronto, accanto vediamo un esempio di textarea non bloccato:
<textarea disabled>testo</textarea>
<textarea>testo</textarea>
:
Esempio . Menu a tendina bloccato
Vediamo come funziona un
select bloccato.
Per confronto, accanto vediamo un esempio di menu a tendina
non bloccato:
<select disabled>
<option>città1</option>
<option selected>città2</option>
<option>città3</option>
<option>città4</option>
</select>
<select>
<option>città1</option>
<option selected>città2</option>
<option>città3</option>
<option>città4</option>
</select>
:
