是否有关于标签和输入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可能只包含一个控制元素。
其他回答
行为差异:点击标签和输入之间的空格
如果你点击标签和输入之间的空格,它只在标签包含输入时激活输入。
这是有意义的,因为在这种情况下,空格只是标签的另一个字符。
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
参考WHATWG(编写表单的用户界面),将输入字段放在标签内并没有错。这样可以节省代码,因为不再需要标签中的for属性。
这两种方法都是正确的,但是将输入放在标签内会大大降低使用CSS进行样式化时的灵活性。
首先,<标签>限制了它可以包含的元素。例如,如果<input>不在<label>内,则只能在<input>和标签文本之间放置<div>。
其次,虽然有一些变通方法可以使样式更容易,比如用span包装内部标签文本,但有些样式将继承自父元素,这可能会使样式更复杂。
第三方编辑
根据我的理解,标签的html 5.2规范规定,标签内容模型是短语内容。这意味着只有内容模型为短语content <label>的标签才允许在</label>内。
内容模型必须包含的内容的规范描述 作为元素的子元素和子元素。 大多数被归类为措辞内容的元素只能 包含本身被归类为措辞内容的元素, 没有任何流内容。
来自W3的HTML4规范:
标签本身可以放置在标签的前面、后面或周围 相关的控制。
<label for =“姓氏”>姓氏</label> <输入类型=“文本” id=“姓氏” />
or
<输入类型=“文本” id=“姓氏” /> <label for =“姓氏”>姓氏</label>
or
<标识> <input type="text" name="lastname" /> 姓 < / >标签
请注意,当表格用于布局时,标签在一个单元格中,其关联的表单字段在另一个单元格中,则不能使用第三种技术。
任何一个都是有效的。我喜欢使用第一个或第二个示例,因为它提供了更多的样式控制。
就个人而言,我喜欢把标签放在外面,就像你的第二个例子一样。这就是FOR属性存在的原因。原因是我经常会在标签上应用样式,比如宽度,以使表单看起来更好(下面是简写):
<style>
label {
width: 120px;
margin-right: 10px;
}
</style>
<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />
这样我就可以避免表格和表单中的所有垃圾。