我应该将输入元素放在标签元素中吗？

My Text


My Text2

之间放置.

其次,虽然有一些变通方法可以使样式化更容易,比如用span填充内部标签文本,但某些样式将继承父元素,这样可以使样式更复杂.

8> Aaron..：

---

一个值得注意的'gotcha'规定你不应该在带有明确的"for"属性的元素中包含多个输入元素,例如:

  
   Associate the following text with the selected radio button: 
  

虽然这对于自定义文本值是单选按钮或复选框的辅助表单功能可能很有吸引力,但标签元素的单击焦点功能会立即将焦点放在其"for"属性中明确定义了id的元素上. ,使用户几乎不可能点击包含的文本字段来输入值.

就个人而言,我试图避免使用输入子元素的标签元素.对于标签元素而言,在语义上不适合包含比标签本身更多的内容.如果您在标签中嵌套输入以实现某种美感,则应该使用CSS代替.

---

这不是"陷阱".它明确是规范的一部分; 标签中最多可包含1个控件.你也在混合隐式和显式样式 - 如果你把控件放在标签里,你不需要`for` ...如果你想使用`for`,那么在控件里面放置控件没有多大意义.

9> Victor Iones..：

---

我通常会选择前两个选项。我看到了使用第三个选项时的情况，当嵌入标签和CSS的单选选项包含类似

label input {
    vertical-align: bottom;
}

为了确保收音机的正确垂直对齐。

10> slashCoder..：

---

正如大多数人所说，这两种方法确实有效，但我认为只有第一种方法应该可行。从语义上讲严格，标签不“包含”输入。我认为，标记结构中的包含（父/子）关系应反映视觉输出中的包含。也就是说，标记中围绕另一个元素的元素应在浏览器中围绕该元素绘制。因此，标签应该是输入的同级，而不是父级。因此，第二个选项是任意的并且令人困惑。阅读过Python Zen的每个人可能都会同意（扁平比嵌套更好，稀疏比密集更好，应该有一种-最好只有一种-显而易见的方式...）。

由于W3C和主要浏览器供应商的决定（允许“以您喜欢的方式”，而不是“以正确的方式”进行），今天的网络是如此混乱，我们开发人员必须处理纠结以及各种各样的旧代码。