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

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

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

有关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;
}

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

您需要考虑的一件事是复选框和无线电输入与javascript的交互。

使用下面的结构:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

当用户点击“标签文本”时，controlCheckbox()函数将被触发一次。

但是，当输入标记被单击时，controlCheckbox()函数可能会在一些较老的浏览器中被触发两次。这是因为输入和标签标签都会触发附加到复选框的onclick事件。

然后您的checkboxState中可能会有一些错误。

我最近在IE11上遇到了这个问题。我不确定现代浏览器是否有这种结构的问题。

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