网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

作者： 北京网站建设   日期：2008-03-27 06:03:35  来源： http://www.qitongnet.com

资深北京网站建设公司企通互联,专业致力于北京网站建设,北京网站制作,北京网站设计,北京网页设计领域,千余网站建设案例，公司拥有国内一流的网站建设、网站制作、网页设计团队，如果您已经有网站的,看看我们精美的网站建设案例也无妨.北京网站建设网址：http://www.qitongnet.com =======================================================================================

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>www.qitongnet.com
</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>www.qitongnet.com
<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>www.qitongnet.com
<option value="de">Yahoo! Germany</option>网站建设
<option value="hk">Yahoo! Hong Kong</option>网页设计
<option value="in">Yahoo! India</option> www.qitongnet.com北京网站制作
<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>www.qitongnet.com
<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>www.qitongnet.com
</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>www.qitongnet.com
<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;网站制作
}

具体演示:

运行代码框北京网站设计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用table来布局的演示</title> <style type="text/css" media="all"> * { 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; } </style> </head> <body> <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"></p><p align='center'><b><font color='red'>[1]</font> <a>[2]</a> <a>[3]</a> <a>[4]</a> <a>下一页</a> </b></p> <span id=ad_02><img src="http://www.wangyeba.com/Images/proimg.gif"></span><span class="8f1b2e3d">北京网站建设</span> </div> <div align=right> 字体：【<a href="javascript:chagefs('18px')">大</a>】【<a href="javascript:chagefs('15px')">中</a>】【<a href="javascript:chagefs('12px')">小</a>】 </div> <p>上一篇：<a href="item_2136.html">网页设计倾斜的鼠标翻转导航制作上的烦恼</a><br /><br />下一篇：<a href="item_2138.html">www.qitongnet.com简单form标准化实例——语义结构</a></p> <div style="clear: both;"> <p><a href="http://www.qitongnet.com/">这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75</a>!</p> </div> </div> <!--content ends --> </div> </div> </div> <!--footer begins --> <div id="footer"> <p>Copyright © 2008 网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】. Designed by <a href="http://www.qitongnet.com/" target="_blank">www.qitongnet.com</a> Free Website Templates</p> </div> <!-- footer ends--> </body> </html>