p与ol或ul形式造型

Question

通常我使用无序列表标签来设置表单,例如

<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>

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

Answer 1

在我看来,一组表单控件既不是列表项也不是段落.当我标记表单时,我通过将它们包装在<div>s中来分隔我的标签/输入组.如果你试图在表单控件之间标记一个div,那么不要害怕使用<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不可用,您将看不到项目旁边的项目符号,并且控件组可能间隔得相当好.

Answer 2

不要忘记定义清单:

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

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

Answer 3

通常,表单字段既不是段落也不是列表项,从语义上讲.如果您需要将表单字段组合在一起,那么<div>带有类的s可能是最合适的,但如果您只是在<label>/ <input>pair 周围寻找容器,请考虑将标签与字段关联的备用方法:

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

然后,您可以在没有人工包装的情况下对它们进行打样或操作(并且不必再担心for=).

Answer 4

我倾向于使用有序列表

<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元素可用于解释性文本的形式内是很好的)