L'application des normes et standards du W3C dans le cadre de projets de développement Web est rendu, pour certains, un incontournable. L'application de telles règles a incité les gens à abandonner les tableaux pour faire la structure de mise en page, c'est une conséquence directe. Or, on me pose souvent la question lorsque je donne de la formation sur le sujet: Quoi faire pour les formulaires Web?
Quand je parle de formulaires Web, je parle surtout d'applications interactives, de systèmes complexes, pas juste de formulaires de commentaires... quoi que la question se pose aussi pour ceux-ci. Dans le cadre de mon travail régulier, j'ai à traiter des écrans de saisie parfois assez grands avec des fonctions diverses. Historiquement, on utilisait les tableaux pour créer des grilles de mise en page cohérentes et structurées.
Voilà qu'on arrive avec la problématique des standards Web. D'emblée, on serait tenté d'abandonner les tableaux et d'utiliser des DIVs de façon systématique. Or, on se retrouve avec un problème semblable... Plutôt que d'avoir des TABLE, TR et TD à répétition, on se retrouve avec des DIVs imbriqués avec des ID et des CLASS à profusion. Je vous laisse imaginer de quoi a l'air la CSS associée au fichier.
Une autre solution est l'utilisation des tableaux pour créer la grille. Un retour en arrière? pas nécessairement. Certaines données (libellés et champs) peuvent être gérés comme des données tabulaires. On doit utiliser les THEAD, TH et TBODY trop souvent oubliés parce qu'on utilisait - à tort- les tableux pour la mise en page et non des données. Sauf que ça devient rapidement lourd et difficile de tout ajuster sans tomber encore dans l'orgie de CLASS et ID. Je me suis dit qu'il devait exister une solution à ce problème...
L'utilisation des FIELDSET
Ignorant, j'étais simplement ignorant... C'est Stephane qui m'a fait voir la lumière au bout du tunnel! Il m'a fait découvrir le FIELDSET! J'ai donc travaillé le dossier... que je vous présente maintenant.
La comparaison
Voici du HTML tout simple pour créer un formulaire à trois champs, soit «Nom», «Prénom» et «Commentaires». Je n'ai appliqué aucun style sur l'exemple, vous pouvez voir les résultats dans le fichier comparatif. Au premier regard, on remarque que celui qui donne le plus bel aspect visuel est la structure par tableaux (on met le texte dans les cellules que l'on désire).
L'approche par DIVs est intéressante dans la mesure où on ajoute un ID ou une CLASS à un élément sémantiquement faible pour donner une valeur à notre contenant. Là où le bat blesse, c'est dans la composition de tout ça. On a déjà une valeur sémantique pour notre INPUT et LABEL, pourquoi ne pas les exploiter?
Je vous propose maintenant la même page comparative, mais avec des styles cette fois. J'ai tenté de donner un résultat semblable aux trois approches (sans tomber dans l'excès). Ce qu'on remarque, c'est que les changements sont mineurs et l'impact sur la feuille de style n'est pas exagéré. Bref, quelle approche est la meilleure?
Mon constat
Personnellement, je crois que la meilleure approche est celle du Fieldset. On peut facilement regrouper en groupes logiques des éléments par cette balise et on y applique une légende. Bref, on fait un parallèle avec les tableaux et leur CAPTION. Pas besoin de tout envelopper dans des DIVs, la balise fait le travail. On donne une valeur accrue à notre contenant.
Second avantage, le document se dégrade très bien et, visuellement, les Fielsdets sont déjà encadrés, bref, regroupés par intérêt. J'ai tenté l'expérience d'une page de taille moyenne avec divers champs pour voir la réaction de l'approche et c'est assez surprenant.
Imaginez un instant que vous découpez une application en divers blocs logiques de saisie et que vous demandiez aux programmeurs de vous les pousser (push), il ne reste qu'à appliquer les styles là dessus (au besoin). Ça se gère comme des DIVs, sans l'inconvénient des ID et CLASS à profusion et on élimine la structure fermée des TABLEs!
Le paradis, quoi! Bon... j'exagère un peu... J'espère juste que les gens vont commencer à utiliser cette méthode et abandonner les tableaux lorsqu'ils ne sont pas nécessaires!
