html – 语义结构化表单的最佳方法是什么?

发布时间:2020-08-01 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 语义结构化表单的最佳方法是什么?脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经看过几个开发人员如何使用表格,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元素,主要用于表达结构.语义学就是赋予结构意义.虽然在某些HTML标记中存在一些语义含义,但它具有非常通用的含义.所以我的答案是按照以下方式打破的:

语义

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

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

结构体

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

那是我的2c.

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

更新:

在回答Alohci的论点时,我正在改变我对不使用< div>的立场.元素.通过将它们包装在表单或字段集中,它们在逻辑上已经组合在一起 – 这与使用适当的类(即< div class =“field”>如Alohci在评论中所建议的)一起将提供结构和适当的语义含义.

总结

以上是脚本之家为你收集整理的html – 语义结构化表单的最佳方法是什么?全部内容,希望文章能够帮你解决html – 语义结构化表单的最佳方法是什么?所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!