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

У меня есть таблица на странице, состоящая из флажков в ячейках слева и описаний в ячейках справа. "Описание" содержит заголовки 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>?

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

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

Вероятно, это вызывает проблемы. Кроме того, вы можете поместить свои метки внутри <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>