L'attribut HTML disabled
L'attribut disabled est un attribut boolean indiquant que l'élément doit être désactivé. Découvrez cet attribut et les éléments sur lesquels il peut s'utiliser.
L'attribut HTML disabled est un attribut boolean qui indique que l'élément doit être désactivé.
Cet attribut peut être utilisé pour empêcher l'utilisation d'un élément jusqu'à ce qu'une condition soit remplie, comme la sélection d'une case à cocher. Lorsqu'il est présent, l'élément ne répond pas aux actions de l'utilisateur et ne peut pas recevoir le focus. De plus, les contrôles de formulaire désactivés ne sont pas soumis avec le formulaire. Il est possible de rendre l'élément à nouveau utilisable en supprimant l'attribut disabled avec JavaScript. L'attribut disabled est généralement affiché en grisé.
Vous pouvez utiliser l'attribut disabled sur les éléments suivants : <button>, <fieldset>, <input>, <optgroup>, <option>, <select> et <textarea>.
Lorsque l'attribut disabled est appliqué à un élément, la pseudo-classe :disabled lui est également appliquée, ce qui vous permet de styliser les contrôles désactivés en CSS. Les éléments prenant en charge l'attribut disabled mais ne le possédant pas correspondent à la pseudo-classe :enabled.
Syntaxe
<tag disabled></tag>Comme disabled est un attribut boolean, sa simple présence suffit à l'activer. Vous n'avez pas besoin d'une valeur ; disabled, disabled="" et disabled="disabled" sont tous équivalents. Pour le désactiver, il faut supprimer entièrement l'attribut.
disabled et readonly
Ces deux attributs empêchent un utilisateur de modifier un contrôle de formulaire, mais leur comportement est très différent. Choisir le mauvais est une source fréquente de bugs, surtout lorsque la valeur d'un champ doit quand même parvenir au serveur.
| Comportement | disabled | readonly |
|---|---|---|
| Valeur soumise avec le formulaire | Non | Oui |
| Peut recevoir le focus clavier | Non | Oui |
| Apparaît modifiable (curseur, sélection de texte) | Non (grisé) | Oui |
Correspond à :disabled / :read-only | :disabled | :read-only |
| Annoncé aux lecteurs d'écran | Souvent ignoré | Annoncé normalement |
| Fonctionne sur tous les types de contrôle | <input>, <select>, <textarea>, <button>, etc. | uniquement <input> et <textarea> de type texte |
Utilisez disabled lorsque le contrôle doit être complètement inactif et que sa valeur doit être ignorée. Utilisez readonly lorsque vous souhaitez que l'utilisateur voie (et copie) une valeur sans pouvoir la modifier, tout en la soumettant avec le formulaire.
Accessibilité
Un élément désactivé est retiré de l'ordre de tabulation, ne peut pas être cliqué et est souvent ignoré par les technologies d'assistance. Cela le rend facile à rater : un utilisateur de lecteur d'écran naviguant dans un formulaire peut ne jamais savoir qu'un bouton « Envoyer » désactivé existe, ni pourquoi.
Si vous souhaitez qu'un contrôle ait l'apparence et le comportement d'un élément indisponible mais reste focusable et annoncé, utilisez l'attribut aria-disabled="true" à la place de l'attribut natif disabled. Avec aria-disabled, le contrôle reste dans l'ordre de tabulation et est annoncé comme « estompé/indisponible », mais vous devez empêcher son action vous-même en JavaScript — le navigateur ne bloquera pas les clics ni la soumission du formulaire pour vous.
En règle générale : utilisez le disabled natif pour les contrôles qui ne doivent vraiment pas participer, et optez pour aria-disabled lorsque garder l'élément accessible à la découverte est plus important que la protection intégrée.
Exemples par élément
Exemple de l'attribut HTML disabled utilisé sur l'élément <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>Exemple de l'attribut HTML disabled utilisé sur l'élément <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>Lorsqu'un <fieldset> est désactivé, tous les contrôles de formulaire descendants sont également désactivés, à l'exception des contrôles de formulaire situés à l'intérieur de l'élément <legend>.
Exemple de l'attribut HTML disabled utilisé sur l'élément <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>Exemple de l'attribut HTML disabled utilisé sur l'élément <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>Exemple de l'attribut HTML disabled utilisé sur l'élément <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>Exemple de l'attribut HTML disabled utilisé sur l'élément <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>Exemple de l'attribut HTML disabled utilisé sur l'élément <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>Activer et désactiver avec JavaScript
Un schéma courant consiste à garder un contrôle désactivé jusqu'à ce que l'utilisateur effectue une action — par exemple, n'activer un bouton « Envoyer » qu'après avoir coché une case. En JavaScript, chaque contrôle de formulaire expose une propriété boolean disabled. Définissez-la à true pour désactiver l'élément et à false pour l'activer :
<!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>Définir element.disabled = true ajoute l'attribut, et element.disabled = false le supprime. Notez que la propriété est un boolean, et non la string "disabled", donc assignez toujours true ou false.