为什么W3C建议在<input>元素中使用<p>标签进行包装？

Question

我在网上看到很多表单的布局都是像这样的：

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

令人惊讶的是，这在规范中也有描述：

引导任何表单的是一个form元素，在其中放置控件。大多数控件由input元素表示，默认情况下提供了单行文本字段。要为控件设置标签，使用label元素；标签文本和控件本身都位于label元素内部。表单的每个部分都被认为是一个段落，并通常使用p元素与其他部分分隔开来。综合起来，以下是如何询问客户姓名的示例：

尽管该节不具规范性，但我仍然认为这是不好的做法，也不够语义化。我猜想目的是将输入放在自己的一行上，但这些元素的显示应该使用CSS控制，对吗？

W3C为什么建议以这种方式布局表单？我是否遗漏了什么？

- Radu

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

---

我喜欢你的第二个例子。那绝对读起来像是一个段落。 - Radu

我的主要困惑点在于，在W3C页面上给出的示例中，此处使用<p>仅用于呈现。HTML5引入了许多标签，如<address>和<time>，旨在为标记提供语义含义，但规范使输入和段落等效。 - Radu

@Radu，<aside>address在HTML5之前就存在了。</aside>你所创建的内容的意义取决于它被阅读的方式。一系列命令可以是无序列表，也可以是一系列段落，这完全取决于上下文。表单通常是一系列请求：Name__、Email__、Password__、Repeat Password__等。如果您希望它作为一个连续的段落来阅读，请使用一个元素。如果您希望它作为一个列表来阅读，请使用ul。如果您希望它作为一组语句来阅读，请使用多个p元素。如果您希望它作为一组名称-值对来阅读，请使用table。这取决于您。 - zzzzBov

什么是“疯狂填词脚本”？ - Peter Mortensen

https://en.wikipedia.org/wiki/Mad_Libs#Format - zzzzBov

Answer 2

输入元素是内联元素，因此最好将它们包裹在某种块级元素中，以便它们之间存在自然的分隔。由于 DIV 默认情况下没有边距，因此使用段落元素更加合适。

- Abel Mohler

---

fieldset标签是一个专门用于表单元素分组的块级元素。它非常实用。 - user1385191

默认情况下，一个 fieldset 元素是有边框的。当然它可以被样式化成任何想要的样子，但我发现一个段落实际上更符合页面的整体流程。不过没错，fieldset 也是一个选项。 - Abel Mohler

Fieldset有一些缺点，比如不能使用flexbox样式。 - Jamie Barker

Answer 3

没有任何主流的CSS、HTML和网格框架使用P标签。

请参见：Bootstrap或Foundation。

在我看来，应该使用fieldset和divs。

虽然W3C建议使用段落标签<p>，但遵循他们的建议意义不大。原因是：你会限制自己。也就是说：如果你使用p标签编写组件，则无法在其中放置

。 在<p>中放置<div>相当于添加了一个额外的<p>

嗯，你为什么想要在p标签内放置一个

呢？为什么不呢？例如，您想以某种方式设置样式或添加一些信息。现在使用p标签您将被限制。对我来说这似乎也是个坏建议。

答案：

担心内容排版后再考虑样式问题

这有点假设您知道自己未来一年需要什么。

我的建议：您不希望成为这样的人：

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

- Toskan

Answer 4

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

参考：17.3 FORM元素

form需要一个块级元素作为子元素。input是一个内联元素。使用p即可解决问题。

- Shi

---

“form” 允许包含块级元素，但并不限制其中包含内联元素的方式。 - zzzzBov

@Radu CSS 不会改变元素的类型，只会改变浏览器渲染它的方式。 - Shi

@Shi 这就是在 HTML 4 中的情况。当前的 HTML 标准规定 FORM 元素的内容模型为“流内容”，其中也包括内联元素。 - Šime Vidas

@Shi，抱歉，我移动了我的评论。 - Radu

<p>元素在HTML5规范中的示例包括相同类型的用法。 - George Cummins