Attributo HTML disabled
L'attributo disabled è un attributo boolean che specifica che l'elemento deve essere disabilitato. Scopri questo attributo e su quali elementi può essere utilizzato.
L'attributo HTML disabled è un attributo boolean e specifica che l'elemento deve essere disabilitato.
Questo attributo può essere utilizzato per impedire l'uso dell'elemento fino a quando non viene soddisfatta una determinata condizione, come la selezione di una casella di controllo. Quando è presente, l'elemento non risponde alle azioni dell'utente e non può ricevere il focus. Inoltre, i controlli di form disabilitati non vengono inviati insieme al form. È possibile rendere nuovamente utilizzabile l'elemento rimuovendo l'attributo disabled con JavaScript. L'attributo disabled viene comunemente visualizzato in grigio.
È possibile usare l'attributo disabled sui seguenti elementi: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> e <textarea>.
Quando l'attributo disabled viene applicato a un elemento, anche la pseudo-classe :disabled si applica ad esso, quindi è possibile stilizzare i controlli disabilitati in CSS. Gli elementi che supportano l'attributo disabled ma che non hanno l'attributo impostato corrispondono alla pseudo-classe :enabled.
Sintassi
<tag disabled></tag>Poiché disabled è un attributo boolean, la sua semplice presenza lo attiva. Non è necessario un valore; disabled, disabled="" e disabled="disabled" sono tutti equivalenti. Per disattivarlo, rimuovere completamente l'attributo.
disabled vs. readonly
Entrambi gli attributi impediscono a un utente di modificare un controllo di form, ma si comportano in modo molto diverso. Scegliere quello sbagliato è una fonte comune di bug, specialmente quando il valore di un campo deve comunque raggiungere il server.
| Comportamento | disabled | readonly |
|---|---|---|
| Valore inviato con il form | No | Sì |
| Può ricevere il focus da tastiera | No | Sì |
| Appare modificabile (cursore, selezione del testo) | No (in grigio) | Sì |
Corrisponde a :disabled / :read-only | :disabled | :read-only |
| Annunciato ai lettori di schermo | Spesso ignorato | Annunciato normalmente |
| Funziona su ogni tipo di controllo | <input>, <select>, <textarea>, <button>, ecc. | solo <input> e <textarea> di tipo testo |
Usa disabled quando il controllo deve essere completamente inattivo e il suo valore deve essere ignorato. Usa readonly quando vuoi che l'utente possa vedere (e copiare) un valore ma non modificarlo, pur continuando a inviarlo con il form.
Accessibilità
Un elemento disabilitato viene rimosso dall'ordine di tabulazione, non può essere cliccato e viene spesso ignorato dalle tecnologie assistive. Questo lo rende facile da perdere: un utente di screen reader che naviga con Tab tra i campi di un form potrebbe non sapere mai che esiste un pulsante "Invia" disabilitato, né capirne il motivo.
Se si vuole che un controllo appaia e si comporti come non disponibile ma sia comunque raggiungibile con il focus e annunciato, utilizzare l'attributo aria-disabled="true" al posto dell'attributo nativo disabled. Con aria-disabled, il controllo rimane nell'ordine di tabulazione e viene annunciato come "oscurato/non disponibile", ma è necessario impedirne l'azione manualmente in JavaScript — il browser non bloccherà i clic o l'invio del form automaticamente.
Come regola generale: usa il disabled nativo per i controlli che davvero non dovrebbero partecipare, e ricorri a aria-disabled quando mantenere l'elemento individuabile è più importante della protezione integrata.
Esempi per elemento
Esempio dell'attributo HTML disabled utilizzato sull'elemento <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br /><br />
<button type="button" disabled>Disabled button</button>
</body>
</html>Esempio dell'attributo HTML disabled utilizzato sull'elemento <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text" />
</div>
<div>
<label>Last Name:</label>
<input type="text" />
</div>
<div>
<label>Date of birth:</label>
<input type="text" />
</div>
</fieldset>
</form>
</body>
</html>Quando un <fieldset> è disabilitato, tutti i controlli di form discendenti sono anch'essi disabilitati, eccetto i controlli di form all'interno dell'elemento <legend>.
Esempio dell'attributo HTML disabled utilizzato sull'elemento <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>Esempio dell'attributo HTML disabled utilizzato sull'elemento <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Esempio dell'attributo HTML disabled utilizzato sull'elemento <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>Esempio dell'attributo HTML disabled utilizzato sull'elemento <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Esempio dell'attributo HTML disabled utilizzato sull'elemento <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>Attivare e disattivare disabled con JavaScript
Un pattern comune consiste nel mantenere un controllo disabilitato finché l'utente non compie un'azione — ad esempio, abilitare un pulsante "Invia" solo dopo che una casella di controllo è stata selezionata. In JavaScript, ogni controllo di form espone una proprietà boolean disabled. Impostarla su true disabilita l'elemento e su false lo abilita:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label>
<input type="checkbox" id="agree" /> I accept the terms
</label>
<br /><br />
<button id="submit" type="button" disabled>Submit</button>
<script>
const agree = document.getElementById("agree");
const submit = document.getElementById("submit");
agree.addEventListener("change", function () {
// Enable the button only while the checkbox is checked
submit.disabled = !agree.checked;
});
</script>
</body>
</html>Impostare element.disabled = true aggiunge l'attributo, mentre element.disabled = false lo rimuove. Si noti che la proprietà è un boolean, non la string "disabled", quindi assegnare sempre true o false.