Attribut disabled
L'attribut disabled bloque un élément
de formulaire HTML,
c'est-à-dire qu'il le rend inactif. C'est un attribut
sans valeur.
Le blocage des éléments est généralement nécessaire pour interdire à l'utilisateur de modifier certaines valeurs (qui, néanmoins, doivent être affichées à l'utilisateur sous forme d'éléments de formulaire). Parfois, les éléments sont bloqués (et débloqués) via JavaScript.
Comportement
Dans le cas d'un bouton (button
ou input
avec l'attribut type ayant les valeurs button,
reset ou submit) le blocage
signifie que le bouton ne pourra pas être cliqué.
Dans le cas d'un champ de saisie texte (input
ou textarea)
il ne sera pas possible d'en modifier ou copier
le texte. Dans le cas des cases à cocher
et des boutons radio
leur état (coché ou non) ne pourra pas être
modifié. Dans le cas des listes déroulantes
select
il ne sera pas possible de changer l'élément sélectionné.
Un élément bloqué a par défaut un fond gris. Il ne participera pas non plus aux navigations par la touche Tab.
Exemple . Bouton désactivé
Désactivons un bouton à l'aide de l'attribut
disabled. Pour comparaison, un exemple
de bouton non désactivé à côté (essayez de cliquer
dessus) :
<button disabled>texte</button>
<button>texte</button>
:
Exemple . Case à cocher désactivée
Regardons maintenant une case à cocher désactivée. Pour comparaison, regardons l'exemple d'une case à cocher non désactivée à côté :
<input type="checkbox" disabled>
<input type="checkbox">
:
Exemple . Case à cocher désactivée et cochée
Voyons à quoi ressemble une case à cocher
désactivée et cochée à l'aide de l'attribut checked.
Pour comparaison, regardons à côté l'exemple
d'une case à cocher cochée non désactivée :
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Exemple . Champ de saisie désactivé
Maintenant, désactivons un champ de saisie. Pour comparaison, regardons à côté l'exemple d'un champ de saisie non désactivé :
<input type="text" value="texte" disabled>
<input type="text" value="texte">
:
Exemple . Zone de texte désactivée
Ici nous verrons une zone de texte désactivée (remarquez que la taille de la textarea désactivée peut être modifiée). Pour comparaison, regardons à côté l'exemple d'une zone de texte non désactivée :
<textarea disabled>texte</textarea>
<textarea>texte</textarea>
:
Exemple . Liste déroulante désactivée
Voyons comment fonctionne une
select
désactivée.
Pour comparaison, regardons à côté l'exemple d'une liste déroulante
non désactivée :
<select disabled>
<option>ville1</option>
<option selected>ville2</option>
<option>ville3</option>
<option>ville4</option>
</select>
<select>
<option>ville1</option>
<option selected>ville2</option>
<option>ville3</option>
<option>ville4</option>
</select>
:
