为什么 W3C 建议将输入元素包装在 <p> 标签中？

Question

我在网上看到了很多示例，其中表单的布局如下：

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

令我惊讶的是，这也在规范中进行了描述：

任何表单都以表单元素开始，其中放置控制。大多数控件由输入元素表示，该元素由默认提供单行文本字段。要为控件添加标签，请使用标签使用元素；标签文本和控件本身位于标签元素。表格的每个部分都被视为一个段落，并且是通常使用 p 元素与其他部分分开。把这个总的来说，以下是询问客户姓名的方式：

虽然本节是非规范的，但在我看来，这是不好的做法，而且不符合语义。我想目的是将输入放在自己的行上，但是这些元素的显示不应该使用 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>

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

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

Answer 2

INPUT 元素是内联的，因此将它们包装在某种块元素中是有意义的，以便它们之间有自然的分离。由于 DIV 默认情况下没有边距，因此使用段落是有意义的。

Answer 3

领先的 CSS、HTML 和网格框架都没有使用

标签。

请参阅此处：Bootstrap 或 Foundation。

恕我直言，使用 fieldset 和 div。

虽然 W3C 建议使用段落标签

<p>

，但遵循他们的建议几乎没有任何意义。原因是：你限制了自己。也就是说：如果您使用

标签编写组件，您将无法在其中放置 div。将

放入
中就是添加一个额外的

那么，为什么要将 div 放入

标签内？好吧...为什么不呢？例如，您想以某种方式设置内容的样式，或添加一些信息。使用

标签，你现在陷入困境。对我来说这似乎也是个坏建议。

答案：

整理好内容后，再担心样式问题

它有点假设你知道一年后你会需要什么。

我的建议：你不想成为这样的人：

“我希望我没有使用限制性

标签”

这适用于 HTML 4，但可能不适用于所请求的 HTML 5。

form

需要一个块级元素作为子元素。

input

是一个内联元素。

就可以了。

Answer 4

这适用于 HTML 4，但可能不适用于所请求的 HTML 5。

form

需要一个块级元素作为子元素。

input

是一个内联元素。

就可以了。