数据页面的Html结构语义

Question

在设计表单/详细信息视图时,最佳结构是什么才能获得最大可读性(可访问性)和多功能性？

作为一个例子,ASP.NET MVC框架的脚手架创建了一个字段集,顶部有一个图例,p是所有字段(标签,然后是输入/编辑器集).

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

例如,如果我想稍后更改布局以并排放置两个或三个字段而不是自上而下,我只想通过CSS执行此操作,因为它在结构上并不相关.

谢谢,
Kieron

编辑:朋友推荐使用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是宽度的一半并浮动.可能性真是无穷无尽.

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

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