web-dev-qa-db-fra.com

Balises HTML à l'intérieur de <label>

J'ai un tableau dans une page qui se compose de cases à cocher dans les cellules à gauche et de descriptions dans les cellules à droite. La "description" contient des en-têtes h4 et du texte brut. Je veux faire toute cette description (tout à l'intérieur <td></td>) une marque.

Donc, chaque ligne ressemble à ceci:

<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td>
<td><label for="i1">
<h4>Some stuff</h4>more stuff..
<h4>Some stuff</h4>more stuff..
</label>
</td></tr>

Cela ne fonctionne pas cependant, le texte n'agit pas comme une étiquette et n'est pas cliquable. J'utilise Firefox 3.6 pour le tester. Si je supprime <h4> balises il commence à fonctionner, mais cela complique le formatage. Y a-t-il quelque chose à propos de <h*> balises qui empêchent <label> de fonctionner correctement?

htmlnestedlabel
53
SaltyNuts

Éléments de niveau bloc (auxquels h4 appartient) ne sont pas autorisés à l'intérieur des éléments en ligne et entraîneront un comportement indéfini. Vous pouvez utiliser à la place des éléments span.

52
Tatu Ulmanen

Seuls éléments en ligne (sauf les autres éléments d'étiquette) peuvent apparaître à l'intérieur des éléments d'étiquette.

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->

- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1

De toute façon, cela n'a aucun sens d'y mettre des titres.

28
Quentin

L'élément <label> En HTML est un élément de niveau en ligne et ne peut pas contenir d'éléments de niveau bloc.

C'est probablement ce qui cause vos problèmes. Alternativement, vous pouvez mettre vos étiquettes dans les <h4>:

<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td>
<td><
<h4><label for="i1">Some stuff</label></h4>more stuff..
<h4><label for="i1">Some stuff</label></h4>more stuff..
</label>
</td></tr>
15
Jamie Dixon