W3docs
fr
Se connecter

Attribut disabled de HTML

The disabled attribute is a boolean attribute specifying that the element must be disabled. Read about this attribute and see on what elements it can be used.

L'attribut disabled de HTML est un attribut booléen qui spécifie que l'élément doit être désactivé.

Cet attribut peut être utilisé pour empêcher l'utilisation de l'é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 s'applique également à celui-ci. Les éléments prenant en charge l'attribut disabled mais n'ayant pas cet attribut défini correspondent à la pseudo-classe :enabled.

Syntaxe

Syntaxe de l'attribut disabled de HTML

<tag disabled></tag>

Exemple de l'attribut disabled de HTML utilisé sur l'élément <button> :

Exemple de l'attribut HTML <span class="attribute">"disabled"</span> 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>
Essayez vous-même »

Exemple de l'attribut disabled de HTML utilisé sur l'élément <fieldset> :

Exemple de l'attribut HTML <span class="attribute">"disabled"</span> 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>
Essayez vous-même »

danger

Lorsqu'un <fieldset> est désactivé, tous les contrôles de formulaire descendants le sont également, à l'exception des contrôles de formulaire situés dans l'élément <legend>.

Exemple de l'attribut disabled de HTML utilisé sur l'élément <input> :

Exemple de l'attribut disabled de HTML 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>
Essayez vous-même »

Exemple de l'attribut disabled de HTML utilisé sur l'élément <optgroup> :

Attribut disabled de HTML

<!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>
Essayez vous-même »

Exemple de l'attribut disabled de HTML utilisé sur l'élément <option> :

Exemple de l'attribut HTML <span class="attribute">"disabled"</span> 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>
Essayez vous-même »

Exemple de l'attribut disabled de HTML utilisé sur l'élément <select> :

Exemple de l'attribut HTML <span class="attribute">"disabled"</span> 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>
Essayez vous-même »

Exemple de l'attribut disabled de HTML utilisé sur l'élément <textarea> :

Exemple de l'attribut HTML <span class="attribute">"disabled"</span> 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>
Essayez vous-même »

Pratique

Pratique

Que pouvez-vous dire de l'attribut HTML 'disabled' en vous basant sur le contenu de la page ?