3

假设我有这个代码

<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 />在最后
4

7 回答 7

9

看看这个相关的问题和这个。

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

于 2009-06-08T10:14:33.953 回答
5

我认为最语义化的方法是使用列表元素，如Prettier Accessible Forms中所述，因为大多数表单实际上很像要填写的字段列表，我认为它在语义上最有意义。

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

于 2009-06-08T10:21:01.867 回答
1

从语义上讲，我会（在这种情况下）同意你的老师的观点，并且更喜欢 <div> 而不是 <p>。

于 2009-06-08T10:12:25.720 回答
1

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

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


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

于 2009-06-08T10:16:57.317 回答
1

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

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

于 2009-06-08T10:18:59.123 回答
0

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

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

于 2009-06-08T10:14:12.300 回答
0

也不是，海事组织。

Fieldset 与列表（甚至可能是表）相结合在语义上要正确得多。

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