网页设计技术实用教程--从基础到前沿第5章HTML5网页表单设计（字数3万）参考文献：我chp6；陆chp4；格式类似我P73；目录5.1表单简介及应用案例5.2 表单主体设计---form 标记5.2表单主体设计（form）包括新增元素5.3表单输入域设计---input标记5.3 表单设计的相关属性包括新增属性input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；新增属性：form属性；formaction；formmethod；placeholder；autofocus；list；autocomplete；5.4 文本区与列表选择框设计--- textarea、select标记5.5标签与按钮设计---label、button标记5.6表单控件分组设计--- fieldset、legend标记5.7 HTML5表单设计前沿内容知识技术5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素5.7.2 新增与改进的表单属性；HTML5表单新增与改进的属性5.7.3 input域控件的type属性的新增与改进5.4 表单设计示例如果例子多，需要单独成节，可增加该节例子（见陆p46-59）按功能划分：input元素使用示例；form等属性示例；表单验证示例……5.8 使用DWCS5进行网页表单设计实例（薛凯7.3.5；对5.1节的案例用工具制作、设计）5.9本章小结5.10进阶学习5.11 思考与实践第5章HTML5表单设计本章导读：上一章我们学习了、了解了……网页中链接的设计。
而在网站注册或购物时不可或缺的元素就是表单，本章就引导大家读者学习表单的设计。
首先，通过一个案例的介绍，让大家领略了解表单在网站中的重要魅力作用，同时在读者建立起了对表单有了大概的初步感性认识印象后；接着通过理论与示例结合的方式，、详细具体讲解介绍表单主体及其内部各种标记和属性的知识；同时，紧跟技术的发展，讲述介绍HTML5表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。
工欲善其事，必先利其器，网页设计离不开好的工具支持，最后，指导大家使用网页设计工具DWCS5工具实现一个复杂表单页面的设计，至此从而完成本章的讲解学习之旅。
5.1表单简介HTML表单在制作动态网站方面起着非常重要的作用，它的功能首先是用来排列各种表单控件的布局。
让表单能够以一种友好的界面呈现在浏览器面前。
其次，表单经常在网页中作为和用户进行交互的工具使用。
表单在Web网页中用来给访问者填写信息，从而使服务器能获得用户信息，使网页具有交互的功能。
一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 、JSP或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。
几乎所有的商务网站都离不开表单，最常见的就是用户的注册表单。
图6.1所示的即是eBay易趣网站上的一个用户注册表单。
需要更新,再加上一个购物表单，图中用符号标明控件名称或类型。
图6.1 戴尔账户注册表单图6.1 eBay易趣网站用户注册表单表单是由许多控件组成的。
在上述网页中就用到了文本框、按钮等控件，见图中所示。
所谓控件就是一些供用户操作用的组件，用户就是通过这些控件和网站进行交互的。
这些控件的使用还与服务器端程序有关，与服务器端程序有关内容还需参看jsp等内容。
表单上的常用控件名称、图例和功能（说明）如表6.1表6.1中除了Textarea(文本区)、select（列表选择框）外，其他控件都由input 标记实现。
下面各节我们将依次讲解各种控件相关的标记，包括其元素和属性的知识。
5.2 表单主体设计---form 标记< form >标记定义了一个交互式表单。
任何一个表单都由该标记开始，它是表单的主标记，它里面可以包含多个其它子标记（如段落、表格、列表和图象等）或控件。
控件集中放在表单里面可以保证发送的数据是一块连续的数据。
< form >标记常用的属性如表6.2所示。
表6.2 常用的< form >属性定义【示例6.1】使用FORM 标记及属性，设计一个给商家发送电子邮件的表单页面，文件命名为E06_01.htm 。
网页功能要求如下：表单被命名为myform ，并采用post 方法提交数据。
当用户单击提交按钮时，执行JavaScript 脚本代码，打开提示对话框。
当用户单击提示对话框的确定按钮后，程序询问是否发送表单数据至商家电子邮箱。
在IE 浏览器中的显示效果如图6.3-图6.5所示图6.3 打开网页时的显示效果图6.4 单击提交按钮后的显示效果图6.5 单击上图确定按钮后的显示效果本例网页E06_01.htm 文件的源程序代码如下。
重点代码阴影表示，注意在DW 下加程序的行号及实用性修改，排版格式最后统一处理源程序清单：E6_2.htm 】<html><head><title>表单FORM 标记及属性的示例</title></head><body><form name="myform" method="POST" action="mailto:aaa@"onsubmit="javascript:alert('hello ：你确认要提交表单吗？你点击了提交按钮')"> <h3>表单FORM 标记及属性的示例</h3><p><font color="blue">请你点击提交按钮，发送表单数据：</font><input type="submit" value="提交"></p></form> </body> </html>技术、设计、代码说明，知识要点、代码解释；操作提示【示例解析】（1）代码onsubmit="javascript:alert('hello：你点击了提交按钮')"，指明：当点击“提交”按钮时，需调用的javascript函数-- alert（）函数。
用到了事件、行为，javascript 中window对象的这里暂时会用即可，详细见javascript部分指出具体小节。
（2）DW工具操作步骤：插入菜单--- 表单（3）用区别于正文宋体的楷体及大小，不同字体易于消除阅读疲劳。
5.3表单输入域设计---input标记input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；<input>标记在表单中用于定义输入数据的区域。
它可以根据type属性的不同取值生成多种不同的控件。
因而，在HTML表单设计中有着最广泛的应用。
< input >标记常用的属性如表6.3所示。
【示例 6.2】使用input标记及属性，设计一个网上商城用户注册页面，文件命名为E06_02.htm。
网页功能要求如下：页面内容及包含的控件和布局在IE浏览器中的显示效果如图6.6所示。
password控件允许输入字符的上限为6位，并设置p为其快捷访问键。
当用户单击“提交”按钮时，访问网上商城主页index.htm。
图 6.6网上商城用户注册页面input标记及属性的使用本例网页E06_02.htm文件的源程序代码如下。
重点代码阴影表示，注意加程序的行号及实用性【源程序清单：E6_3.htm】<html><head><title>input标记及属性的使用</title></head><body><h2>网上商城用户注册页面</h2><hr color="#800000"><form method="POST" action="index.htm" ><h3>请填写您的个人注册信息</h3> <hr color="blue"><p><label for="fp1">用户名称：</label><input type="text" name="T1" id="fp1" size="20" value="text（单行文本框）"tabindex="1"></p><p>登录密码：<input type="password" name="T2" size="20"maxlength="6" value="密码域" accesskey="p"></p><p>选择性别：<input type="radio" value="V1" name="R1">男<input type="radio" value="V2" checked name="R1">女</p><p>个人爱好：<input type="checkbox" name="C1" value="ON"> 体育<input type="checkbox" name="C1" value="ON" checked> 文学<input type="checkbox" name="C1" value="ON"> 娱乐 </p><p><input type="button" value="普通按钮" name="B3"onclick="this.value='你单击了我'" accesskey="a"><label for="fp2">Image 按钮：</label><input border="0" src="red_flower.JPG" name="I2"type="image" width="62" height="24" id="fp2"></p><p><input type="text" name="T3" size="20" value="只读文本框" readonly><input type="button" value="不可用按钮" name="B4" disabled></p><p>您的照片：<input type="file" value="文件选择框"></p><p><input type="hidden" name="my_ip" size="10" value="192.168.0.1"</p> <p><input type="submit" value="提交" name="B1"><input type="reset" value="重置按钮" name="B2"></p> </form></body></html>技术说明，要点、解释【示例解析】 （1）本例中“用户名称”标签的 for 属性与其后的text （文本框）的ID 属性值相同，是为了实现2个控件的绑定关联。