18

通常，我使用无序列表标签为表单设置样式，例如

<fieldset>
    <ul>
        <li>
            <label for="txtName">Name</label>
            <input type="text" id="txtName" />
        </li>
    </ul>
</fieldset>

但是，我经常看到使用<p>标签的标记，如下所示：

<fieldset>
    <p>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
    </p>
</fieldset>

以下哪个在语义上更正确？<p>除了风格更简洁之外，不同的方法有什么优点或缺点吗？

编辑：显然在这里打开一罐蠕虫 - 更多选择，嘎！:) W3C 这里有推荐吗？

有趣的是，W3C 的建议似乎是最不优雅的解决方案：

<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>

遗憾的是，没有关于标记表单元素的最佳约定的更强有力的指导。

4

8 回答 8

20

在我看来，一组表单控件既不是列表项也不是段落。<div>当我标记表单时，我通过将它们包装在s中来分隔我的标签/输入组。如果您试图标记表单控件之间的分隔，那么不要害怕使用<div>.

<fieldset>
  <div class="field">
    <label for="txtName">Name</label>
    <input type="text" id="txtName" />
  </div>
  <div class="field">
    <label for="txtTitle">Title</label>
    <input type="text" id="txtTitle" />
  </div>
</fieldset>

从您给定的示例中，<p>可能会“更好”地降级，因为如果 CSS 不可用，您将看不到项目旁边的项目符号，并且控件组可能会很好地间隔开。

于 2009-05-13T22:32:48.830 回答
11

不要忘记定义列表：

<fieldset>
    <dl>
        <dt><label for="txtName">Name</label></dt>
        <dd><input type="text" id="txtName" /></dd>
    </dl>
</fieldset>

没有真正正确的答案。选择对您最有意义的标记。对我来说，表单不是无序列表。定义列表在我的脑海中更接近。

于 2009-05-13T22:30:54.933 回答
8

一般来说，从语义上讲，表单字段既不是段落也不是列表项。如果您需要将表单字段分组在一起，则带有类的 s 可能最合适，但如果您只是在/对<div>周围寻找容器，请考虑将标签与字段相关联的替代方法：<label><input>

<fieldset>
    <label>Name <input type="text" id="txtName"/></label>
    <label>Location <input type="text" id="txtLocation"/></label>
</fieldset>

然后，您可以在没有人工包装器的情况下一起设计或操作它们（并且不必再担心for=）。

于 2009-05-13T22:49:31.627 回答
6

我倾向于使用有序列表

<fieldset>
<ol>
    <li>
        <label for="txtNameFirst">Name</label>
        <input type="text" id="txtNameFirst" />
    </li>
    <li>
        <label for="txtNameLast">Name</label>
        <input type="text" id="txtNameLast" />
    </li>
</ol>
</fieldset>

我使用有序列表的语义推理是打印中的大量表单实际上是编号的，因此是表单输入的有序列表。

从语义上讲，我认为定义列表也是有效的，它确实具有为每个标签/输入配对以及每个单独的标签和输入提供包装器的额外好处，这可以为您提供很多设计控制（如果可以的话）忍受在每个标签/输入对周围包装 DL 的轻微粗暴）

<fieldset>
    <dl>
        <dt><label for="txtNameFirst">Name</label></dt>
        <dd><input type="text" id="txtNameFirst" /></dd>
    </dl>
    <dl>
        <dt><label for="txtNameLast">Name</label></dt>
        <dd><input type="text" id="txtNameLast" /></dd>
    </dl>
</fieldset>

如果有序/无序/定义列表不适合您，那么我会选择 div。它们唯一隐含的语义是“一个部门”，所以它们很适合这项工作。

我很难证明使用段落 (p) 元素来包装标签/输入对是合理的，因为 p 元素的隐含语义在我看来并不适用。（此外，如果需要，最好将 p 元素保留在表单中以用于解释性文本）

于 2009-05-14T01:56:34.097 回答
4

W3C 为表单布局的关键是表单的设置方式可以很容易地以编程方式对标签和表单元素进行分组：

1.3.1 信息和关系：通过演示传达的信息、结构和关系可以通过程序确定或以文本形式提供。

特别是HTML 技术 44：使用标签元素和HTML 技术 71：提供描述。

将每个标签和输入包装在列表项中的好处是，使用屏幕阅读器的用户可能会在开始时得到一些指示，表明列表中有 x 项，这可能很有用。

一般来说，尽管我们的设计师与Zack合作——我们的表单行被包裹在一个 div 中，并带有“formrow”类或类似的类。

于 2009-05-13T23:04:15.660 回答
0

我倾向于使用一个<div>per<label>和<input>combo，直到我找到一份标准是无序列表的新工作。我有一位同事对表格发誓（一列用于标签，一列用于字段）声称它只是具有编辑功能的表格数据。

在这一点上，我认为输入作为无序列表是最好的语义匹配，但正如您所注意到的，关于这个主题有很多意见。

于 2009-05-14T02:02:40.493 回答
0

WHATWG 实际上将表格的每个部分视为一个段落：

表单的每个部分都被视为一个段落，并且通常使用 p 元素与其他部分分开。

我不确定我是否同意这一点，但这似乎是你能得到的问题的最“官方”答案。遗憾的是我找不到任何解释。

于 2018-06-19T11:53:42.457 回答
0

如果您的表单内容始终包含

<form id='theform'>
  <label for='item-1'>Name</label>
  <input id='item-1 type='text' name='name'>
  <label for='item-2'>Email</label>
  <input id='item-2 type='email' name='email'>
</form>

可以用一个单一的样式来设置它

#theform  {
    display: grid;
    grid-template-columns: 100px 200px;
}

产生一个 100px 宽的标签列和一个 200px 宽的输入字段列。但它需要标签/输入或标签/选择的节奏，中间没有任何内容。

于 2021-02-13T15:00:44.970 回答