在语义上构建表单的最佳方法是什么？ [英] What's the best method to semantically structure a form?

问题描述

我见过几个例子，说明开发者如何使用表格，div和列表来组织他们的表格;所有这些都不是很有意义。构建HTML文档的最佳方法是什么，以便打破每个标签和文档。输入组到下一行，并且可以轻松阅读 - 不使用CSS ？

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

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

示例HTML

 < form> 
< fieldset> 
<图例>您的收藏夹< /图例> 
< label for =color> Color< / label> 
< input id =colorname =colortype =text/> 
< label for =food> Food< / label> 
< input id =foodname =foodtype =text/> 
< button type =submit>提交< / button> 
< / fieldset> 
< / form> 
  

解决方案

小心不要让语义和结构混淆。存在HTML元素，主要用于表达结构。语义学是关于赋予结构的含义。虽然在某些HTML标记中存在 的一些语义，但它是非常通用的含义。所以，我的答案被破坏了：

语义学

重要的是你通过你的表单表达语义意义？标记是否应该被标准浏览器以外的客户使用？它是一种特殊的用例吗？如果你需要通过适当的类和id来装饰你的结构标记，那么你需要为表单的元素注入语义无论使用哪种元素类型来分组/分隔输入，都不可能从表单中的HTML元素获得任何语义。

结构

• 希望提供输入的可视化分离，并希望使用尽可能少的标记，然后在输入后使用< br /> 标签。


• 如果您想在结构上将您的输入分组到标签，请使用< div> ，< ul> ，< ol> 或< dl> - 所有这些标签都可以同样达到这个目标，其他。
如果从结构上暗示表单元素属于一个集合，那么不要使用< div> 表示不同或单独的元素。列表元素表明不同的子项是一个集合，并且像@bookcasey在他的评论中所说的那样，在大多数情况下，一个表单在逻辑上属于一个 列表。

这是我的2c。

对于它的价值，不能使用CSS，我会使用< ul> （或< ol> 如果订单很重要）。当我有CSS时，我使用< dl> ，这给了我更多的风格控制。

$ b

UPDATE：

为了回应Alohci的观点，我颠倒了我对不使用< div> 元素。通过将它们包装在窗体或 fieldset 中，它们已经在逻辑上组合在一起了 - 这与使用适当的类一样< div class =field> 如Alohci在评论中所建议的）将提供结构和适当的语义含义。

I've seen several examples of how developers structure their forms using tables, divs, and lists; all of which are not very semantic. What is the best method for structuring an HTML document so it breaks each label & input group to the next line and can be easily read - without the use of CSS?

(I feel that ol's and ul's are simply a replacement for tr's and td's. A form, in my opinion, is not a content or definition list)

I almost feel like div's are the best format since a div is a clear 'division' or grouping of items but I'm not sure.

Sample 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>

解决方案

Be careful not to get semantics and structure confused. HTML elements exist, primarily for expressing structure. Semantics is about giving the structure meaning. While there is a some semantic meaning in some HTML markup, it is very generic meaning. So my answer is broken along those lines:

Semantics

Why is it important for you to express semantic meaning through your form? Is the markup supposed to be consumed by a client other than a standard browser? Is it a special use-case?

If you need to infuse semantic meaning to the elements of your form do so by decorating your structural markup with appropriate classes and ids - you won't likely get any semantic meaning from the HTML elements in your form regardless of which element type you use to group/separate your inputs.

Structure

• If you're just looking to provide visual separation of inputs and want to use the least possible markup then use <br /> tags after your inputs.
• If you want to structurally group your inputs to their labels then use <div>, <ul>, <ol>, or <dl> - all of these tags can achieve this objective equally as well as the others.
• If it is important to imply, structurally, that the form elements belong together as a set then don't use <div> elements which indicate distinctness or separateness. List elements indicate that the different child items are a set, and, like @bookcasey says in his comment, a form is, in most cases, a list of inputs which belong together logically.

That's my 2c.

For what it's worth, without being able to use CSS, I'd use <ul> (or <ol> if the order is important) in this situation. When I have CSS I use <dl> which gives me more style control.

UPDATE:

In response to Alohci's arguments, I'm reversing my position about not using <div> elements. By wrapping them in a form or fieldset they are grouped together logically already - this alongside the use of appropriate classes (i.e. <div class="field"> as suggested by Alohci in the comments) will provide structure and appropriate semantic meaning.

这篇关于在语义上构建表单的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！