CSS制作表单技术

y200y第9章使用CSS制作表单表单是功能型网站中经常使用的元素，是网站交互中最重要的元素。在网页中，小到搜索按钮，大到用户注册表单，以及用户控制面板，都需要使用到表单及其表单元素。表单元素用来收集用户信息，帮助用户进行功能性控制，表单的交互设计与视觉设计都是网站设计中的重要部分。从表单视觉设计来说，经常需要摆脱XHTML提供的默认的比较粗糙的视觉样式。本章将介绍如何使用CSS设计表单。9.1制作登录表单登录表单是各大网站都会用到的一个非常实用的模块，是用来进入其他相关页面的入口，如图9-1所示是一个带有登录模块的网页。图9-1带有登录模块的网页本节将使用form表单元素以及label标签制作一个样式精美的登录表单。第9章使用CSS制作表单y201y9.1.1label标签语法结构本节将使用到XHTML语言中表单常用到的label标签。在使用表单时，对于小小的单选框和复选框，总是需要用光标精确的点击到小框或是小圆上时，才能够完成交互相应，长期使用时也许会觉得这是一个非常麻烦的事情。表单可用性问题便显露出来，一个不方便用户简单实用的表单是不可取的。XHTML中提供了一个改善表单交互问题的标签label，label标签具体语法结构代码如下。labelfor=#accesskey＝#/labellabel标签具有提示表单的含义（标签说明）的功能，是成对出现的，以label开始，以/label结束，两个label之间的内容是要显示的文字。label中有两个属性是非常有用的，一个是for，另外一个就是accesskey，可用属性及其属性值如下。‰for：表示label标签要绑定的XHTML元素，当点击这个标签的时候，所绑定的元素将获取焦点。labelfor=InputBox姓名/labelinputid=InputBoxtype=text‰accesskey：表示访问label标签所绑定的元素的热键，当按下热键，所绑定的元素将获取焦点。labelfor=InputBoxaccesskey＝N姓名/labelinputid=InputBoxtype=text注意：label标签的for属性用于指定该标签所关联的表单元素，当for中所指的名称与表单某元素的id值相同时，该标签将与该元素关联，点击该标签的同时，该元素也将得到响应。label标签是提升表单可用性的简单易行的方法，在能够用到的时候使用这个标签，将会使表单的操作更舒畅。9.1.2制作登录表单实例现在开始使用表单元素和label标签设计一个登录表单。分成两个div层级关系，外层为layout层，用来定义表单框架样式，内层为member层，用来放置表单等主体元素。内层member又分成标题区域和表单区域，分别由.title和form控制样式。（1）制作页面的XHTML代码，如下。divid=layoutdivid=memberdivclass=titleimgsrc=images/11_1_02.jpg//divformname=form1id=form1method=postaction=#divlabelfor=nameName:/labelinputname=nameid=nametype=textsize=10maxlength=10//divdivlabelfor=passPass:/labelinputid=passname=passtype=passwordsize=10maxlength=10/inputtype=imagesrc=images/11_1_03.pngclass=bt/CSS从入门到精通y202y/div/form/div/div以上代码是在制作一个会员登录窗口的表单。登录窗口是一个需要由来访者输入会员账号和密码才能够进入参与相关活动的入口。在整个表单设计中，包含了输入框（input）、图片提交按钮两个表单元素和label标签，并且使用CSS改进了浏览器默认的外观。div.title元素指定了表单标题的图片，标题图片如图9-2所示。label标签用来显示Name和Pass的文字，使用for属性分别指定捆绑的XHTML元素是id为name的input元素和id为pass的input元素。input输入框表单元素，定义两个输入文本框和一个图片提交按钮。输入文本框一个是类型为text的单行文本输入框，一个是类型为password的密码输入框，文本框宽度都定义为10个，最大输入字符为10。图片提交按钮也是通过input元素将类型定义为image来实现的，如图9-3所示。图9-2标题图片图9-3图片提交按钮页面结构预览效果如图9-4所示。（2）制作#layout元素的CSS样式，代码如下。#layout{background-color:#999999;/*设置背景颜色*/width:163px;/*设置宽度*/height:142px;/*设置高度*/font-size:10px;/*设置字体大小*/font-family:Arial;/*设置字体类型*/}在以上代码中，定义表单框架背景颜色为灰色，并为其指定宽度和高度，预览效果如图9-5所示。（3）制作#member元素的CSS样式，代码如下。#member{text-align:center;/*设置文本居中显示*/width:153px;/*设置宽度*/height:132px;/*设置高度*/background:url(images/11_1_01.gif)repeat-y;/*设置背景样式*/margin:5px;/*设置外边距*/}.title{margin-left:3px;/*设置左外边距*/margin-top:7px;/*设置上外边距*/}在以上代码中，定义了#member元素的背景图片，并且纵向平铺，背景图如图9-6所示；指定了#member元素的宽度和高度，以及外边距，用来放置表单各个元素。另外在.title元素中，指定了标题图片的左和上外边距，保证图片的准确定位，预览效果如图9-7所示。第9章使用CSS制作表单y203y图9-4页面结构预览效果图9-5添加了#layout样式的预览效果图9-6背景图片图9-7添加了#member和.title样式的预览效果从图9-7可以看出，输入文本框和login按钮都不对齐，继续添加样式。（4）制作表单元素的CSS样式，代码如下。form{margin:0px;/*设置外边距*/padding:4px;/*设置内边距*/}label{width:40px;/*设置宽度*/float:left;/*设置向左浮动定位*/text-align:right;/*设置文本向右对齐*/padding:3px0px1px;/*设置内边距*/color:#FFF;/*设置字体颜色*/}input{border:1pxsolid#000;/*设置边框样式*/margin:1px;/*设置外边距*/padding:1px;/*设置内边距*/font-family:Arial;/*设置字体类型*/font-size:12px;/*设置字体大小*/color:#666666;/*设置字体颜色*/CSS从入门到精通y204y}以上代码是这个实例的关键。制作这个登录表单的实例，主要应用到的是form元素、label标签和input元素，在这里分别对它们进行定义CSS样式。使用标签指定式选择符form定义了表单外边距和内边距；使用标签指定式选择符label定义了文本区域的宽度、内边距、字体颜色以及浮动方式；使用标签指定式选择符input定义了输入框和图片按钮的边框、外边距、内边距、字体类型、大小以及颜色属性，预览效果如图9-8所示。从图9-8可以看出，login按钮图片周围还存在黑色的边框，这是img标签默认的样式，为了美观，现在需要把边框去掉，继续添加样式。（5）制作.bt元素的CSS样式，代码如下。.bt{width:67px;/*设置宽度*/height:25px;/*设置高度*/border:none;/*设置边框样式*/margin-top:10px;/*设置上外边距*/}在以上代码中，为图片按钮专门定义了一套CSS样式，去除了在标签指定式选择符label中定义的边框，又重新指定了上边距，使得按钮距离上面的输入框拉开一定距离，美观大方。同时为按钮定义了宽度和高度，保证图片完整显示出来。这样登录表单的实例就制作完成，预览效果如图9-9所示。图9-8为表单标签添加样式的预览效果图9-9登录表单的预览效果9.1.3兼容问题为了符合Web标准，制作完成的页面至少需要在3个主流浏览器（IE7、Firefox、IE6）中测试。下面首先在Firefox浏览器下测试。1．Firefox浏览器测试在Firefox浏览器中打开该实例，预览效果如图9-10所示。从图9-10可以看出，本实例在Firefox浏览器中出现问题了，表单上边界被切下一块，问题的关键在于类标签#layout选择符设置的内边距padding，重新设置padding的值，代码如下。第9章使用CSS制作表单y205y#layout{background-color:#999999;/*设置背景颜色*/width:163px;/*设置宽度*/height:146px;/*设置高度*/font-size:10px;/*设置字体大小*/font-family:Arial;/*设置字体类型*/padding-top:1px;/*设置上内边距*/}在以上代码中，最后一行添加了上内边距的设置padding-top:1px，这样就解决了表单上边界缺少一块灰色背景的问题，预览效果如图9-11所示。2．IE6浏览器测试在IE6浏览器中打开该实例，预览效果如图9-12所示。从图9-12可以看出，除了login图片边缘出现问题以外，其他没有样式问题。而图片边缘的问题，正是IE6浏览器对png格式图片的不支持造成的，所以为了避免出现这样的问题，可以改为使用jpg等格式的图片。图9-10Firefox浏览器中的预览效果图9-11解决兼容问题后Firefox浏览器中的预览效果图9-12IE6浏览器中的预览效果9.2制作用户注册表单表单布局除了需要应用表单中的各个元素之外，还需要使用到table表格，表格是表单布局的得力助手。对于最终的表单来说，表格对数据的排列方式非常适合于表单元素的排列。对于常见的左右式表单，即左侧为项目名称，右侧为项目输入框的形式，也非常符合表格具有表头及单元格的属性，因此使用表格进行表单排版再合适不过了。如图9-13所示为一个带有表单的网页。本节尝试使用XHTML的表格将各表单元素放置于表格中。CSS从入门到精通y206y图9-13一个带有表单的网页9.2.1制作页面的XHTML代码制作页面的XHTML代码，如下。divid=pageHolderdivclass=actionformname=registerActionFormmethod=POSTaction=#h2注册/h2p欢迎注册，注册过程将不会收取您任何费用。我们承诺保护您的信息安全，不会将它提供给任何第三方。/ptabletrtdlabelfor=username用户名:/label/tdtdinputtype=textname=userIdmaxlength=99value=style=width:150pxclass=textInputid=username/br/spanclass=noteUsealphanumericcharacters(strong-/strong,strong_/strongandstrong//strongareokaytoo)/span/td/trtrtdlabelfor=passwo