Comment fabriquer des formulaires compatibles tous navigateurs, à la fois beaux et accessibles ? Voici un résumé du fameux tutoriel « Prettier Accessible Foms » qui explique quelle association de code HTML, CSS et JavaScript utiliser pour y parvenir.
On peut passer beaucoup de temps sur la mise en forme et l’accessibilité des formulaires. Il est particulièrement problématique d’aligner label et champ de saisie (comme sur l’illustration suivante) sans utiliser de <table> comme autrefois. Car les étapes d’un formulaire n’étant pas des données tabulaires, les construire en tableau est sémantiquement incorrect.
Les positionnements flottants (float) sont souvent employés pour réaliser ce genre de mise en forme, mais compte tenu de la complexité de certaines mises en pages et des nombreux bugs du navigateur Internet Explorer, ce n’est pas une solution robuste.
Le script « cmxform » de Nick Rigby, permet l’exploit de réussir ce type de formulaires, de façon sémantique, accessible et compatible avec la plupart des navigateurs. Pour en savoir plus et utiliser vous aussi cette solution, consultez le tutoriel original (en anglais) : Prettier Accessible Forms. En voici un rapide résumé :
Structure HTML
Construisez des formulaires correctement structurés (avec <fieldset>, <legend>, <label>, etc.) dont les étapes élémentaires sont présentées en liste <ol><li>. Voir mon article précédent : Des formulaires bien structurés, faciles à styler.
Mise en forme CSS
La mise en forme de ces formulaires repose sur l’emploi de la valeur CSS inline-block appliquée aux <label>. Ceux-ci peuvent alors être dotés de dimensions, de marges et padding comme n’importe quel élément bloc, tout en restant positionnés en ligne.
form.cmxform label {
display: inline-block;
width: 120px;
vertical-align: top;
line-height: 1.8;
}La bonne nouvelle c’est que ça fonctionne avec Internet Explorer pour Windows et Mac (uniquement sur les éléments inline). La mauvaise, c’est que ça ne fonctionne pas (une fois n’est pas coutume) avec les navigateurs Mozilla (dont Firefox et Netscape).
Correction des bugs
Ce bug est donc corrigé en JavaScript, avec la bibliothèque JQuery, en intervenant sur le DOM, pour remplacer le code généré des labels des navigateurs Mozilla de cette façon :
<label for="titre" style="display: -moz-inline-box;">
<span style="display: block; width: 120px;">Titre</span>
</label>Résultat final
Ceci a été testé avec succès sur de nombreux navigateurs. Un exemple complet est visible sur le site original.
Répondre à cet article
Suivre les commentaires :
| 