使用无序列表创建表单？答案

【问题标题】：Using unordered lists to create forms?使用无序列表创建表单？
【发布时间】：2010-08-01 12:09:11
【问题描述】：

这是我之前的问题的延续，该问题与之前的一些 SO 问题有相似之处。虽然所有相关问题的答案都让我想到：

我们应该使用无序列表来创建表单吗？虽然我得到了混合的cmets。

一个特定的博客http://green-beast.com/blog/?p=259 说对表单使用无序列表是不正确的。我对开发人员的问题是对此声明发表评论？

【问题讨论】：

我希望 SO 不会变成 review someone's blog post 之类的网站。
@GERT 抱歉，如果我提出错误。我只是来学习的。我一直在寻找答案，我用谷歌搜索我得到了这个博客。但我看到一些关于 SO 的建议，人们提到使用 UL 的表格。我只是需要对此发表评论。我相信只有在 SO 中才能更好地理解什么是适合 WEB 的。

标签： html forms css html-lists

【解决方案1】：

HTML 为作者提供了几种指定信息列表的机制。所有列表必须包含一个或多个列表元素。列表可能包含：无序信息、有序信息信息和定义。（来自http://www.w3.org/TR/html4/struct/lists.html#edef-UL）

我认为列表是 HTML 中最重要的元素：从语义上讲，有很多对象是纯列表。使用ul 或dl 对form 中的输入字段和标签进行分组也是一个好习惯。

有人会使用段落标记表单：

<form action="" method="post">
    <fieldset>
        <p>
            <label>
                Full Name: 
                <input type="text" name="name" />
            </label>
        </p>
        <p>
            <label>
                Password: 
                <input type="password" name="password" />
            </label>
        </p>
    </fieldset>
    <fieldset>
        <p>
            <label>
                Occupation: 
                <input type="text" name="occupation" />
            </label>
        </p>
        <p>
            <label>
                Location: 
                <input type="text" name="location" />
            </label>
        </p>
    </fieldset>
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

并且有人会使用列表对其进行标记（我认为这看起来很自然）：

<form action="" method="post">
    <fieldset>
        <dl>
            <dt><label for="name">Full Name:</label></dt>
            <dd><input id="name" type="text" name="name" /></dd>
            <!-- <dd class="error">Some errors/validation warnings</dd> -->

            <dt><label for="password">Password:</label></dt>
            <dd><input id="password" type="password" name="password" /></dd>
            <!-- <dd class="note">Some notes about the field above</dd> -->
        </dl>
    </fieldset>
    <fieldset>
        <dl>
            <dt><label for="occupation">Occupation:</label></dt>
            <dd><input id="occupation" type="text" name="occupation" /></dd>

            <dt><label for="location">Location:</label></dt>
            <dd><input id="location" type="text" name="location" /></dd>
        </dl>
    </fieldset>
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

表单是列表（字段列表、分组数据），因为它们具有统一且重复的结构：

INPUT_1
INPUT_2
...
INPUT_N

【讨论】：

我倾向于使用有序列表，因为大多数表单都有跳位顺序。我知道您没有从列表中获得 Tab 键顺序，但在语义上它是有道理的。

【解决方案2】：

您可以将表单粘贴在段落、表格、列表、定义列表或一系列复杂的 span 和 div 中，但最终唯一重要的是您的表单是否正常工作以及人们是否可以使用它。

把时间花在tabindex and usability 上，而不是担心 W3C 工作组或某人的博客所定义的“编写 HTML 的语义正确方法”。

【讨论】：