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

label input {
    vertical-align: bottom;
}

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

将输入嵌套到标签中有几个优点，特别是带有单选/复选框字段时，

.unchecked,支票{显示:没有;} 标签输入:not(:checked) ~ .unchecked{display:inline;} 标签输入:checked ~ .checked{display:inline;} <标识> <input type="checkbox" value="something" name="my_checkbox"/> . <span class="unchecked">Not Checked</span> <span class="checked">Is checked </span> . < / >标签

正如你从演示中看到的，在输入字段之前嵌套其他元素允许，

要单击以激活字段的文本 输入字段后面的元素将根据字段的状态动态设置样式。

此外，HTML std允许多个标签与一个输入字段相关联，但这会使屏幕阅读器感到困惑，解决这个问题的一种方法是将输入字段和其他元素嵌套在一个标签元素中。

这两种方法都是正确的，但是将输入放在标签内会大大降低使用CSS进行样式化时的灵活性。

首先，<标签>限制了它可以包含的元素。例如，如果<input>不在<label>内，则只能在<input>和标签文本之间放置<div>。

其次，虽然有一些变通方法可以使样式更容易，比如用span包装内部标签文本，但有些样式将继承自父元素，这可能会使样式更复杂。

第三方编辑

根据我的理解，标签的html 5.2规范规定，标签内容模型是短语内容。这意味着只有内容模型为短语content <label>的标签才允许在</label>内。

内容模型必须包含的内容的规范描述 作为元素的子元素和子元素。 大多数被归类为措辞内容的元素只能 包含本身被归类为措辞内容的元素， 没有任何流内容。

参考WHATWG(编写表单的用户界面)，将输入字段放在标签内并没有错。这样可以节省代码，因为不再需要标签中的for属性。

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

label input {
    vertical-align: bottom;
}

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

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

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

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

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