简单form标准化实例——整体布局

       form无论是在网站的制作中，还是在网站的重构中，我们都会频繁地“碰面”，当“碰面”的次数多了，反而觉得他更让人迷茫，有种熟悉的“陌生”，越来越把握不了他。

      下面我们将带大家走进form的世界，一起来熟悉、探讨、掌握他的“脾性”。

       对于简单form的设计图（如图一，yahoo注册页面的一部分），我们如何来做整体的布局呢？大体我们可以选用以下3种方式来做布局：

1、使用table来布局

      这是大家最常用的方法，虽然现在到处都在谈标准化，甚至更多的在说div+css，但怿飞还是推荐大家使用table来布局form。对于标准，个人的另类理解“更符合逻辑，更效率快捷”。

      为什么推荐大家使用呢？table本就是用来显示二维数据，用table来布局form可以说是他的“老本行”。另外重要的一点是，对于复杂的form，table能更有效的进行布局和维护修改，体现了效率和易用。

     在布局之前，先温习一下table的部分标签：

• table：显示二维数据
• summary：定义表格的用途
• caption：定义表格的标题，在表格开始的地方使用，仅一次
• tr：表格中的一行
• th：表头单元格，定义一行或者一列的表头信息
• td：数据单元格

      下面我们具体来对图一的设计图进行整体布局：

XHTML部分:

css部分:

* {
  margin:0;
  padding:0;
}

table {
   border-collapse:collapse;
}

input,select {
   font-family:Arial, Helvetica, sans-serif;
   font-size: 12px;
}

.required {
  font:0.8em Verdana !important;
  color:#f68622;
}

.explain {
  color:#808080;
}

.b {
  font-weight:bold;
  font-size:12px;
}

[NextPage]

democss table{
  font:11px/12px Arial, Helvetica, sans-serif;
  color:#333;
  width:420px;
}

.democss caption {
  display:none;
}

.democss th {
  font-weight:normal;
  text-align:right;
  vertical-align:top;
  padding:4px;
  padding-top:8px;
  width:110px
}

.democss td {
  text-align:left;
  padding:4px;
  width:294px;
}

.democss input {
  width:180px;
}

.democss select#content {
  width:185px;
}

.democss input.submit {
  width:70px;