HTML désactivé Attribut
Définition et Utilisation
L'attribut disabled est un attribut booléen.
Lorsqu'il est présent, il indique que l'élément doit être désactivé.
Un élément désactivé est inutilisable.
L'attribut disabled peut être utilisé pour empêcher un utilisateur d'interagir avec l'élément jusqu'à ce qu'une autre condition soit remplie (comme sélectionner une case à cocher, etc.). Ensuite, un script JavaScript peut supprimer la valeur désactivée et rendre l'élément à nouveau utilisable.
S'applique à
L'attribut disabled peut être utilisé sur les éléments suivants :
| Éléments | Attribut |
|---|---|
| <button> | disabled |
| <fieldset> | disabled |
| <input> | disabled |
| <optgroup> | disabled |
| <option> | disabled |
| <select> | disabled |
| <textarea> | disabled |
Exemples
Exemple de Bouton
Un bouton désactivé :
<button type="button" disabled>Cliquez Moi !</button> Exemple de Fieldset
Désactiver un groupe d'éléments de formulaire liés :
<fieldset disabled>
<legend>Personalia:</legend>
Nom : <input type="text"><br>
Email : <input type="text"><br>
Date de naissance : <input type="text">
</fieldset> Exemple d'Input
Un formulaire HTML avec un champ d'entrée désactivé :
<form action="/action_page.php">
Prénom : <input type="text" name="fname"><br>
Nom de famille : <input type="text" name="lname" disabled><br>
<input type="submit" value="Soumettre">
</form> Exemple d'Optgroup
Un groupe d'options désactivé :
<select>
<optgroup label="Voitures Allemandes" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select> Exemple d'Option
Une liste déroulante avec une option désactivée :
<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select> Exemple de Select
Une liste déroulante désactivée :
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> Exemple de Textarea
Une zone de texte désactivée :
<textarea disabled>
Sur formation-ti.org, vous apprendrez à créer un site web. Nous offrons des tutoriels gratuits dans toutes les technologies de développement web.
</textarea> Support des Navigateurs
L'attribut disabled est pris en charge par les navigateurs suivants pour chaque élément :
| Élément | |||||
|---|---|---|---|---|---|
| bouton | Oui | Oui | Oui | Oui | Oui |
| fieldset | Oui | Non supporté | Oui | 7.0 | Oui |
| input | 1.0 | 6.0 | 1.0 | 1.0 | 1.0 |
| optgroup | 1.0 | 8.0 | Oui | Oui | Oui |
| option | 1.0 | 8.0 | 1.0 | Oui | Oui |
| select | Oui | Oui | Oui | Oui | Oui |
| textarea | Oui | Oui | Oui | Oui | Oui |