Attribut disabled de HTML
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 "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 disabled de HTML utilisé sur l'élément <fieldset> :
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>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>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>Exemple de l'attribut disabled de HTML utilisé sur l'élément <option> :
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 disabled de HTML utilisé sur l'élément <select> :
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 disabled de HTML utilisé sur l'élément <textarea> :
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>Pratique
Que pouvez-vous dire de l'attribut HTML 'disabled' en vous basant sur le contenu de la page ?