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

label input {
    vertical-align: bottom;
}

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

就个人而言，我喜欢把标签放在外面，就像你的第二个例子一样。这就是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" />

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

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

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

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

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

明确:

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

隐式:

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

我通常会选择前两个。我曾见过使用第三个选项的场景，当无线电选项嵌入到标签和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允许多个标签与一个输入字段相关联，但这会使屏幕阅读器感到困惑，解决这个问题的一种方法是将输入字段和其他元素嵌套在一个标签元素中。