简明现代魔法 -> HTML超文本标记语言 -> 简单form标准化布局

简单form标准化布局

2009-12-29

form 无论是在网站的制作中,还是在网站的重构中,我们都会频繁地“碰面”,当“碰面”的次数多了,反而觉得他更让人迷茫,有种熟悉的“陌生”,越来越把握不了他。 下面我们将带大家走进 form 的世界,一起来熟悉、探讨、掌握他的“脾性”。

对于简单 form 的设计图(如图,yahoo 注册页面的一部分),我们如何来做整体的布局呢?大体我们可以选用以下 3 种方式来做布局:

使用 table 来布局

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

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

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

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

XHTML部分:

Registration example form
*
*
*
*
* @yahoo.com
ID may consist of a-z, 0-9, underscores, and a single dot (.)
*
Six characters or more; capitalization matters!
*

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

使用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部分:

@yahoo.com
ID may consist of a-z, 0-9, underscores, and a single dot (.)


Six characters or more; capitalization matters!

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

使用 dl、dt、dd 来布局

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

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

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

注意:和 label 布局一样,有 IE 的 3px BUG 。

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

XHTML部分:

*
*
*
*
*
@yahoo.com
ID may consist of a-z, 0-9, underscores, and a single dot (.)
*

Six characters or more; capitalization matters!
*

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 下,就惨不忍睹了!

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们