学步园

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

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

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

1、使用 table 来布局

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

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

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

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

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

XHTML部分：

<form id="demoform" class="democss" action="">
<table summary="使用table来布局的演示" id="demo">
<caption>Registration example form</caption>
<tr>
<th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th>
<td><input type="text" id="fname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></th>
<td><input type="text" id="lname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></th>
<td>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></th>
<td>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></th>
<td><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></th>
<td>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></th>
<td><input type="password" value="" id="pw2"/></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/></td>
</tr>
</table>
</form>

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;
}
.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;
}

2、使用label来布局

特点：对于简单的 form 布局，此方法在语义表现上更为突出。

通常的解决方法为：

为 label 和 input 或其他的外围添加一个 div 或 p ，把该 div 或 p 触发 layout（可以利用 Holly Hack 设置height: 1%），并清除左浮动 clear:left; 。将 label 设为 float: left; 浮动在 input 或其他的右边。

让 label 对齐的是方法是：固定 label 的宽度，然后根据需要使用 text-align 向左或者向右对齐。

如果 label 右侧有多行 input 或其他，我们可以对 div 或 p 设置 padding-left：xpx ，然后对 label 设置 margin-left:-xpx ，

设定宽度的一个小窍门，使用单位 em 根据标记的最大字数来定宽度，不必辛苦测试 px 。

当然你也可以不用 div 或 p ，在每行结束使用 <br /> ，并且个br设定清除浮动 clear:left;

注意：使用次方法在IE下有个小 BUG ，那就是 div 或 p 里的第一行的 input 或其他有 3px 的 IE 的 BUG，我们可以使用只有IE才识别的* html 来定义属性来消除 3px 的 BUG 。

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

XHTML部分：

<form id="demoform" class="democss" action="">
<p>
<label for="fname" accesskey="F"><span class="required">*</span> First name:</label>
<input type="text" id="fname" value="" />
</p>
<p>
<label for="lname" accesskey="L"><span class="required">*</span> Last name:</label>
<input type="text" id="lname" value="" />
</p>
<p>
<label for="content" accesskey="C"><span class="required">*</span> Preferred content:</label>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</p>
<p>
<label for="sex" accesskey="G"><span class="required">*</span> Gender:</label>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</p>
<p>
<label for="yid" accesskey="Y"><span class="required">*</span> Yahoo! ID:</label>
<input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span>
</p>
<p>
<label for="pw" accesskey="P"><span class="required">*</span> Password:</label>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</p>
<p>
<label for="pw2" accesskey="R"><span class="required">*</span> Re-type password:</label>
<input type="password" value="" id="pw2"/>
</p>
<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>
</form>

CSS部分：

* {
margin:0;
padding:0;
}
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;
}
.democss {
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
}
.democss p {
width: 298px;
clear: left;
padding:4px;
padding-left: 122px;
text-align:left;
height: 1%;
}
.democss label {
float: left;
margin-left: -122px;
width: 110px;
padding:4px 4px 0;
text-align:right;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
div#submit {
width:298px;
text-align:left;
padding:4px;
padding-left:122px;
}
* html .democss input,* html .democss select{
margin-left: -3px;
}
* html div#submit input{
margin-left: 0px;
}

3、使用 dl、dt、dd 来布局

此属于发挥，练习的方法，当然图一的设计图还可以用其他更多的方法来布局，用 dl、dt、dd 来布局只为抛砖引玉。

• dl：代表HTML自定义列表
• dt：代表HTML自定义列表组
• dd：HTML自定义列表描述

虽然说 dl、dt、dd 在语义上并不能很好的表现上图，但 dl、dt、dd 的布局特点依旧可以用来进行上图的布局，而且效果还不错，呵呵……

dt主要放label部分，dd主要放input或其他。

注意：和 label 布局一样，有 IE 的 3px BUG 。

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

XHTML部分：

<form id="demoform" class="democss" action="">
<dl>
<dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt>
<dd><input type="text" id="fname" value="" /></dd>
<dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt>
<dd><input type="text" id="lname" value="" /></dd>
<dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt>
<dd><select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</dd>
<dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt>
<dd><select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</dd>
<dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt>
<dd><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd>
<dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt>
<dd><input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</dd>
<dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt>
<dd><input type="password" value="" id="pw2"/></dd>
</dl>
<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>
</form>

CSS部分：

* {
margin:0;
padding:0;
}
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;
}
.democss {
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
}
.democss dl {
width:420px;
}
.democss dt {
width: 110px;
float: left;
padding:4px;
padding-top:8px;
text-align:right;
}
.democss dd{
margin:0 0 0 118px;
padding:4px;
text-align:left;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
div#submit {
width:298px;
text-align:left;
padding:4px;
padding-left:122px;
}
* html .democss input,* html .democss select{
margin-left: -3px;
}
* html div#submit input{
margin-left: 0px;
}

对于 dl、dt、dd 的布局好像有个小 BUG ，有兴趣的朋友可以实验一下。给dd添加他的宽度属性，我们可以根据相关数据算出dd的宽度为 294px ，添加上这个宽度属性按理论上是没有问题的，在 Firefox 下实验也没有问题，但在 IE6 下，就惨不忍睹了！

扩展阅读：

• 《浅议 Web 表单设计》
• 《浅议 Web 表单设计（续）》
• 《再议 Web 表单设计 —— 是否该使用下拉框？》
• 《基于CSS的表单：现代的解决方案》
• 《轻松玩转花样表单》
• 《熟悉常用表单格式的五点技巧》
• 《用css制作表单并体验亲和力》