<label> 内的 HTML 标签答案

【问题标题】：HTML tags inside <label><label> 内的 HTML 标签
【发布时间】：2010-12-16 14:45:20
【问题描述】：

我在页面中有一个表格，其中包含左侧单元格中的复选框和右侧单元格中的说明。 “描述”包含 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> 正常工作？

【问题讨论】：

这个站点的标志对话框有<label>s，里面有一个<input type="radio">和两个<span>s，但在语义上，第一个<span>是一个标题，第二个是一个标题描述，即一个段落。很遗憾，使用适当的 HTML 标记无法实现这样的结构。

标签： html nested label

【解决方案1】：

块级元素（h4 所属的）不允许在内联元素中，并且会导致未定义的行为。您可以改用span 元素。

【讨论】：

span 中也不允许使用块级元素。
确实可以解决问题。将 span 的样式设置为 display:block 允许我让它看起来与标题几乎相同（因此该 span 的 CSS 条目与 h4 + display:block 的相同），并且标签功能也有效。跨度>
我认为他的意思是“代替 h4s”而不是“代替标签”
是的，我只是将 h4 更改为 span 并设置样式 span 以模仿 h4。好东西。

【解决方案2】：

只有inline elements（除了其他标签元素）可以出现在标签元素中。

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

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

反正把标题放在那里是没有意义的。

【讨论】：

这不是对您或您的项目的判断，而是关于标签的语义。从语义上讲，“标签”元素就像一个且只有一个控件的标题。所以它已经是一个标题。在里面放另一个标题是多余的。另外，“H*”标题可以指向很多东西，但在标签中只允许指向一件事，即标签已经指向的同一件事。这就像使用标题作为图像的标题。这在语义上没有意义。不过，就外观而言，使用在视觉上类似于“H*”标签的“span”标签可能是有意义的。
用一个完整的多部分文章标记的单选按钮怎么样？一个小圆圈可以关联多少意义真的没有限制。

【解决方案3】：

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>

【讨论】：

你知道，我从来没有想过一个给定的复选框可以有多个标签。谢谢！

【解决方案4】：

Here on MDN they explain exactly why NOT to use headings inside a label tag:

在 a 中放置标题元素会干扰多种辅助技术，因为标题通常用作导航辅助。如果需要在视觉上调整标签的文本，请改用应用于元素的 CSS 类。

【讨论】：