Attribut HTML : disabled

L'attribut booléen disabled, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler 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 au focus.

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

Cet attribut booléen indique que l'utilisateur 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 est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.

Note : Si un <fieldset> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<legend>).

Lorsqu'un élément de support a l'attribut disabled 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 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 va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <button> à travers les chargements de pages. 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 focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient 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é.

Note : L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut disabled est spécifié.

Utilisation

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

S'il est présent sur un élément de 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, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par 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 focus et ne peut pas être mis à jour par l'utilisateur, et ne participe pas à la validation des contraintes.

Exemples

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

html

<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 :
    <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 : <input type="name" name="radio" value="régulier" /> Régulier</label
    >
  </p>
  <p>
    <label>Nombre : <input type="number" /></label>
  </p>
</fieldset>

Spécifications

Specification
HTML Standard # attr-fe-disabled
HTML Standard # attr-optgroup-disabled
HTML Standard # attr-option-disabled

Les pseudo-classes :disabled et :enabled

Attribut HTML : disabled

Interactions entre attributs

Utilisation

Validation des contraintes

Exemples

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