HTML-теги внутри <label>

Question

У меня есть таблица на странице, которая состоит из флажков в ячейках слева и описаний в ячейках справа. «Описание» содержит заголовки h4 и простой текст. Я хочу сделать все это описание (все внутри <td></td>) меткой.

Итак, каждый ряд выглядит так:

<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>

Это не работает, однако, текст не действует как метка и не кликабелен. Я использую Firefox 3.6, чтобы проверить это. Если я удаляю теги <h4>, он начинает работать, но это усложняет форматирование. Есть ли что-то в тегах <h*>, которые мешают правильной работе <label>?

Answer 1

Элементы блочного уровня (к которым относится h4) недопустимы внутри встроенных элементов и будут вызывать неопределенное поведение.Вместо этого вы можете использовать span элементы.

Answer 2

Только встроенные элементы (кроме других элементов метки) могут появляться внутри элементов метки.

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

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

В любом случае не имеет смысла ставить заголовки там.

Answer 3

Элемент <label> в HTML является встроенным элементом уровня и не может содержать элементы уровня блока.

Это, вероятно, то, что вызывает ваши проблемы. В качестве альтернативы вы можете поместить свои метки в <h4> s:

<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>