Des label pour vos formulaires !
Non non, le W3C ne vient pas de mettre au point un nouveau standard pour les formulaires du web.
Je souhaites juste pousser un petit coup de gueule vis à vis de tous les développeurs qui ne pensent pas à inclure la balise “label” dans leurs formulaires.
En effet, lorsque j’ai à remplir à formulaire, j’ai tendance à cliquer sur l’intitulé du champs pour atteindre le champs directement associé et être sur de ne pas me tromper plutot que de cliquer sur le champs directement.
Malheureusement, de nombreux développeurs oublient la balise “label” qui permet de rendre l’intitulé du champs cliquable pour atteindre directement le champs correspondant.
Ce qui fait que si vous oubliez les label, cela donne ceci (essayez de cliquer sur les intitulés, sans effet) :
Alors que si vous y pensez, vous obtenez ceci (cliquez sur les intitulés pour atteindre le champs correspondant) :
Pour faire ça c’est très simple, il vous suffit simplement d’entourer l’intitulé de votre champs et ce dernier par la balise label, comme indiqué ci-dessous :
| xHTML | <label> |
Et si jamais vous avez envie de bien aligner vos étiquettes et vos champs, en mettant les intitulés dans une colonne, et les champs dans une autre, vous avez les tableaux. Mais si vous êtes soucieux de la validité W3C de votre au code (et j’espère que vous l’êtes), vous vous apercevrez qu’il n’est pas possible d’entourer à la fois l’étiquette et le champs d’un label puisque que ce dernier incluera alors la fermeture du premier “td” puis l’ouverture du second.
C’est à ce moment là qu’interviennent alors les attributs “for” pour le label, et “id” pour le champs.
Il est vous est alors possible d’entourer par la balise label uniquement l’intitulé du champs en précisant à l’aide de l’attribut “for” l’id du champs auquel il est censé être attribué.
Vous obtenez alors ceci :
| xHTML | <table> |
La balise label fonctionne pour tous les types de champs (même les champs “file”, même si c’est inutile), donc vous n’avez plus d’excuse pour ne pas les utiliser !
Merci 
PS : désolé, cet article n’est pas valide xhtml à cause du preformatage post-traitement de Wordpress…
Informations & Liens
Utilisez les liens suivants pour être au courant des réactions à cet article, diffuser cet article et voir les autres articles de la même catégorie.
Informations
Flux RSS & Liens
Catégorie(s)
Tags / Mots-clés
Autres Articles
Commentaires
> Non non, le W3C ne vient pas de mettre au point un nouveau standard pour les formulaires du web.
En fait c’est à l’étude ;-).
Plutôt que d’utiliser des tableaux il est tout à fait possible d’utiliser CSS pour alligner parfaitement les labels et les champs. Vous pouvez voir un exemple ici : http://www.thekorp.com/projet/connexion.html (ne faites pas attention si c’est laid…)
Petite remarque en plus : mettre un cursor:pointer sur les labels c’est encore mieux 
!
Beeeeeeeeeeeeerk une page pas valide xhtml 
Quant à moi, je mets toujours les label, par réflexe, et aussi par souci de propreté du code, et d’accessibilité de la page.
bon, apres, c’est sûr que je vais des fois beaucoup plus loin dans la psychose conçernant le code =D merci htmltidy quoi =)
( kris, pitiay, corrige ton code, mets des dans le tas, les , etc, ça me trouble de voir marquer erreur dans ma barre des taches
twk: oui, c’est beaucoup mieux 
Neovov: En effet on peut aligner en CSS, mais j’ai tendance à vouloir mettre un alignement à droite sur les intitulés des champs, du coup, les tableaux s’avèrent beaucoup plus pratiques. Et je voulais mettre en avant l’utilisation de l’attribut “for” de la balise label Mais merci de ton lien ^^
Darklg: Tu me soule avec ta validation -___- je t’ai dit de désactiver tidy pour mon blog, j’y peux rien c’est le preformatage post traitement de Wordpress qui fait ça.
C’est juste pour te filer un coup de main, et que ça soit plus serieux pour une page d’accueil de blog d’un webmaster dont le niveau xhtml est marqué comme haut sur son site =/.
quant aux erreurs dont je parlais, c’étaient des tableaux mal foutus que tu as corrigé.
m’enfin bon, jdis plus rien, je te laisse te débrouiller, si c’est comme ça qu’on est remerciés =/
Petit rappel pertinent. Je dois dire que je n’y pense que trop rarement lorsque je code, mais que j’aime bien utiliser ce petit détail quand je navigue
Pour aligner en CSS, il suffit de définir une largeur fixe à tous les labels, et cela alignera les champs qui sont positionnés après.
Bon je me suis un peu emballé, il faut un peu plus qu’une simple propriété width.
disons que c’est mieux comme ça :
label {
display:block;
float:left;
width:100px;
}
Il peut aussi être utile de configurer height et line-height.
C’est aussi vraiment pertinent pour l’accessibilité. Un screenreader associera plus facilement le libellé d’un champs au champs du formulaire.
Ne pas oublier non plus les tabindex quand c’est nécessaire.
darklg: J’ai fait cet article sur Wordpress, il va de soi que si un tableau est mal foutu (avec des “br” à l’intérieur), c’est que c’est Wordpress qui s’en est mêlé. Cet abruti traite les article à leur affichage, et non à l’enregistrement, résultat il me met des paragraphes non fermés, etc… :/
mick: C’est juste, mais il faudra revoir la taille du label si tu change la taille du texte. De plus, tu force à mettre un attribut “for” au label alors que tu pourrais simplement l’entourer. Avec un tableau ce problème n’arrive pas, la mise en page est simple, et c’est pas comme si c’était un design. Après tout, un formulaire, c’est comme des données tabulaires
Marin: En effet, c’est mieux pour l’accessibilité. Et les tabindex aussi, merci de le rappeler, il faut que je pense à les mettre sur mon site
Tu te redécouvres une passion pour l’accessibilité et les bonnes pratiques web ? 
c’est vrai que le label est dévenu un peu désué. il faut déja entourer le input d’un p^pour ue la page soit valide, alors rajouter un label çà surcharge!! Mais j’y penserai..
Par contre l’alignement via un tableau ouch çà pique les yeux.. On est loin des recommandations actuelles.
Darklg: Pas vraiment :P
eMeRiKa: Comme je l’ai dit avant, l’alignement en tableau était ici pour mettre en avant l’utilisation de l’attribut “for” ^^ De plus, pour l’affichage des “exemples de champs”, j’ai pas eu d’autre choix que de mettre ça en tableau sinon ça ne plaisait pas à Wordpress (et puis bon, personnellement je suis contre les tableaux pour un design, la structure d’un site, mais pas pour son contenu =) )
Fighty: De rien
C’est vrai que tout le monde n’est pas aussi soucieux que toi, je n’en tient pas rigueur quand je remplis des formulaire mais en y repensant c’est vrai que c’est mieux avec !