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

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

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

第三方编辑

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

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

来自W3的HTML4规范:

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

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

or

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

or

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

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

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

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

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

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

.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允许多个标签与一个输入字段相关联，但这会使屏幕阅读器感到困惑，解决这个问题的一种方法是将输入字段和其他元素嵌套在一个标签元素中。

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

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

明确:

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

隐式:

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

就个人而言，我喜欢把标签放在外面，就像你的第二个例子一样。这就是FOR属性存在的原因。原因是我经常会在标签上应用样式，比如宽度，以使表单看起来更好(下面是简写):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

这样我就可以避免表格和表单中的所有垃圾。