是否有关于标签和输入HTML元素嵌套的最佳实践?
经典的方式:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
当前回答
我通常会选择前两个。我曾见过使用第三个选项的场景，当无线电选项嵌入到标签和css包含类似的内容时
label input {
vertical-align: bottom;
}
为了确保无线电的垂直对齐。
其他回答
参考WHATWG(编写表单的用户界面)，将输入字段放在标签内并没有错。这样可以节省代码，因为不再需要标签中的for属性。
来自W3的HTML4规范:
标签本身可以放置在标签的前面、后面或周围 相关的控制。
<label for =“姓氏”>姓氏</label> <输入类型=“文本” id=“姓氏” />
or
<输入类型=“文本” id=“姓氏” /> <label for =“姓氏”>姓氏</label>
or
<标识> <input type="text" name="lastname" /> 姓 < / >标签
请注意，当表格用于布局时，标签在一个单元格中，其关联的表单字段在另一个单元格中，则不能使用第三种技术。
任何一个都是有效的。我喜欢使用第一个或第二个示例，因为它提供了更多的样式控制。
有关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;
}
为了确保无线电的垂直对齐。
行为差异:点击标签和输入之间的空格
如果你点击标签和输入之间的空格，它只在标签包含输入时激活输入。
这是有意义的，因为在这种情况下，空格只是标签的另一个字符。
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
