web-dev-qa-db-ja.com

<label>内のHTMLタグ

左側のセルのチェックボックスと右側のセルの説明で構成されるページに表があります。 「説明」には、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>が正常に機能しない原因がありますか？

htmlnestedlabel
53
SaltyNuts

ブロックレベル要素（_h4所属）はインライン要素内では許可されず、未定義の動作を引き起こします。代わりにspan要素を使用できます。

52
Tatu Ulmanen

インライン要素 （他のラベル要素を除く）のみがラベル要素内に表示されます。

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

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

とにかくそこに見出しを付けても意味がありません。

28
Quentin

HTMLの<label>要素はインラインレベルの要素であり、ブロックレベルの要素を含めることはできません。

これがおそらく問題の原因です。または、ラベルを<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