如果在label标签中包含input标签，则不需要使用'for'属性。

也就是说，我不喜欢在标签中包含input标签，因为我认为它们是独立的，不包含实体。

我非常喜欢将元素包装在<label>中，因为我不需要生成id。

我是一名Javascript开发人员，使用React或Angular生成可以被我或其他人重用的组件。然后很容易在页面中复制一个id，导致奇怪的行为。

As most people have said, both ways work indeed, but I think only the first one should. Being semantically strict, the label does not "contain" the input. In my opinion, containment (parent/child) relationship in the markup structure should reflect containment in the visual output. i.e., an element surrounding another one in the markup should be drawn around that one in the browser. According to this, the label should be the input's sibling, not it's parent. So option number two is arbitrary and confusing. Everyone that has read the Zen of Python will probably agree (Flat is better than nested, Sparse is better than dense, There should be one-- and preferably only one --obvious way to do it...).

因为W3C和主要浏览器供应商的决定(允许“任何你喜欢的方式来做”，而不是“做正确的方式”)，今天的网络是如此混乱，我们开发人员不得不处理如此复杂和多样化的遗留代码。

行为差异:点击标签和输入之间的空格

如果你点击标签和输入之间的空格，它只在标签包含输入时激活输入。

这是有意义的，因为在这种情况下，空格只是标签的另一个字符。

div { 边框:1px纯黑色; ｝ 标签{ 边框:1px纯黑色; 填充:5 px; ｝ 输入{ margin-right: 30 px; ｝ 内< p >: < / p > <标识> <input type="checkbox" /> 标签。在我和复选框之间单击。 < / >标签 外的< p >: < / p > <input type="checkbox" id="check" /> <标签= >“查看”标签。</label> .在我和复选框之间单击

能够在标签和方框之间单击意味着它是:

更容易点击 不太清楚事情的开始和结束

引导复选框v3.3示例使用了里面的输入:http://getbootstrap.com/css/#forms遵循它们可能是明智的。但是他们在4.0版本改变了主意https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios所以我不知道什么是明智的了:

复选框和无线电的使用是为支持基于html的表单验证而构建的，并提供简洁、可访问的标签。因此，我们的<input>s和<label>s是兄弟元素，而不是<label>中的<input>。这稍微有点冗长，因为您必须指定id和属性来关联<input>和<label>。

详细讨论这一点的UX问题:https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable

我通常会选择前两个。我曾见过使用第三个选项的场景，当无线电选项嵌入到标签和css包含类似的内容时

label input {
    vertical-align: bottom;
}

为了确保无线电的垂直对齐。

有关W3的建议，请参阅http://www.w3.org/TR/html401/interact/forms.html#h-17.9。

他们说这两种方法都可以。他们将这两个方法描述为显式(使用“for”和元素的id)和隐式(将元素嵌入到标签中):

明确:

for属性显式地将一个标签与另一个控件关联:for属性的值必须与相关联的控件元素的id属性的值相同。

隐式:

若要隐式地将一个标签与另一个控件关联，该控件元素必须位于label元素的内容中。在这种情况下，LABEL可能只包含一个控制元素。