HTML中<label>标签内的交互式内容？

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

如果您点击“不要”示例中的链接，那么您将有机会进入该页面，然后才有机会在该页面上提交链接和复选框所在的表单。（尽管，我想从技术上来说，您仍然可以激活复选框...）

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

Answer 2

概括地说，单击与复选框或单选按钮关联的标签。通过添加链接，行为变得不稳定，单击标签的一部分可以做一件事，而在另一部分做不同的事情。

在旁注中，与其他字段关联的标签也可以执行功能。单击这些标签可将焦点移到相关字段。

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