html - 为什么 W3C 建议将输入元素包装在 标签中？

Question

我在网上看到过很多这样布局表单的例子:

<form>
    <p><input></p>
</form>

令我惊讶的是，the specification 中也对此进行了描述:

Any form starts with a form element, inside which are placed thecontrols. Most controls are represented by the input element, which bydefault provides a one-line text field. To label a control, the labelelement is used; the label text and the control itself go inside thelabel element. Each part of a form is considered a paragraph, and istypically separated from other parts using p elements. Putting thistogether, here is how one might ask for the customer's name:

虽然这部分是非规范的，但在我看来，这是不好的做法，而不是语义。我想目的是将输入放在他们自己的行上，但不应该使用 CSS 控制这些元素的显示吗？

W3C 建议以这种方式布置表单是否有原因？我错过了什么吗？

Answer 1

如果您以有意义的(阅读:语义)方式编写表单，您将希望文本流导向元素:

<form>
 <p><label for="firstName">Please enter your first name:</label><input id="firstName" type="text" /></p>
</form>

一个更好的方法是像处理 mad-libs 脚本一样处理您的表单:

<form>
  <p>Hello. My <label for="firstName">name</label> is <input id="firstName" type="text" />...</p>
</form>

p 元素并不是标记表单的唯一方式。如果要添加/编辑数据矩阵，使用表格在语义上是有效的。

在其他情况下，您可能不想使用包装元素。这取决于您要提供的内容。整理好内容后，再担心如何设置样式。