嵌套标签行为标准

Posted 2023-02-21

【中文标题】嵌套标签行为标准

【英文标题】：Standards on behaviour of nested labels

【发布时间】：2014-01-17 01:20:58

【问题描述】：

我想知道如果我嵌套 2 个 <label> 标记会发生什么，结果发现，在所有浏览器的所有最新版本中，除了 Opera，单击内部标签仅导致单击该标签。 Here's a demo 嵌套标签标签的行为。

我的问题是：在处理嵌套标签中的点击事件时，浏览器的行为是否有任何标准？我只能找到关于 Gecko 行为的 this MDN section，但我找不到任何东西关于其他浏览器。

这对我来说很有趣的原因是因为如果可以嵌套标签标签并且仍然能够选择正确的输入及其最接近的周围标签，那么就有可能做出像 this。如果嵌套标签行为没有在任何标准中定义（因此任何浏览器都可以做他们想做的任何事情），这根本不是一个选项，即使在未来也是如此。任何此类选项卡的格式为：

<label>
    <input type="radio" name="1">
    <span>Shown label</span>
    <div>Contents of the tab</div>
    <!--repeat, put further identically-formatted <label>s here-->
</label>

当不嵌套标签时，这个选项卡系统已经成为可能，通过将 for 属性分配给标签，将 id 分配给输入，但是你必须担心每个输入的唯一 ID，并且这比这样做要付出更多的努力。 Here 是另一个演示（如您所见，现在无法正确标记已检查的标签）。

<label for="tabN">
    <span>Shown label<span>
</label>
<input type="radio" name="1">
<div>Contents of the tab</div>
<!--repeat, put further identically-formatted structures here-->

PS：请不要用“这不是输入和标签的设计初衷！”来回答这个问题。我知道，我只是想知道这是否有可能实现，包括在 Opera 中。

【参考方案1】：

如您所知，不允许嵌套label 元素，因为label 具有以下内容模型：

短语内容，但没有后代可标记元素，除非它是元素的标记控件，并且没有后代label 元素。

html5 定义了当用户激活interactive content 时会发生什么：

HTML 中的某些元素具有激活行为，这意味着用户可以激活它们。这会触发一系列取决于激活机制的事件，通常会在click 事件中达到高潮，如下所述。

“点击指针设备时”的第 3 步说：

让e成为用户指定的元素（定义如下）的最近的可激活元素，如果有的话。

为了找到最近的可激活元素，定义了algorithm：

如果 target 具有已定义的激活行为，则返回 target 并中止这些步骤。 如果 target 有父元素，则将 target 设置为该父元素并返回第一步。 否则，没有最近的可激活元素。

本节没有明确包括交互式内容嵌套无效的情况。我不确定这个算法是否也适用于无效代码（可能不是）。但是如果它会适用，只有内部的label 应该触发。

【讨论】：

感谢您的详细解答！我决定不使用嵌套标签，因为标准不允许这样做，但您的回答确实有助于理解应该发生的事情。所以基本上，Opera 在处理标签上的点击事件时并没有做它应该做的事情，对吧？

@joeytje50：我不确定。 如果这个算法也适用于交互式内容嵌套无效的情况，那么是的，Opera 做错了。但也可能这种算法只需要对 valid HTML 以这种方式工作。后者在这里是安全的选择（规范永远不会考虑所有可能的无效标记情况，所以如果没有明确说明，为什么要在这里）。

【参考方案2】：

html5 spec 明确表示：

标签元素不能包含任何嵌套的标签元素。

因此，浏览器处理嵌套标签的方式是未定义的。除此之外，for attributes are important for accessibility 和可用性不应被省略。

【讨论】：

for 属性是可选的，您也可以在标签内嵌套输入元素以获得完全相同的结果。该网站似乎没有意识到这一点，但我已经看到足够多的网站说省略 for 和 id 标签是完全可以的。省略这些并不意味着可访问性完全降低。不过感谢您的回答。