Attribut HTML : disabled

L'attribut booléen disabled, lorsqu'il est présent, rend l'élément non modifiable, non sélectionnable, ou même non soumis avec le formulaire. L'utilisateur·rice ne peut ni modifier ni sélectionner le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut disabled est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés à la sélection.

Exemple interactif

<form>
 <label for="name">Nom&nbsp;:</label>
 <input id="name" name="name" type="text" />
 <label for="emp">Employé·e&nbsp;:</label>
 <select id="emp" name="emp" disabled>
 <option>Non</option>
 <option>Oui</option>
 </select>
 <label for="empDate">Date d'embauche&nbsp;:</label>
 <input id="empDate" name="empDate" type="date" disabled />
 <label for="resume">CV&nbsp;:</label>
 <input id="resume" name="resume" type="file" />
</form>

label {
 display: block;
 margin-top: 1em;
}
*:disabled {
 background-color: dimgrey;
 color: linen;
 opacity: 1;
}

Présentation

L'attribut disabled est utilisé par <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea> et <input>.

Cet attribut booléen indique que l'utilisateur·rice ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple <fieldset> ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <optgroup>, le sélecteur reste interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.

Lorsqu'un élément supporte l'attribut disabled et que celui-ci est appliqué, la pseudo-classe :disabled s'y applique également. Inversement, les éléments qui prennent en charge l'attribut disabled mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :enabled.

Cet attribut booléen empêche l'utilisateur·rice d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <fieldset> ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, alors le bouton est activé.

Firefox, contrairement aux autres navigateurs, va faire persister l'état désactivé dynamique d'un <button> lors des rechargements de page. Utilisez l'attribut autocomplete pour contrôler cette fonctionnalité.

Interactions entre attributs

La différence entre disabled et readonly est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours sélectionnables, alors que les contrôles désactivés ne peuvent pas recevoir de sélection, ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles tant qu'ils ne sont pas activés.

Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, required n'a aucun effet sur les entrées dont l'attribut disabled est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que pattern, n'ont aucun effet, tant que le contrôle n'est pas activé.

Utilisation

Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car ces contrôles sont immuables, ne reçoivent pas de sélection ou d'événements de navigation, comme les clics de souris ou les événements liés à la sélection, et ne sont pas soumis avec le formulaire.

S'il est présent sur un élément supporté, la pseudo-classe :disabled correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :enabled correspondra. Si l'élément ne prend pas en charge l'attribut disabled, celui-ci n'aura aucun effet, y compris sur les pseudo-classes :disabled et :enabled.

Validation des contraintes

Si l'élément est disabled, alors la valeur de l'élément ne peut pas recevoir de sélection et ne peut pas être mise à jour par l'utilisateur·rice, et ne participe pas à la validation des contraintes.

Exemples

Lorsque des contrôles de formulaire sont désactivés, de nombreux navigateurs les affichent par défaut dans une couleur plus claire, grisée. Voici des exemples de case à cocher, bouton radio, <option> et <optgroup> désactivés, ainsi que des contrôles de formulaire désactivés via l'attribut disabled appliqué à l'élément ancêtre <fieldset>. Les <option> sont désactivés, mais le <select> ne l'est pas. On aurait pu désactiver tout le <select> en ajoutant l'attribut à cet élément plutôt qu'à ses descendants.

<fieldset>
 <legend>Cases à cocher</legend>
 <p>
 <label>
 <input type="checkbox" name="chbox" value="regular" /> Régulier
 </label>
 </p>
 <p>
 <label>
 <input type="checkbox" name="chbox" value="disabled" disabled /> désactivé
 </label>
 </p>
</fieldset>
<fieldset>
 <legend>Boutons radio</legend>
 <p>
 <label>
 <input type="radio" name="radio" value="regular" /> Régulier
 </label>
 </p>
 <p>
 <label>
 <input type="radio" name="radio" value="disabled" disabled /> désactivé
 </label>
 </p>
</fieldset>
<p>
 <label
 >Sélectionnez une option&nbsp;:
 <select>
 <optgroup label="Groupe 1">
 <option>Option 1.1</option>
 </optgroup>
 <optgroup label="Groupe 2">
 <option>Option 2.1</option>
 <option disabled>Option 2.2</option>
 <option>Option 2.3</option>
 </optgroup>
 <optgroup label="Groupe 3" disabled>
 <option>Désactivé 3.1</option>
 <option>Désactivé 3.2</option>
 <option>Désactivé 3.3</option>
 </optgroup>
 </select>
 </label>
</p>
<fieldset disabled>
 <legend>Champ désactivé</legend>
 <p>
 <label
 >Nom&nbsp;:
 <input type="name" name="radio" value="régulier" /> Régulier</label
 >
 </p>
 <p>
 <label>Nombre&nbsp;: <input type="number" /></label>
 </p>
</fieldset>

Spécifications

Compatibilité des navigateurs

html.elements.button.disabled

html.elements.fieldset.disabled

html.elements.input.disabled

html.elements.optgroup.disabled

html.elements.option.disabled

html.elements.select.disabled

html.elements.textarea.disabled

Voir aussi

• Les pseudo-classes :disabled et :enabled