使用css制作表单.docVIP

使用CSS制作表单（Form） 表单是功能型网站中经常使用的元素，是网站交互中最重要的元素。在网页中，小到有哪些信誉好的足球投注网站按钮，到用户注册表单，以及用户控制面板，都需要使用到表单及其表单元素。 表单元素主要用来收集用户信息，帮助用户进行功能性控制，表单的交互设计与视觉设计都是网站设计中的重要部分。本节将介绍如何使用CSS设计表单。 1.制作登录表单 登录表单是各大网站都会用到的一个非常实用的模块，是用来进入其他相关页面的入口。本节将使用form表单以及label标签制作一个样式精美的登录表单。 1.1 label标签语法结构 label for ”#” accesskey ”#” Label标签具有提示表单含义的功能，是成堆出现的。 ●for：表示label标签要绑定的XHTML元素，当点击这个标签的时候，所绑定的元素将获取焦点。 label for ”InputBox” 姓名 input id ”InputBox” type ”text” ●accesskey：表示访问label标签所绑定的元素的热键，当按下热键，所绑定的元素将获取焦点。（热键：Alt+N） label for ”InputBox” accesskey ”N” 姓名 input id ”InputBox” type ”text” 1.2 制作登录表单实例 使用表单元素和label标签设计一个登录表单。分成两个div层级关系，外层为layout层，用来定义表单框架样式，内层为member层，用来放置表单等主体元素。内层member又分成标题区域和表单区域，分别为title和form控制样式。2.制作用户注册表单 表单布局除了需要应用表单中的各个元素之外，还需要使用到table表格，表格是表单布局的得力助手。对于最终的表单来说，表格对数据的排列方式非常适合于表单元素的排列。对于常见的左右式表单，即左侧为项目名称，右侧为项目输入框的形式，也非常符合表格具有表头及单元格的属性，因此使用表格进行表单排版再合适不过了。 2.1 制作注册页面的HTML代码 2.2 效果图