HTML5“标​​签”元素，嵌套还是“for”？ [复制]

Posted 2023-02-24

【中文标题】HTML5“标​​签”元素，嵌套还是“for”？ [复制]

【英文标题】：HTML5 "label" element, nested or "for"? [duplicate]

【发布时间】：2015-06-03 08:14:47

【问题描述】：

是否有理由更喜欢使用 html5 元素“标签”

包装“输入”元素 带有“for”属性

即喜欢

<label><input></label>

到

<label for="inp"></label><input id="inp">

【参考方案1】：

是的，这是有原因的。

元素不会为用户呈现任何特殊的东西。 但是，它为鼠标用户提供了可用性改进，因为 如果用户点击元素内的文本，它会切换 控件。

当您包含<label for="#yourControlID"><input id="yourControlID"></label> 时，它将附加到该特定输入控件。例如看下面的sn-p。

<form action="demo_form.asp">
  <label>Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

尝试点击label - Male。切换不会发生，但如果您点击 label-female 它会切换。

所以基本上它的作用是，当您尝试从标签中删除 for 时，它将停止将该特定标签绑定到控件，并且当您单击其中没有 for 的标签时，它实际上不会切换无线电元素。

SOURCE

【讨论】：

感谢您的回答，但我的问题是关于选择将标签链接到输入的最佳方式。一种选择是将<input> 嵌套在里面。另一种是将元素作为对等点并使用for 和id 属性。哪个最好？

我想this liink会给你更明确的答案。希望它有帮助.. :)

谢谢，我也发现了这一点，并且已经投票结束我的问题作为重复。

哦.. 没关系.. 编码愉快.. :)