可以将表单元素分组为“p”吗？答案

【问题标题】：Is it OK to group form elements into "p"?可以将表单元素分组为“p”吗？
【发布时间】：2010-11-01 03:22:21
【问题描述】：

假设我有这个代码

<form action="#" method="get">
    <p>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </p>
    <p>
        <input type="submit" />
    </p>
</form>

用 p 对元素进行分组在语义上是否合适？因为我的老师（再次..我知道..:P）告诉我 p 应该只用于段落，我应该使用 div 代替，但我可以看，p 被广泛使用，几乎无处不在。

我能想到的最后一种可能是<br />，我认为这是最糟糕的方式。

那么哪个最好用

由<div>包装
由<p>包装
<br />在最后

【问题讨论】：

标签： html xhtml semantics

【解决方案1】：

Check out this related question 和 this one。

老实说，我认为这没什么大不了的，但使用<fieldset> 可能是最符合语义的正确方式，可以让你的老师开心。不过，在现实世界中，我有时会按<p> 对表单进行分组。

【讨论】：

我同意这个答案。您可以将
视为与
相同。另外，还有一些额外的功能，例如使用作为子元素。所有这一切，以及这就是

的事实。

【解决方案2】：

我认为最符合语义的方式是使用列表元素，就像在Prettier Accessible Forms 中描述的那样，因为大多数表单实际上很像要填写的字段列表，我认为它在语义上最有意义。

如果你想拥有一组字段，fieldset 很适合，但我几乎总是将每个表单项放在 <li> 中。

【讨论】：

fieldset 可能更好，但 li 是一个非常可能的候选人
dl 用 dt 表示标签，用 dd 表示字段（“待填充的定义”）也可能适合。
我喜欢在字段集中使用 li .. 在一个公共字段集中对众多相关字段进行排序

【解决方案3】：

在语义上，我会（在这种情况下）同意你的老师的观点，并且更喜欢

而不是

。

【讨论】：

【解决方案4】：

<div class="field">...</div> 用于单个表单字段，<fieldset>...</fieldset> 用于相关字段组。

对于表单末尾的按钮（提交/重置/返回/等），我使用<fieldset class="controls">...</fieldset>

（我还有一组 CFML 自定义标签脚本，它们可以为我生成 HTML，所以我可以编写，例如，<form:edit id="MyField" label="My Field" ...etc... />，它会生成适当的 HTML，而不需要大量重复的源代码。）

【讨论】：

【解决方案5】：

你的老师是对的。 P = 段落。所以问问自己这个问题，它是一段文字吗？如果没有，请不要使用它。

你不会因为板球是圆的而用它踢足球

【讨论】：

作为一个美国人读最后一句话时非常困惑。 “足球不是圆的！” ...然后它来找我:-)
哈哈，我想我应该选择翻译更普遍的东西

【解决方案6】：

我会使用 <div/> 包装它，然后使用 CSS 适当地设置样式。

在我看来，页面结构与该页面的布局/样式之间的分离更加清晰。例如您可以稍后为不同的设备设置样式，打印 ec。

【讨论】：

【解决方案7】：

也不是，IMO。

与列表（甚至可能是表格）结合的字段集在语义上要正确得多。

P 显然是错误的，因为表单不是段落。
DIV 没有任何语义意义 - 它只是“某物的一部分”，因此单独使用它来包含表单是没有意义的。
按 BR 拆分没有任何意义，因为您也可以在标签和/或输入字段上提供样式以模拟换行符。

【讨论】：