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

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

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

第三方编辑

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

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

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

.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包含类似的内容时

label input {
    vertical-align: bottom;
}

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

来自W3的HTML4规范:

标签本身可以放置在标签的前面、后面或周围 相关的控制。

<label for =“姓氏”>姓氏</label> <输入类型=“文本” id=“姓氏” />

or

<输入类型=“文本” id=“姓氏” /> <label for =“姓氏”>姓氏</label>

or

<标识> <input type="text" name="lastname" /> 姓 < / >标签

请注意，当表格用于布局时，标签在一个单元格中，其关联的表单字段在另一个单元格中，则不能使用第三种技术。

任何一个都是有效的。我喜欢使用第一个或第二个示例，因为它提供了更多的样式控制。

一个值得注意的“gotcha”指示你永远不应该在<label>元素中包含一个以上的输入元素，它具有显式的“for”属性，例如:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

虽然对于表单特性来说，自定义文本值是单选按钮或复选框的次要属性，但label元素的点击聚焦功能会立即将焦点转移到id在其'for'属性中显式定义的元素上，这使得用户几乎不可能单击包含的文本字段来输入值。

就我个人而言，我尽量避免使用带有输入子元素的标签。从语义上讲，标签元素包含标签本身以外的内容似乎不合适。如果在标签中嵌套输入是为了达到某种美学效果，那么应该使用CSS。

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

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

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

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