Mise en valeur des champs requis (ou optionnels)

2023-01-16

Comme pour la mise en valeur des images sans description[1], il est possible de mettre en évidence les champs requis d’un formulaire, ce que devraient faire les personnes qui en sont à l’origine… En théorie.

Comme dit précédemment, le fichier chrome userContent.css n’est pas pris en charge par défaut. Il est nécessaire de modifier le booléen `toolkit.legacyUserProfileCustomizations.stylesheets` dans les paramètres du navigateur.

Limitations

À noter que le code ci-dessous n’est pas entièrement fonctionnel puisque basé exclusivement sur les attributs html, ce qui devrait fonctionner dans un monde simple, mais évidemment Javascript nous met des bâtons dans les roues.

Tous les champs requis ou optionnels ne sont pas forcément marqués via la pseudoclasse équivalente, ce qui crée des faux négatifs sur les sites reposant sur du Javascript pour leurs formulaires.

Explications

Le corps du code, en deux parties, repose sur les pseudo-classes `:required` et son opposé `:optional`.

Dans un premier temps, on indique vouloir appliquer un liserai rouge sur tous les champs – via l’astérisque qui englobe à la fois les éléments `input`, `select` et `textarea` – ne présentant pas la pseudo-classe `:required`. C’est en théorie les champs qui devraient être indiqués comme requis via un astérisque ou autre.

Puis, j’ai ajouté une seconde règle qui à l’inverse va sélectionner tous les champs optionnels pour leur mettre un fond gris clair – faisant écho à l’expression anglaise « greyed out » pour une option qui n’est pas disponible.

Code final

@-moz-document url-prefix() {
    *:required {
        outline:2px solid red;
        outline-offset:-2px;
    }
    *:optional {
        background-color:lightgrey;
    }
}

Références

[1] Mise en valeur des images sans texte alternatif

-- Response ended

-- Page fetched on Sun May 19 01:15:25 2024