语义结构化表单的最佳方法是什么？

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元素,主要用于表达结构.语义学就是赋予结构意义.虽然在某些 HTML标记中存在一些语义含义,但它具有非常通用的含义.所以我的答案是按照以下方式打破的:

语义

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

如果您需要通过使用适当的类和ID来装饰结构标记,那么您需要为表单的元素注入语义 - 无论您使用哪种元素类型,您都不会从表单中的HTML元素中获得任何语义含义.分组/分开您的输入.

结构体

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

那是我的2c.

对于它的价值而言,如果不能使用CSS,我会在这种情况下使用<ul>(或者<ol>如果订单很重要).当我使用CSS时,我会使用<dl>更多样式控件.

更新:

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