html - 数据页的 Html 结构语义

Question

在设计表单/详细信息视图以获得最大的可读性（可访问性）和多功能性时，最好使用什么结构？

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

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

例如，如果我想稍后将布局更改为并排而不是自上而下的两个或三个字段，我只想通过 CSS 来实现，因为它在结构上不相关。

谢谢，
基龙

编辑：朋友的建议是使用 dl、dt 和 dds ......有人对此有任何想法吗？

Answer 1

我使用与 ASP.NET 脚手架生成的结构非常相似的结构，除了我使用 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>

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

当涉及到样式时，它也是一种通用结构，因为您可以将 fieldset 设置为 500px 宽，将 fieldset div 设置为 250px 宽并浮动，从而实现并排。或者您可以将 fieldset 的宽度与 fieldset div 的宽度相同。或者你可以让 fieldset 和 fieldset div 具有相同的宽度，然后在一些宽度为一半并浮动的 div 上粘贴一个类（比如“一半”）。可能性真的是无穷无尽的。

无论如何，这正是我日常使用的东西——尽管它用途广泛，但它可能并不适合所有要求。

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

Answer 2

我只是创建一个基本形式，然后让结构围绕它发展。

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

然后当你需要分组时

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

然后在 CSS 中进行所有演示。测试可访问性的最佳方法是关闭所有样式表并查看该站点是否有意义。

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