数据页的Html结构语义

在设计表单/详细信息视图以实现最大可读性（可访问性）和多功能性时，最佳的结构是什么

例如，ASP.NET MVC框架的脚手架创建了一个字段集，顶部有一个图例，所有字段都在p中（一个标签，然后是输入/编辑器集）

你认为最通用的结构是什么

例如，如果我想在以后更改布局，使其具有两个或三个并排的字段，而不是自顶向下的字段，那么我只想通过CSS实现这一点，因为它与结构无关

谢谢，
基隆

---

编辑：朋友们建议使用dl、dt和dds……有人对此有什么想法吗？

我只需要创建一个基本表单，让结构围绕它成长

<form>
  <input>
  <input>
  <input>
</form>

然后当你需要分组时

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

然后用CSS做所有的演示。测试可访问性的最佳方法是关闭所有样式表，看看站点是否有意义

---

表单是块级元素，因此它们在语义上包含其他元素是正确的。

我使用的结构与ASP.NET scaffolding生成的结构非常相似，只是我使用div而不是ps：

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

传奇外场集
文本输入
选择框
1.
2.

我使用div是因为对我来说，它比p元素在语义上更正确，因为它们用于文本的段落

在设计其样式时，它也是一种多功能结构，因为例如，您可以使fieldset 500px宽，fieldset div 250px宽并浮动，从而实现并排。或者，您可以将字段集的宽度与字段集div的宽度相同。或者，您可以将字段集和字段集div的宽度相同，然后将一个类粘贴在某些div上（例如“一半”），这些div的宽度为一半并浮动。可能性真的是无穷无尽的

在任何情况下，这正是我日常使用的东西-虽然它的通用性，它可能不适合所有的要求

---

编辑就定义列表而言，它们是专门的元素，在语义上不应用于布局表单。

我认为您缺少输入元素上的

id

，标签关联所需。请原谅，这是一个快速键入的示例标签是这里的关键-单击标签（如果标记为for）将重点放在输入上-很好的大点击目标。我同意，但如果将div元素替换为p元素将更具语义。div是文档的一部分，或者更确切地说是包含部分，而p（段落的缩写）元素是表达思想的内容块。选项元素也需要value属性，即使它们包含文本内容。不使用值属性时，节点的访问和软件解释存在差异。我还建议使用字段集将志同道合的段落分组，使它们更有意义。@austin-我不同意。段落只能用于文本内容。比如在博客或文章中。我看不出有人如何从语义上解释“段落”适合于表单元素。这就好比说blocquote适合于将页面划分为多个部分，或者说表适合于布局。。。