一个简单又不简单的标准化表单设计实例。Update 05-15

首先给出结构，请注意，是结构固定在先，表现设计在后。

 1  < body >
 2       < div  id ="PopPage" >
 3           < h3 > 新增联系人 </ h3 >
 4           < div >
 5               < label > 姓名 </ label >
 6               < input  type ="text"   />
 7           </ div >
 8           < div >
 9               < label > 姓名 </ label >
10               < input  type ="text"   />
11           </ div >
12           < div >
13               < label > 姓名 </ label >
14               < input  type ="text"   />
15           </ div >
16           <!--  以次类推，我就不写了  -->
17           < div  class ="buttonarea" >
18               < input  type ="button"  value ="添加"   />
19               < input  type ="button"  value ="重填"   />
20           </ div >
21       </ div >
22  </ body >

下面是设计师提供的设计稿：

说明：有几个限制。
1、不能在body上定义背景图片。
2、结构不允许改变，也就是增加额外标签。
3、要求适应分辨率，因为此类页面不仅仅作为宽度固定的弹出页面，同时也要作为宽度不固定的内页。（表单内容会改变）
算了，不列了，要说限制可能还能写一些出来，但没意思了，干脆这样说：如何仅依赖css实现容度更高的整体布局。大家有兴趣可以试试看，三天后周日再给出我的Css和思路。当然不是标准答案，看看谁的容度最大。^_^

2006 5 11 Create

《重构之美－走在Web标准化设计的路上[复杂表单：Reload]》

本文转自爆牙齿博客园博客，原文链接：http://yuntian.cnblogs.com/archive/2006/05/11/397207.html，如需转载请自行联系原作者