CSS制作表单技术.pdfVIP

第 9 章 使用 CSS 制作表单 表单是功能型网站中经常使用的元素，是网站交互中最重要的元素。在网页中，小到搜 索按钮，大到用户注册表单，以及用户控制面板，都需要使用到表单及其表单元素。 表单元素用来收集用户信息，帮助用户进行功能性控制，表单的交互设计与视觉设计都 是网站设计中的重要部分。从表单视觉设计来说，经常需要摆脱XHTML 提供的默认的比较 粗糙的视觉样式。本章将介绍如何使用CSS 设计表单。 9.1 制作登录表单 登录表单是各大网站都会用到的一个非常实用的模块，是用来进入其他相关页面的入 口，如图9-1 所示是一个带有登录模块的网页。 图9-1 带有登录模块的网页 本节将使用form 表单元素以及label 标签制作一个样式精美的登录表单。 200 第 9 章 使用 CSS 制作表单 9.1.1 label 标签语法结构 本节将使用到XHTML 语言中表单常用到的label 标签。在使用表单时，对于小小的单选 框和复选框，总是需要用光标精确的点击到小框或是小圆上时，才能够完成交互相应，长期 使用时也许会觉得这是一个非常麻烦的事情。表单可用性问题便显露出来，一个不方便用户 简单实用的表单是不可取的。XHTML 中提供了一个改善表单交互问题的标签label，label 标 签具体语法结构代码如下。 label for=# accesskey＝#/label label 标签具有提示表单的含义（标签说明）的功能，是成对出现的，以label开始，以 /label结束，两个label 之间的内容是要显示的文字。label 中有两个属性是非常有用的，一 个是for，另外一个就是accesskey，可用属性及其属性值如下。 for ：表示label 标签要绑定的 XHTML 元素，当点击这个标签的时候，所绑定的 元素将获取焦点。 label for=InputBox姓名/labelinput id=InputBox type=text accesskey ：表示访问label 标签所绑定的元素的热键，当按下热键，所绑定的元素将 获取焦点。 label for=InputBox accesskey＝N姓名/labelinput id=InputBox type=text 注意：label 标签的for 属性用于指定该标签所关联的表单元素，当for 中所指的名称与表 单某元素的id 值相同时，该标签将与该元素关联，点击该标签的同时，该元素也将得到响应。 label 标签是提升表单可用性的简单易行的方法，在能够用到的时候使用这个标签，将会 使表单的操作更舒畅。 9.1.2 制作登录表单实例 现在开始使用表单元素和label 标签设计一个登录表单。分成两个div 层级关系，外层为 layout 层，用来定义表单框架样式，内层为member 层，用来放置表单等主体元素。内层member 又分成标题区域和表单区域，分别由.title 和form 控制样式。 （1）制作页面的XHTML 代码，如下。 div id=layout div id=member div class=titleimg src=images/11_1_02.jpg //div form name=form1 id=form1 method=post action=# div label for=nameName:/label input name=name id=name type=text size=10 maxlength=10 / /div div label for=passPass:/label input id=pass name=pass type=password size=10 maxlength=10 / input type=image src=images/11_1