是否有关于标签和输入HTML元素嵌套的最佳实践?
经典的方式:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
是否有关于标签和输入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;
}
为了确保无线电的垂直对齐。