html中标记内的交互式内容？

Question

在Mozilla html tutorial它说

不要在标签内放置锚点或按钮等交互元素。这样做会使人们难以激活与标签关联的表单输入。

别

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

做

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

我试过这两个并且在第一次使用时找不到任何严重的问题，“让人们很难激活与标签相关的表单输入”是什么意思？

Answer 1

简而言之，单击与复选框或单选按钮关联的标签。通过添加链接，行为变得不稳定，单击标签的一部分会做一件事，但在另一件事上做一些不同的事情。

另外，与其他字段关联的标签也执行功能。单击这些标签可将焦点转移到相关字段。

一般的经验法则是不应嵌套交互式元素。在这种情况下，label可以被认为是一个交互式字段（尽管特殊情况是标签封装了相关元素）。

Answer 2

如果您单击“不要”示例中的链接，则在您有机会在链接页面和复选框所在的页面上提交表单之前，您将被带到该页面。（但我猜从技术上讲，你仍然设法激活复选框...）

HTML实际上并没有阻止你将链接放在标签内。但它确实阻止你将其他表单控件放在标签particularly if they have an ID and the label has a for attribute that's trying to point to another control中（因为标签一次只能与一个控件关联）。