简单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;
}
具体演示:
运行代码框
猜你喜欢
- 这个例子可作为一个模式,在你需要的时候套用。<!DOCTYPE HTML PUBLIC &q
- Q. How can I restrict access to my SQL Server so that it only allows c
- GetRef 函数 返回一个指向一过程的引用,此过程可绑定某事件。 Set object.eventname = GetRef(procna
- 开源的MySQL并不能取代非共享的私有数据库在企业中的应用,于是这些开源数据库的支持者们想把解决Web应用程序开发工具的可扩展性问题看作是获
- 下面,我们就从当前时间来取得随机数,调用的时候用包含文件就可以了:<!--#INCLUDE VIRTUAL="/q
- 以前我就是一篇博文 就给出一个好用的函数,它在我几篇博文中被广泛运用的。最近看了不少东西,于是便有了这篇博文,以梳理我学到的新东西。毫无疑问
- 时间久了,注册用户和朋友数据库里的废记录渐渐多了起来,尤其是电子邮件地址,请问有什么好的办法可以快速安全地将它们删除吗?试试下面这个办法,它
- 在中文网页中最常见的网页编码就是GB2312和UTF-8了,本文介绍了ASP实现GB2312编码转换为UTF-8编码的函数:Function
- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下: mysql -
- var fso = new ActiveXObject("Scripting.
- JavaScript中没有Trim函数,VBScript语言中才有这个函数,就是去掉字符串头和尾的空格。您可以访问这篇文章:《增加 java
- 在MySQL中,使用auto_increment类型的id字段作为表的主键,并用它作为其他表的外键,形成“主从表结构”,这是数据库设计中常见
- SQL Server 2005数据库中增加了XML类型,在创建表的时候可以指定某一列为XML类型,示例如下:CREATE TABL
- 当你连接到MySQL服务器时,你应使用一个密码。密码不以明文在上传输。客户端连接序列中的密码处理在MySQL 4.1.1中已经升级,很安全。
- 文章背景:某天,我的一个同事给我看了CSDN上面的一篇关于编程语言排行榜的文章,里面我看到VB还是排名很不错的,我就说,asp(vbscri
- Access允许您在数据库表中包含附件。通过利用微软的对象链接和嵌入(OLE)技术,您可以将照片、图表、文档及其他文件存储在您的Access
- 影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为
- 今天碰到这个极度郁闷的报错,搞了大半下午,才发现是ie的问题,忍不住大骂。例子是这样的:页面中有多处能出发菜单,并且菜单出现在触发点的旁边,
- SQL Server 2008已经发布,我们可以看到它在各方面都有了显著的进步,这些让人侧目之处和失望之处都有可能极大地影响大型企业的采购意
- 你是否曾经想在数据库中存储一个日期而没有时间部分,或者想存储一个时间值希望有更高的精度?在SQL Server 2008的介绍中,微软介绍了