表单结构

相对于宏观结构，表单结构是最考验人的，设计的随意性会比较大一些。很多时候，在设计页面表单结构时，可以用各种方法设计，只要不破坏页面结构以及内容的语义性基础，都无可厚非。

在实际开发中，不少设计师习惯于通过页面效果来决定所要设计的微观结构，这种习惯是要不得的，也不建议读者采用。当然，可以在适当时顾及页面表现，但是不能够本末倒置。下面围绕表单结构中的几个细节设计进行说明。

第一，所有表单都作为列表结构的一个选项进行设计，所有表单都嵌套在表单区域结构中，这样既方便管理，也适应HTML语义化结构要求。

<form id="addform" name="addform" method="post" action="#" onsubmit="return false;">
    <fieldset id="addbox">
        <legend></legend>
        <label for="price">金额
            <input type="text" name="price" id="price" />
        </label>
        <label for="class">分类
            <select name="class" id="class">
            </select>
        </label>
        <label for="remark"><span>备注</span>
            <textarea name="remark" id="remark" ></textarea>
        </label>
        <span id="detail"></span>
        <input type="reset" name="reset" id="reset"  value="重写" />
        <input type="submit" name="save" id="save" value="保存记录" />
    </fieldset>
</form>

第二，对于表单域与标签文字的关系，可以通过labe标签进行设计，然后通过for属性把标签文本与对应的表单域绑定在一起，这样单击标签文本也能够自动获取输入焦点。

<label for="price">金额
    <input type="text" name="price" id="price" />
</label>

第三，对于固定查询表单中，由于多个查询并列存在，不适合在表单中嵌套form标签，否则就会带来很多麻烦。同时，可以考虑使用dl、dt和dd列表结构进行布局。

<dl>
    <dt>按时间段查询：</dt>
    <dd>
        <label for="table2">数据表
            <select name="table2" id="table2">
            </select>
        </label>
        <label for="begin">起始时间
            <input type="text" name="begin" id="begin" value="2011-1-1 0:0:0" />
        </label>
        <label for="end">结束时间
            <input type="text" name="end" id="end" value="2011-12-31 0:0:0" />
        </label>
        <input type="submit" name="save2" id="save2" value="查询" />
    </dd>
</dl>

这种结构更适宜扩展和管理，同时也符合语义化结构要求。