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

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

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

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

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

一个值得注意的“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。

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