使用无序列表创建表单？

Question

这是我之前的问题的延续，因为与一些先前的SO问题相似而被关闭。虽然所有相关问题的答案都让我想到了这个问题：

我们应该使用无序列表来创建表单吗？虽然我得到了不同的评论。

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

- sushil bharwani

---

我希望 Stack Overflow 不会变成一个“评论某人博客文章”的网站。 - Gert Grenander

@GERT，如果我表达不当，请原谅。我只是来这里学习的。我在寻找答案时通过谷歌搜索得到了这篇博客文章。但是我在SO上看到了几个建议，其中人们提到使用UL来制作表单。我只需要对此发表一下评论。我相信，关于什么是正确的WEB做法的更好理解只能在SO上得到回答。 - sushil bharwani

Answer 1

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

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

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

<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

- Daniel O'Hara

---

我倾向于使用有序列表，因为大多数表单都有一个选项卡顺序。我知道您无法从列表中获取选项卡顺序，但从语义上讲，这是有意义的。 - Mitch Rosenburg

Answer 2

你可以将表单放在段落、表格、列表、定义列表或一系列复杂的spans和divs中，但最终只有两件事情是重要的：你的表单是否正常工作以及人们是否能够使用它。

花时间关注tabindex和可用性，而不是担心由W3C工作组或某个博客定义的“语义上正确的编写HTML的方式”。

- cbednarski