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

Question

我看过几个开发人员如何使用表格、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>

Answer 1

注意不要混淆语义和结构。 HTML 元素的存在，主要是为了表达结构。语义学是关于赋予结构意义。虽然在 some HTML 标记中有 some 语义，但它是非常通用的含义。所以我的回答是沿着这些线打破的:

语义

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

如果您需要为表单元素注入(inject)语义含义，请使用适当的类和 ID 装饰您的结构标记 - 无论是哪种元素类型，您都不可能从表单中的 HTML 元素中获得任何语义含义你用来分组/分开你的输入。

结构

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

那是我的 2c。

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

更新:

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