diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md index cca152375..767a2ee88 100644 --- a/src/fr/articles/desactiver-des-elements.md +++ b/src/fr/articles/desactiver-des-elements.md @@ -3,22 +3,40 @@ title: "Désactiver des éléments HTML" abstract: "Comment désactiver des éléments d'une page ?" titleBeforeTag: true date: "2021-07-01" +updateDate: "2025-09-01" tags: - web - beginner --- -## Désactiver un champ de formulaire +La désactivation d'un élément interactif sert à empêcher l'utilisateur d'interagir avec ce composant ou avec ses descendants. + +Cette technique est à utiliser avec parcimonie, en fonction des composants et du contexte d'utilisation. + +## Désactiver un bouton -Pour désactiver un champ de formulaire il suffit de lui attribuer l'attribut `disabled` : +Il est possible de désactiver un bouton en lui ajoutant simplement l'attribut `disabled` : ```html +``` + +Cependant, cette technique n'est pas recommandée pour un bouton de soumission de formulaire pour diverses raisons, notamment : faible contraste, bouton non atteignable au clavier, aucune information donnée à l'utilisateur. + +## Désactiver un champ de formulaire + +Comme pour un bouton, un champ de formulaire est désactivé avec l'attribut `disabled`. + +Il est ainsi possible de désactiver un champ `input` ou une zone de saisie `textarea` : +```html + ``` -Si `disable` est utilisé sur un `
`, les éléments enfants sont désactivés. + +Si `disabled` est utilisé sur un `
`, les éléments enfants sont également désactivés. +Dans l'exemple ci-dessous, l'`input`, la `checkbox` et le `select` sont désactivés car ils héritent de la désactivation sur le `fieldset` : ```html -
+
+ + + + + +``` + +Il est aussi possible de désactiver une seule `option` présent dans le `select` : +```html + + +``` + ## Désactiver un lien -Pour désactiver un lien, contrairement à la technique précédente, l'utilisation de l'attribut `disabled` n'est pas autorisée. Il est tout de même possible de désactiver un lien en suivant les 3 étapes suivantes : +Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autorisée. Cependant, il est possible de simuler une désactivation en suivant ces trois étapes : - supprimer l'attribut `href` pour qu'il ne puisse plus recevoir le focus - ajouter un `role="link"` pour qu'il soit toujours considéré comme un lien par les lecteurs d'écran - ajouter un attribut `aria-disabled="true"` pour qu'il soit indiqué comme étant désactivé 
<a role="link" aria-disabled="true">Lien désactivé</a>
-Consultez l'excellent article de Scott O'Hara sur le sujet : Disabling a link. + +## L'attribut de lecture seule `read-only` + +L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte. +Il ne faut pas utiliser cet attribut pour désactiver d'autres éléments (boutons et autres éléments interactifs), car cela est justement le rôle de l'attribut `disabled`. + +La principale différence entre les deux techniques réside dans le fait qu'un élément en lecture seule sera toujours atteignable au clavier et restitué par les aides techniques ; cela peut avoir un intérêt pour vérifier, sans pouvoir modifier, une information précédemment renseignée (par exemple : un email, une date de naissance, un numéro de téléphone, etc.). + +## Webographie +