从语义上构建表单的最佳方法是什么？

我见过几个关于开发人员如何使用表格、div 和列表构建表单的示例；所有这些都不是很语义化。构建 HTML 文档的最佳方法是什么，以便它将每个标签和输入组分解到下一行并且可以轻松阅读 -不使用 CSS?

（我觉得 ol 和 ul 只是 tr 和 td 的替代品。在我看来，表单不是内容或定义列表）

我几乎觉得 div 是最好的格式，因为 div 是一个明确的“划分”或项目分组，但我不确定。

示例 HTML

<form>  
    <fieldset>  
        <legend>Your Favorites</legend>  
        <label for="color">Color</label>  
        <input id="color" name="color" type="text" />  
        <label for="food">Food</label>  
        <input id="food" name="food" type="text" />  
        <button type="submit">Submit</button>  
    </fieldset>  
</form>

小心不要混淆语义和结构。 HTML 元素的存在主要是为了表达结构。语义是赋予结构意义。虽然有一个some中的语义意义someHTML标记，是非常通用的意思。所以我的回答是这样的：

语义学

为什么通过形式表达语义对您来说很重要？标记是否应该由标准浏览器以外的客户端使用？这是一个特殊的用例吗？

如果您需要向表单元素注入语义，请通过使用适当的类和 id 装饰结构标记来实现 - 无论您使用哪种元素类型，您都不可能从表单中的 HTML 元素获得任何语义。对您的输入进行分组/分离。

结构

• 如果您只是想提供输入的视觉分离并希望使用尽可能少的标记，那么使用<br />输入后的标签。
• 如果您想在结构上将输入分组到其标签，然后使用<div>, <ul>, <ol>, or <dl>- 所有这些标签都可以与其他标签一样实现此目标。
• 如果在结构上暗示表单元素作为一个集合属于在一起很重要，那么不要使用<div>表示独特性或分离性的元素。列表元素表明不同的子项是一个集合，并且，就像 @bookcasey 在他的评论中所说，在大多数情况下，表单是一个输入列表它们在逻辑上属于一起。

这是我的2c。

对于它的价值，如果不能使用 CSS，我会使用<ul> (or <ol>如果顺序很重要）在这种情况下。当我有 CSS 时我会使用<dl>这给了我更多的风格控制。

UPDATE:

为了回应 Alohci 的论点，我改变了不使用的立场<div>元素。通过将它们包裹在form or fieldset它们已经在逻辑上分组在一起 - 这与适当的类的使用一起（即。<div class="field">正如 Alohci 在评论中所建议的那样）将提供结构和适当的语义。