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

作者:blank 时间:2007-05-11 17:04:00 

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

具体演示:

运行代码框


标签:form,布局,table
0
投稿

猜你喜欢

  • 如何从IP获知其所在地?

    2009-11-15 19:54:00
  • ASP 中 DateDiff 函数详解

    2007-09-19 12:00:00
  • 根据时段自动切换你的站点CSS皮肤风格

    2007-09-20 18:08:00
  • 让JavaScript拯救HTML5的离线存储[译]

    2009-05-15 12:26:00
  • 用户是如何浏览你的网站的

    2010-05-03 14:26:00
  • JS中实现JAVA的hashCode算法

    2008-08-03 17:00:00
  • 以图换字的几个方法及思路

    2007-10-17 18:07:00
  • asp可设置参数的分页代码例子

    2007-10-07 12:34:00
  • 谈谈设计师的发展

    2009-03-17 18:20:00
  • ACCESS入门教程:窗口和菜单的使用

    2008-01-03 20:15:00
  • 使用ODBC接口访问MySQL

    2009-02-13 13:59:00
  • asp如何做一个分页程序?

    2010-07-11 21:13:00
  • asp如何正确显示数据库里同时存在的GB码和BIG5编码?

    2010-06-28 18:26:00
  • 一个无组件上传的ASP代码

    2007-10-09 19:49:00
  • 细节设计之美:扩大可操作区域

    2009-08-01 11:32:00
  • [翻译]标记语言和样式手册 Chapter 4 引用

    2008-01-20 14:19:00
  • div中class与id的区别及应用

    2007-09-22 08:37:00
  • 简化翻页提升可用性

    2009-03-28 11:52:00
  • 解读HTML:大厦的基石

    2008-12-01 12:57:00
  • ext3下删除mysql数据库的数据恢复案例

    2009-05-13 14:39:00
  • asp之家 网络编程 m.aspxhome.com