Ce document décrit comment mettre en forme un formulaire HTML de manière accessible en utilisant uniquement CSS. Il explique les éléments HTML utilisés dans un formulaire et donne des exemples de code CSS pour styliser ces éléments tout en gardant une bonne accessibilité.
0 évaluation0% ont trouvé ce document utile (0 vote)
99 vues10 pages
Ce document décrit comment mettre en forme un formulaire HTML de manière accessible en utilisant uniquement CSS. Il explique les éléments HTML utilisés dans un formulaire et donne des exemples de code CSS pour styliser ces éléments tout en gardant une bonne accessibilité.
Ce document décrit comment mettre en forme un formulaire HTML de manière accessible en utilisant uniquement CSS. Il explique les éléments HTML utilisés dans un formulaire et donne des exemples de code CSS pour styliser ces éléments tout en gardant une bonne accessibilité.
Ce document décrit comment mettre en forme un formulaire HTML de manière accessible en utilisant uniquement CSS. Il explique les éléments HTML utilisés dans un formulaire et donne des exemples de code CSS pour styliser ces éléments tout en gardant une bonne accessibilité.
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt
Vous êtes sur la page 1/ 10
Toutconseille
Par défaut, les formulaires ne sont pas folichons. Pourtant, quel site n'a pas son formulaire ? (euh... mammouthland ?!!)
Dès lors, la tentation est grande de mettre les champs dans des tableaux pour les aligner, et de rajouter du javascript pour un effet focus ou se passer un bouton d'envoi. Et l'accessibilité dans tout ça ?!!
Mais avec les CSS, on peut améliorer l'aspect d'un formulaire et rester accessible !
On constate donc les présences des balises <form>, <fieldset> (pour regrouper les différentes zones de formulaire), <legend> (pour identifier chaque fieldset), <input>, <select>, <option> et <textarea>.
Pour le champ permettant de recueillir l'adresse email, le type déclaré est type="email". Ceci est une nouveauté HTML5 qui permet, par exemple avec certains navigateurs de smartphone, d'obtenir le clavier comportant directement le signe @. Pour les autres navigateurs, le type sera interprété comme un banal texte. Il n'y a donc aucune restriction pour s'en servir.
Il y a aussi les <label>, trèèèès importants les <label>. Ceux-ci permettent en effet, entre autres, d'élargir la zone de focus d'un champ et donc d'améliorer l'accessibilité. Voyez par exemple pour les boutons radio : vous pouvez cliquer sur le bouton radio pour le sélectionner, mais vous pouvez aussi et surtout cliquer sur le "oui" ou le "non" pour que se coche le bouton radio correspondant. Sans label correctement renseigné (avec un for se rapportant à un id), cela n'est pas possible.
www.toutconseille.com Toutconseille Toutes ces balises seront déclarées dans la feuille de style pour la mise en forme du formulaire.
Les styles (code CSS) sont à enregistrer dans une feuille de style externe selon la procédure indiquée dans le tutoriel « Feuille de style de base »
www.toutconseille.com Toutconseille Le display:block indiqué dans le label permet de passer à la ligne automatiquement. Le display:inline indiqué dans le label.inline... pour éviter de passer à la ligne dans certains cas (ici pour les boutons radios) Le input[type=radio] permet de styliser uniquement les boutons radio (c'est à dire les cases à cocher) de même input[type=submit] et input[type=reset] permettent de styliser les boutons de soumission et d'annulation. cursor:pointer permet d'avoir le curseur sous forme d'une main pour les boutons. Attention : border-radius et box-shadow sont des propriétés décoratives CSS3 qui ne sont pas implémentées par les navigateurs anciens.
Le résultat sera alors le suivant :
Un peu plus loin dans l'habillage
Le minimum "vital" étant posé, on peut améliorer encore plus l'aspect des différents éléments pour les navigateurs plus récents... surtout dans la gamme IE.
www.toutconseille.com Toutconseille Focus
Il est possible aussi d'attribuer un effet sur le focus des champs grâce à la pseudo- classe :focus et définir, par exemple, une nouvelle couleur de fond.
