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元素在语义上更正确，因为它们用于文本段落。

在造型方面，它也是一种多功能结构，因为你可以将场地设置为500px宽，并且字段集div为250px宽并且浮动，从而实现并排。或者，您可以将fieldset的宽度设置为fieldset div。或者你可以让fieldset和fieldset div具有相同的宽度，然后将一个类粘贴在一些div（比如“half”）上，这些div是宽度的一半并浮动。可能性真是无穷无尽。

在任何情况下，这都是我日常使用的东西 - 虽然它的功能多样，但它可能不符合所有要求。

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

Answer 2

我只是创建一个基本表单，让结构围绕它生长。

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

然后当你需要分组时

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

然后在CSS中进行所有演示。测试辅助功能的最佳方法是关闭所有样式表，看看网站是否有意义。

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

数据页面的Html结构语义

2 个答案: