是否有关于标签和输入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>
当前回答
这两种方法都是正确的,但是将输入放在标签内会大大降低使用CSS进行样式化时的灵活性。
首先,<标签>限制了它可以包含的元素。例如,如果<input>不在<label>内,则只能在<input>和标签文本之间放置<div>。
其次,虽然有一些变通方法可以使样式更容易,比如用span包装内部标签文本,但有些样式将继承自父元素,这可能会使样式更复杂。
第三方编辑
根据我的理解,标签的html 5.2规范规定,标签内容模型是短语内容。这意味着只有内容模型为短语content <label>的标签才允许在</label>内。
内容模型必须包含的内容的规范描述 作为元素的子元素和子元素。 大多数被归类为措辞内容的元素只能 包含本身被归类为措辞内容的元素, 没有任何流内容。
其他回答
参考WHATWG(编写表单的用户界面),将输入字段放在标签内并没有错。这样可以节省代码,因为不再需要标签中的for属性。
就个人而言,我喜欢把标签放在外面,就像你的第二个例子一样。这就是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" />
这样我就可以避免表格和表单中的所有垃圾。
我非常喜欢将元素包装在<label>中,因为我不需要生成id。
我是一名Javascript开发人员,使用React或Angular生成可以被我或其他人重用的组件。然后很容易在页面中复制一个id,导致奇怪的行为。
将输入嵌套到标签中有几个优点,特别是带有单选/复选框字段时,
.unchecked,支票{显示:没有;} 标签输入:not(:checked) ~ .unchecked{display:inline;} 标签输入:checked ~ .checked{display:inline;} <标识> <input type="checkbox" value="something" name="my_checkbox"/> . <span class="unchecked">Not Checked</span> <span class="checked">Is checked </span> . < / >标签
正如你从演示中看到的,在输入字段之前嵌套其他元素允许,
要单击以激活字段的文本 输入字段后面的元素将根据字段的状态动态设置样式。
此外,HTML std允许多个标签与一个输入字段相关联,但这会使屏幕阅读器感到困惑,解决这个问题的一种方法是将输入字段和其他元素嵌套在一个标签元素中。
As most people have said, both ways work indeed, but I think only the first one should. Being semantically strict, the label does not "contain" the input. In my opinion, containment (parent/child) relationship in the markup structure should reflect containment in the visual output. i.e., an element surrounding another one in the markup should be drawn around that one in the browser. According to this, the label should be the input's sibling, not it's parent. So option number two is arbitrary and confusing. Everyone that has read the Zen of Python will probably agree (Flat is better than nested, Sparse is better than dense, There should be one-- and preferably only one --obvious way to do it...).
因为W3C和主要浏览器供应商的决定(允许“任何你喜欢的方式来做”,而不是“做正确的方式”),今天的网络是如此混乱,我们开发人员不得不处理如此复杂和多样化的遗留代码。