 |
(http://www.butong.net/wangyezhizuo/070205/index.htm) |
简单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部分:
|
<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;
}
|
具体演示:
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
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;
}
|
具体演示:
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
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;
}
|
具体演示:
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
对于dl,dt,dd的布局好像有个小BUG，有兴趣的朋友可以实验一下。给dd添加他的宽度属性，我们可以根据相关数据算出dd的宽度为294px，添加上这个宽度属性按理论上是没有问题的，在FF下实验也没有问题，但在IE6下，就惨不忍睹了！