是否有关于标签和输入HTML元素嵌套的最佳实践?

经典的方式:

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

or

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

当前回答

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

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

明确:

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

隐式:

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

其他回答

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

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

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

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

使用下面的结构:

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

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

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

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

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

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

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

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

第三方编辑

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

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

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

label input {
    vertical-align: bottom;
}

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