[Résolu] LABEL contenant un INPUT bouton, mais pas de texte

Hello les people,

J’ai une question sur laquelle j’ai un doute.

Si je fais quelque chose comme ça :

<label>
	<input
		name="submit"
		type="submit"
		value="Soumettre" />
</label>

Est-ce vraiment correcte ou pas ? Ça passe au validateur, mais j’ai un doute. Est-ce correcte ou est-ce non-recommandé, un tel usage d’un élément LABEL ? Et pour quelles raisons ?

Je n’avais toujours utilisé les LABEL qu’avec un attribut “for”, mais je trouve que c’est plus résilient d’inclure le contrôle dans le LABEL, dans le cas où il y a beaucoup de contrôles. Par soucis d’homogénéité, j’ai également enveloppé les quelques contrôles qui n’ont pas d’étiquette (les boutons), dans les LABEL également, mais j’ai un doute sur ce que je fais.

Autre question : la remarque sur les LABEL implicites, comme ils sont appelés dans l’article Utilisez l’élément label dans les formulaires, est-elle toujours d’actualité ? Je m’étonne de cette affirmation que

a écrit :
Cette syntaxe est présentée dans la spécification HTML, mais elle présente un défaut majeur: comme elle n’utilise pas les attributs for et id, les navigateurs n’associent pas bien l’intitulé au champ de formulaire. Cela posera problème aux lecteurs d’écran notamment.

Comment est-ce possible ? Je pensais que au contraire, l’association entre les deux était tout-à-fait directe avec cette forme.

-- edit --

Finalement, ce n’est pas le bouton dans un LABEL sans texte qui pose un problème, mais le fait de ne pas donner d’attribut “for” au LABEL. Voir commentaires plus bas.
Modifié par hibou57 (30 Sep 2012 - 09:11)

Bonjour,

- il faut un texte dans le label à côté d'un input (ou select ou textarea et en HTML5: etc) pour décrire le rôle de cet élément de formulaire. Pis-aller accepté par WCAG 2.0 : un attribut title sur cet input avec le contenu qu'on aurait mis dans le label (j'ai bien écrit pis-aller et pas variante parce que c'est moins bien). Truc pas accepté pas accessible : utiliser placeholder en HTML5 sans label sans title (déjà y a pas de placeholder sur un select et c'est pas fait pour ça, çaÿmal)

- dans ton exemple, tu utilises un input de type submit : y a jamais eu besoin de label pour ce type de bouton de soumission (idem avec les types image, button et reset et l'élément button). Exemple doublement invalide.

- tu te dirais, humain avec quelques connaissances en informatique que tu es, que dans le cas du label implicite (un input dans un label, pas à côté), même sans for/id :

<label>
	<span>Votre nom :</span>
  	<input name="truc" type="text">
</label>

c'est pas bien difficile de déterminer qu'est-ce qu'on pourrait associer comme texte à cet input, quel élément rechercher ?
Indices pour écrire un algo pas trop compliqué : il a pour parent DIRECT un label et il a pas d'autres indices (genre un id avec ailleurs un label ayant un for avec cette même valeur).
Allez, ça doit faire 10 ans que ça fonctionne, hein ?
Eh ben non, on peut pas utiliser de label implicite parce que c'est pas reconnu par les lecteurs d'écran (ou peut-être les un peu récents, j'ai pas testé mais pas tous en tout cas).

Donc il reste :

<label for="toto">
	<span>Votre nom :</span>
  	<input name="truc" id="toto" type="text">
</label>

à privilégier parce que ça permet d'écrire :

<label for="toto">
	<strong>Votre nom :</strong>
  	<input name="truc" id="toto" type="text">
	<span>Ici un indice en gris italique ou un message d'erreur en rouge gras qui sera lu avec le label dans tous les cas, yay</span>
</label>

et que c'est super accessible du coup.

Sinon a minima :

<label for="toto">Votre nom :</label>
<input name="truc" id="toto" type="text">

le classique label associé à son élément de formulaire via le couple d'attributs for/id.

L'attribut "for" est obligatoire pour l'accessibilité.