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

Question

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

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

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

任何表单都以表单元素开头，其中放置控件。大多数控件由 input 元素表示，默认情况下它提供一个单行文本字段。要标记一个控件，使用 label 元素；标签文本和控件本身位于标签元素内。表单的每一部分都被视为一个段落，通常使用 p 元素与其他部分分隔开。综上所述，以下是询问客户姓名的方式：

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

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

原文由 Radu 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 元素不是标记表单的唯一方法。如果正在添加/编辑数据矩阵，则使用表格在语义上是有效的。

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

原文由 zzzzBov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

请参阅此处： Bootstrap 或 Foundation 。

恕我直言，使用 fieldset 和 div。

虽然 W3C 建议使用段落标记 <p> ，但遵循他们的建议几乎没有意义。原因是：你在限制自己。也就是说：如果您使用 p 标记编写您的组件，您将无法将 div 放入其中。 将

放在

内就是添加一个额外的

那么，为什么要将 div 放在 p 标签中？好吧……为什么不呢？例如，您想以某种方式设置内容的样式，或添加一些信息。使用 p 标签你现在被卡住了。这对我来说似乎也是个坏建议。

答案：

一旦你整理好你的内容就担心样式

它假设您知道从现在起一年后您将需要什么。

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

“我希望我没有使用限制性的 P 标签”

原文由 Toskan 发布，翻译遵循 CC BY-SA 4.0 许可协议