《网页设计与制作项目教程》-项目六

任务一创建表单一、项目简介网页除了能提供给用户各种类型的信息资源外.还承担着一项重要的功能.就是收集用户的信息.并根据用户的信息提供反馈.这种收集信息和反馈信息的过程就是网页的交互过程.本章将详细介绍网页中的各种表单元素.以及Ｓｐｒｙ表单验证的方法等相关知识.实现简单的人与网页之间的交互.二、项目目标本项目以“美食交流”网站开发为例.介绍表单网页中的综合应用.要求熟悉各种表单元素.掌握在网页中插入表单、表单元素的方法.掌握在网页中验证表单的方法.下一页返回任务一创建表单

三、工作任务根据“美食交流”网站设计与制作的要求.基于工作过程.以任务驱动的方式.应用表单组建实现用户与网页的交互功能.①创建表单.②验证表单.上一页下一页返回任务一创建表单

(一)任务描述通过以下三个步骤的操作实践来掌握在网页中创建表单的方法.初步完成“美食交流”网站首页的制作.网页效果如图6.1.1所示.①布局网页.②插入表单.③编辑表单.(二)任务目标按照网站需求分析.建立站点文件夹.并在ＤｒｅａｍｗｅａｖｅｒＣＣ中建立站点.设计制作首页文件.以及掌握在首页中设置表单区域、插入表单元素、设置表单元素的方法.上一页下一页返回任务一创建表单

(三)知识准备知识准备一表单１.概念表单是网站管理者与浏览者之间沟通的桥梁.主要用于收集用户信息和反馈意见.２.构成(１)表单标签表单标签是表单的容器.用于包含其他的表单元素.设定表单的起止位置.并指定数据提交到服务器的方法.<ｆｏｒｍ></ｆｏｒｍ>上一页下一页返回任务一创建表单

功能:用于申明表单.定义采集数据的范围.也就是<ｆｏｒｍ>和</ｆｏｒｍ>里面包含的数据将被提交到服务器或者电子邮件里.语法:<ｆｏｒｍａｃｔｉｏｎ＝"ｒｕｌ"ｍｅｔｈｏｄ＝"ｇｅｔ｜ｐｏｓｔ"ｅｎｃｔｙｐｅ＝"ｍｉｍｅ"ｔａｒｇｅｔ＝"...">...</ｆｏｒｍ>表单标签的属性值及功能描述见表6.1.1.上一页下一页返回任务一创建表单

(２)表单域表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等.(３)表单按钮表单按钮包括提交按钮、复位按钮和一般按钮.用于将数据传送到服务器上的Ｃ-Ｉ脚本或者取消输入.还可以用表单按钮来控制其他定义了处理脚本的处理工作.上一页下一页返回任务一创建表单

知识准备二表单控件１.ｉｎｐｕｔ元素ｉｎｐｕｔ元素可以定义大多数类型的控件.控件的类型取决于ｔｙｐｅ的属性值.不同的值对应不同的表单控件.除了最主要的ｔｙｐｅ属性.ｉｎｐｕｔ元素还有其他常见的属性.具体见表6.1.3.上一页下一页返回任务一创建表单

２.单行文本框ｔｅｘｔ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｔｅｘｔ时.将会创建一个单行文本框.代码格式如下:<ｌａｂｅｌｆｏｒ＝"ｔｅｘｔｆｉｅｌｄ">ＴｅｘｔＦｉｅｌｄ:</ｌａｂｅｌ><ｉｎｐｕｔｔｙｐｅ＝"ｔｅｘｔ"ｎａｍｅ＝"ｔｅｘｔｆｉｅｌｄ"ｉｄ＝"ｔｅｘｔｆｉｅｌｄ">显示效果如图6.1.2所示.上一页下一页返回任务一创建表单

３.密码文本框ｐａｓｓｗｏｒｄ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｐａｓｓｗｏｒｄ时.将会创建一个密码文本框.代码格式如下:<ｌａｂｅｌｆｏｒ＝"ｐａｓｓｗｏｒｄ">Ｐａｓｓｗｏｒｄ:</ｌａｂｅｌ><ｉｎｐｕｔｔｙｐｅ＝"ｐａｓｓｗｏｒｄ"ｎａｍｅ＝"ｐａｓｓｗｏｒｄ"ｉｄ＝"ｐａｓｓｗｏｒｄ">显示效果如图6.1.3所示.上一页下一页返回任务一创建表单

４.复选框ｃｈｅｃｋｂｏｘ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｃｈｅｃｋｂｏｘ时.将会创建一个复选框.下面以一个范例来说明(选择喜欢的运动.从三个选项里选择.可以多选).代码格式如下:<ｌａｂｅｌ><ｉｎｐｕｔｔｙｐｅ＝"ｃｈｅｃｋｂｏｘ"ｎａｍｅ＝"ＣｈｅｃｋｂｏｘＧｒｏｕｐ１"ｖａｌｕｅ＝"游泳"ｉｄ＝"ＣｈｅｃｋｂｏｘＧｒｏｕｐ１＿０">游泳</ｌａｂｅｌ><ｂｒ/>上一页下一页返回任务一创建表单

<ｌａｂｅｌ><ｉｎｐｕｔｔｙｐｅ＝"ｃｈｅｃｋｂｏｘ"ｎａｍｅ＝"ＣｈｅｃｋｂｏｘＧｒｏｕｐ１"ｖａｌｕｅ＝"瑜伽"ｉｄ＝"ＣｈｅｃｋｂｏｘＧｒｏｕｐ１＿１">瑜伽</ｌａｂｅｌ><ｂｒ/><ｌａｂｅｌ><ｉｎｐｕｔｎａｍｅ＝"ＣｈｅｃｋｂｏｘＧｒｏｕｐ１"ｔｙｐｅ＝"ｃｈｅｃｋｂｏｘ"ｉｄ＝"ＣｈｅｃｋｂｏｘＧｒｏｕｐ１＿２"ｖａｌｕｅ＝"复选框"ｃｈｅｃｋｅｄ>慢跑</ｌａｂｅｌ>显示效果如图6.1.4所示.上一页下一页返回任务一创建表单

多个在同一个表单中的复选框可以使用同一个名称标识ｎａｍｅ.在提交表单时.每个处于选中状态的复选框都会形成一个“名称/值”对.当有多个具有相同名称的复选框处于选中状态时.就会形成多对“名称/值”对.这些“名称/值”对都会被提交给服务器.其中慢跑选项在预览时已经被选中.表示此选项为复选框的初始值.在代码中以ｃｈｅｃｋｅｄ来实现.５.单选按钮ｒａｄｉｏ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｒａｄｉｏ时.将会创建一个单选按钮.下面以一个范例来说明(从三个年级中选择一个).上一页下一页返回任务一创建表单

代码格式如下:<ｉｎｐｕｔｔｙｐｅ＝"ｒａｄｉｏ"ｎａｍｅ＝"ＲａｄｉｏＧｒｏｕｐ１"ｖａｌｕｅ＝"一年级"ｉｄ＝"Ｒａｄｉｏ￣Ｇｒｏｕｐ１＿０"ｃｈｅｃｋｅｄ>一年级<ｂｒ><ｉｎｐｕｔｔｙｐｅ＝"ｒａｄｉｏ"ｎａｍｅ＝"ＲａｄｉｏＧｒｏｕｐ１"ｖａｌｕｅ＝"二年级"ｉｄ＝"Ｒａｄｉｏ￣Ｇｒｏｕｐ１＿１">二年级<ｂｒ><ｉｎｐｕｔｔｙｐｅ＝"ｒａｄｉｏ"ｎａｍｅ＝"ＲａｄｉｏＧｒｏｕｐ１"ｖａｌｕｅ＝"三年级"ｉｄ＝"Ｒａｄｉｏ￣Ｇｒｏｕｐ１＿２">三年级上一页下一页返回任务一创建表单

显示效果如图6.1.5所示.一个单选按钮是一个“打开/关闭”的开关.当这个开关打开时.这个按钮的值是活动的.当开关关闭时.这个值则没有激活.即单选按钮的值只在开关打开时提交.多个在同一个表单内的单选按钮可以有同一个名称.这些单选按钮组成了单选按钮组.单选按钮组内的单选按钮在同一个时刻只有一个可以被设置为“打开”状态.其他同名的单选按钮都为“关闭”状态.其中一年级选项在预览时已经被选中.表示此选项为单选按钮组的初始值.在代码中以ｃｈｅｃｋｅｄ来实现.上一页下一页返回任务一创建表单

６.提交按钮ｓｕｂｍｉｔ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｓｕｂｍｉｔ时.将会创建一个提交按钮.代码格式如下:<ｉｎｐｕｔｔｙｐｅ＝"ｓｕｂｍｉｔ"ｎａｍｅ＝"ｓｕｂｍｉｔ"ｉｄ＝"ｓｕｂｍｉｔ"ｖａｌｕｅ＝"提交">其中.ｖａｌｕｅ属性表示按钮上显示的初始值为“提交”.用户可以根据实际情况自行修改ｖａｌｕｅ属性的值.当按钮被用户单击时.表单中的所有控件的“名称/值”被提交.提交的目标是ｆｏｒｍ元素的ａｃｔｉｏｎ属性所定义的ＵＲＬ地址.上一页下一页返回任务一创建表单

７.重置按钮ｒｅｓｅｔ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｒｅｓｅｔ时.将会创建一个重置按钮.代码格式如下:<ｉｎｐｕｔｔｙｐｅ＝"ｒｅｓｅｔ"ｎａｍｅ＝"ｒｅｓｅｔ"ｉｄ＝"ｒｅｓｅｔ"ｖａｌｕｅ＝"重置">其中.Ｖａｌｕｅ属性表示按钮上显示的初始值为“重置”.用户可以根据实际情况自行修改ｖａｌｕｅ属性的值.当用户单击重置按钮时.表单中的所有控件被重设为通过它们的ｖａｌｕｅ属性定义的初始值.重置按钮的“名称/值”不与表单一起提交.上一页下一页返回任务一创建表单

８.图形按钮ｉｍａｇｅ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｉｍａｇｅ时.将会创建一个图像按钮.代码格式如下:<ｉｎｐｕｔｔｙｐｅ＝"ｉｍａｇｅ"ｎａｍｅ＝"ｉｍａｇｅＦｉｅｌｄ"ｉｄ＝"ｉｍａｇｅＦｉｅｌｄ"ｓｒｃ＝"ｉｍａ￣ｇｅｓ/ｌｉｓｔ.ｇｉｆ">其中.ｓｒｃ属性表示图像按钮的图像来源为“ｉｍａｇｅｓ”文件夹中的图像“ｌｉｓｔ.ｇｉｆ”.当用户单击图像按钮时.表单被提交并且位置被传送到服务器.上一页下一页返回任务一创建表单

９.普通按钮ｂｕｔｔｏｎ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｂｕｔｔｏｎ时.将会创建一个普通按钮.代码格式如下:<ｉｎｐｕｔｔｙｐｅ＝"ｂｕｔｔｏｎ"ｎａｍｅ＝"ｂｕｔｔｏｎ"ｉｄ＝"ｂｕｔｔｏｎ"ｖａｌｕｅ＝"提交">其中.ｖａｌｕｅ属性表示按钮上显示的初始值为“提交”.１０.插入一个文件ｆｉｌｅ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｆｉｌｅ时.将会创建一个文件提交文本框和“浏览”按钮.上一页下一页返回任务一创建表单

代码格式如下:Ｆｉｌｅ:<ｉｎｐｕｔｔｙｐｅ＝"ｆｉｌｅ"ｎａｍｅ＝"ｆｉｌｅＦｉｅｌｄ"ｉｄ＝"ｆｉｌｅＦｉｅｌｄ">显示效果如图6.1.6

所示.用户单击“选择文件”按钮.就可以选择相应的文件并将此文件作为表单数据上传.上一页下一页返回任务一创建表单

１１.隐藏域ｈｉｄｄｅｎ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｈｉｄｄｅｎ时.将会创建一个隐藏域.代码格式如下:<ｉｎｐｕｔｔｙｐｅ＝"ｈｉｄｄｅｎ"ｎａｍｅ＝"ｈｉｄｄｅｎＦｉｅｌｄ"ｉｄ＝"ｈｉｄｄｅｎＦｉｅｌｄ">隐藏域控件用来存储用户输入的信息.如姓名、地址等.可以在该用户下次访问此站点时使用这些数据.并且这些数据对用户而言是隐藏的.上一页下一页返回任务一创建表单

１２.Ｅｍａｉｌ文本框当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为Ｅｍａｉｌ时.将会创建一个邮件文本框.代码格式如下:Ｅｍａｉｌ:<ｉｎｐｕｔｔｙｐｅ＝"ｅｍａｉｌ"ｎａｍｅ＝"ｅｍａｉｌ"ｉｄ＝"ｅｍａｉｌ">当用户提交表单时.会自动验证输入的值.依据浏览器的不同.或者会提示出错信息.如图6.1.7所示.上一页下一页返回任务一创建表单

１３.ｕｒｌ文本框当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｕｒｌ时.将会创建一个ｕｒｌ文本框.代码格式如下:Ｕｒｌ:<ｉｎｐｕｔｔｙｐｅ＝"ｕｒｌ"ｎａｍｅ＝"ｕｒｌ"ｉｄ＝"ｕｒｌ">当用户提交表单时.会自动验证输入的值.依据浏览器的不同.或者会提示出错信息.如图6.1.8所示.上一页下一页返回任务一创建表单

１４.滑动刻度控件ｒａｎｇｅ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｒａｎｇｅ时.将会创建一个滑动刻度控件.ｒａｎｇｅ控件应用于应该包含一定范围内的数字值的输入框.并且也可以设定对所接受的数字的限定.如下面的代码:年龄范围:<ｉｎｐｕｔｔｙｐｅ＝"ｒａｎｇｅ"ｎａｍｅ＝"ｒａｎｇｅ"ｉｄ＝"ｒａｎｇｅ"ｍｉｎ＝"１"ｍａｘ＝"１５">限定年龄范围在１~１５岁之间.显示效果如图6.1.9所示.可以用表6.1.4所示的属性规定对数字类型的限定.上一页下一页返回任务一创建表单

１５.日期控件ｄａｔｅ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｄａｔｅ时.将会创建一个日期文本框.代码格式如下:Ｄａｔｅ:<ｉｎｐｕｔｔｙｐｅ＝"ｄａｔｅ"ｎａｍｅ＝"ｄａｔｅ"ｉｄ＝"ｄａｔｅ">用户可以在文本框中选择指定的日期.如指定日期为２０１６年１月３１日.显示效果如图6.1.10所示.上一页下一页返回任务一创建表单

１６.时间控件ｔｉｍｅ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｔｉｍｅ时.将会创建一个时间文本框.代码格式如下:Ｔｉｍｅ:<ｉｎｐｕｔｔｙｐｅ＝"ｔｉｍｅ"ｎａｍｅ＝"ｔｉｍｅ"ｉｄ＝"ｔｉｍｅ">用户可以在文本框中选择时间.如选择时间为２３点５９分.显示效果如图6.1.11

所示.上一页下一页返回任务一创建表单

１７.日期和时间控件ｄａｔｅｔｉｍｅ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｄａｔｅｔｉｍｅ时.将会创建一个日期和时间文本框.代码格式如下:ＤａｔｅＴｉｍｅ:<ｉｎｐｕｔｔｙｐｅ＝"ｄａｔｅｔｉｍｅ"ｎａｍｅ＝"ｄａｔｅｔｉｍｅ"ｉｄ＝"ｄａｔｅｔｉｍｅ">显示效果如图6.1.12所示.上一页下一页返回任务一创建表单

１８.本地日期和时间控件ｄａｔｅｔｉｍｅ－ｌｏｃａｌ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｄａｔｅｔｉｍｅ－ｌｏｃａｌ时.将会创建一个本地日期和时间文本框.代码格式如下:ＤａｔｅＴｉｍｅ－Ｌｏｃａｌ:<ｉｎｐｕｔｔｙｐｅ＝"ｄａｔｅｔｉｍｅ－ｌｏｃａｌ"ｎａｍｅ＝"ｄａｔｅｔｉｍｅ－ｌｏｃａｌ"ｉｄ＝"ｄａｔｅｔｉｍｅ－ｌｏｃａｌ">用户可以在文本框中选择本地日期和时间.如选择本地为２０１６年１月１日２２点５９分.显示效果如图6.1.13所示.上一页下一页返回任务一创建表单

１９.月份控件ｍｏｎｔｈ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｍｏｎｔｈ时.将会创建一个月份文本框.代码格式如下:Ｍｏｎｔｈ:<ｉｎｐｕｔｔｙｐｅ＝"ｍｏｎｔｈ"ｎａｍｅ＝"ｍｏｎｔｈ"ｉｄ＝"ｍｏｎｔｈ">用户可以在文本框中选择年月.如选择为２０１６年１２月.显示效果如图6.1.14所示.上一页下一页返回任务一创建表单

２０.星期控件ｗｅｅｋ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｗｅｅｋ时.将会创建一个星期文本框.代码格式如下:Ｗｅｅｋ:<ｉｎｐｕｔｔｙｐｅ＝"ｗｅｅｋ"ｎａｍｅ＝"ｗｅｅｋ"ｉｄ＝"ｗｅｅｋ">用户可以在文本框中选择某年的第几周.如选择２０１６年第４９周.显示效果如图6.1.15所示.上一页下一页返回任务一创建表单

２１.带步进按钮ｎｕｍｂｅｒ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｎｕｍｂｅｒ时.将会创建一个带步进按钮.ｎｕｍｂｅｒ控件用于应该包含数值的输入框.在提交表单时.会自动验证输入的值.还能够设定对所接受的数字的限定.如下面的代码.限定年龄段在１~１５岁:年龄:<ｉｎｐｕｔｔｙｐｅ＝"ｎｕｍｂｅｒ"ｎａｍｅ＝"ｎｕｍｂｅｒ"ｉｄ＝"ｎｕｍｂｅｒ"ｍｉｎ＝"１"ｍａｘ＝"１５">用户提交表单时.会自动验证输入的值是否满足设定的条件.如果不满足.会提示出错.如图6.1.16所示.可以用表6.1.5所示的属性来规定对数字类型的限定.上一页下一页返回任务一创建表单

２２.搜索文本框ｓｅａｒｃｈ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｅａｒｃｈ时.将会创建一个搜索文本框.代码格式如下:Ｓｅａｒｃｈ:<ｉｎｐｕｔｔｙｐｅ＝"ｓｅａｒｃｈ"ｎａｍｅ＝"ｓｅａｒｃｈ"ｉｄ＝"ｓｅａｒｃｈ">显示效果如图6.1.17

所示.上一页下一页返回任务一创建表单

２３.调色板控件当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｃｏｌｏｒ时.将会创建一个调色板.代码格式如下:您最喜欢的颜色:<ｉｎｐｕｔｔｙｐｅ＝"ｃｏｌｏｒ"ｎａｍｅ＝"ｃｏｌｏｒ"ｉｄ＝"ｃｏｌｏｒ">用户可以单击色板选择合适的颜色.显示效果如图6.1.18所示.上一页下一页返回任务一创建表单

２４.电话号码文本框ｔｅｌ当ｉｎｐｕｔ元素的ｔｙｐｅ属性的值为ｔｅｌ时.将会创建一个电话号码文本框.代码格式如下:Ｔｅｌ:<ｉｎｐｕｔｔｙｐｅ＝"ｔｅｌ"ｎａｍｅ＝"ｔｅｌ"ｉｄ＝"ｔｅｌ">显示效果如图6.1.19所示.上一页下一页返回任务一创建表单

２５.菜单ｓｅｌｅｃｔ通过表单中的菜单控件.用户可以从一个列表中选择一个或多个项目.网页中的菜单控件分为两类:一类是下拉菜单.用户通过一个下拉列表选择项目.一个是带有滚动条的项目列表.用户可以通过滚动条选择项目.在表单中.<ｓｅｌｅｃｔ>标签每出现一次.一个ｓｅｌｅｃｔ对象就会被创建.其中<ｏｐｔｉｏｎ>标签用于定义列表中的可用选项.设定菜单为列表类型的代码格式如下:上一页下一页返回任务一创建表单

请选择你所在的年级:<ｓｅｌｅｃｔｎａｍｅ＝"ｓｅｌｅｃｔ"ｉｄ＝"ｓｅｌｅｃｔ"><ｏｐｔｉｏｎｖａｌｕｅ＝"１"ｓｅｌｅｃｔｅｄ>一年级</ｏｐｔｉｏｎ><ｏｐｔｉｏｎｖａｌｕｅ＝"２">二年级</ｏｐｔｉｏｎ><ｏｐｔｉｏｎｖａｌｕｅ＝"３">三年级</ｏｐｔｉｏｎ><ｏｐｔｉｏｎｖａｌｕｅ＝"４">四年级</ｏｐｔｉｏｎ><ｏｐｔｉｏｎｖａｌｕｅ＝"５">五年级</ｏｐｔｉｏｎ>上一页下一页返回任务一创建表单

<ｏｐｔｉｏｎｖａｌｕｅ＝"６">六年级</ｏｐｔｉｏｎ></ｓｅｌｅｃｔ>显示效果如图6.1.20

所示.设定菜单为带有滚动条类型的代码格式如下:请选择你所在的年级:<ｓｅｌｅｃｔｎａｍｅ＝"ｓｅｌｅｃｔ"ｍｕｌｔｉｐｌｅｉｄ＝"ｓｅｌｅｃｔ"><ｏｐｔｉｏｎｖａｌｕｅ＝"１"ｓｅｌｅｃｔｅｄ>一年级</ｏｐｔｉｏｎ>上一页下一页返回任务一创建表单

<ｏｐｔｉｏｎｖａｌｕｅ＝"２">二年级</ｏｐｔｉｏｎ><ｏｐｔｉｏｎｖａｌｕｅ＝"３">三年级</ｏｐｔｉｏｎ><ｏｐｔｉｏｎｖａｌｕｅ＝"４">四年级</ｏｐｔｉｏｎ><ｏｐｔｉｏｎｖａｌｕｅ＝"５">五年级</ｏｐｔｉｏｎ>上一页下一页返回任务一创建表单

<ｏｐｔｉｏｎｖａｌｕｅ＝"６">六年级</ｏｐｔｉｏｎ></ｓｅｌｅｃｔ>显示效果如图6.1.21所示.<ｓｅｌｅｃｔ>元素的主要属性及其功能描述见表6.1.6.上一页下一页返回任务一创建表单

(四)任务实施步骤一布局网页①在Ｄ盘建立站点目录“ｊｉａｏｌｉｕ”及其子目录ｉｍａｇｅｓ、ｆｉｌｅｓ和ｏｔｈｅｒ.将素材文件夹中提供的图片文件复制到ｉｍａｇｅｓ文件夹中.将所有的文本资料都复制到ｏｔｈｅｒ文件夹中.为后期建立网页文件做好前期准备工作.②打开ＤｒｅａｍｗｅａｖｅｒＣＣ.并打开站点菜单的子菜单“管理站点”.在弹出的窗口中选择右下角的“新建站点”按钮.设置站点名称为“美食交流”.设置本地站点文件夹为Ｄ盘的ｊｉａｏｌｉｕ文件夹.上一页下一页返回任务一创建表单

在“高级设置”的“本地信息”中设置默认图像文件夹为Ｄ盘“ｊｉａｏｌｉｕ”文件夹中的子文件夹“ｉｍａｇｅｓ”.单击“完成”按钮.就在站点中新建了一个“美食交流”的站点.③在“文件”面板中.右键单击“站点”.选择“新建文件”命令.即在站点中新建了一个网页文件.默认名称为“ｕｎｔｉｔｌｅｄ.ｈｔｍｌ”.将此网页名称重命名为“ｉｎｄｅｘ.ｈｔｍｌ”.此网页文件即为网站的首页.也称为主页.④双击打开ｉｎｄｅｘ.ｈｔｍｌ文件.将视图模式由“实时视图”修改为“设计”视图.并将网页的标题修改为“美食交流网首页”.上一页下一页返回任务一创建表单

⑤选择“插入”→“Ｄｉｖ(Ｄ)”命令.在弹出的对话框中选择在“ｂｏｄｙ”标签开始之后插入.设置ＩＤ为“ｍａｉｎ”.如图6.1.22所示.<ｂｏｄｙ><ｄｉｖｉｄ＝"ｍａｉｎ">此处显示ｉｄ"ｍａｉｎ"的内容</ｄｉｖ></ｂｏｄｙ>⑥在ＣＳＳ设计器中新建ＩＤ选择器“＃ｍａｉｎ”.设置此选择器的ＣＳＳ样式为宽９００像素、左右边距自适应、上边距为５像素、下边距为０像素、背景颜色为浅绿色“＃Ｄ９ＥＣＢ４”.具体设置如图6.1.23所示.上一页下一页返回任务一创建表单

＃ｍａｉｎ{ｍａｒｇｉｎ－ｌｅｆｔ:ａｕｔｏ.ｍａｒｇｉｎ－ｒｉｇｈｔ:ａｕｔｏ.ｍａｒｇｉｎ－ｔｏｐ:５ｐｘ.ｗｉｄｔｈ:９００ｐｘ.ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ:＃Ｄ９ＥＣＢ４.}上一页下一页返回任务一创建表单

步骤二插入表单１.插入表单在层ｍａｉｎ内部.选择“插入”→“表单”→“表单”项.即在ｍａｉｎ内插入一个默认名称为ｆｏｒｍ１的表单.２.设置标题格式输入表单标题“美食交流”.选中文本“美食交流”.在“属性”→“ＨＴＭＬ”中设置此文本的格式为“标题２”.如图6.1.24所示.上一页下一页返回任务一创建表单

３.插入域集“个人信息”在文本“美食交流”下一行.执行“插入”→“表单”→“域集”.在弹出的对话框的“标签”文本框内输入文本“个人信息”.如图6.1.25

所示.４.插入表单元素(１)用户名在文本“个人信息”后执行“插入”→“表单”→“文本”.修改“文本”元素左侧的“ＴｅｘｔＦｉｅｌｄ”为“用户名”.上一页下一页返回任务一创建表单

(２)性别在单行文本域下一行执行“插入”→“表单”→“单选按钮组”.设置名称为“ｓｅｘ”.标签和值如图6.1.26

所示进行设置.单击“确定”按钮.在设计视图中.将两个单选按钮之间的换行符删除.使两个单选按钮在同一行显示.在第一个单选按钮前输入文本“性别:”.上一页下一页返回任务一创建表单

选择“选择”元素.在下方的属性面板中单击“列表值”.打开“列表值”对话框.将列表的项目标签和值都设置为十二生肖的内容.具体设置如图6.1.27所示.上一页下一页返回任务一创建表单

(７)学历在生肖下一行.执行“插入”→“表单”→“单选按钮组”.设置名称为“ｅｄｕ￣ｃａｔｉｏｎ”.标签和值分别是“大专”“１”.“本科”“２”.“硕士”“３”.“博士”“４”.“其他”“５”.具体设置如图6.1.28所示.删除每行之间的换行符.使得五个单选按钮都在同一行显示.在第一个单选按钮前输入文本“性别:”.网页预览效果如图6.1.29所示.上一页下一页返回任务一创建表单

５.插入域集“交流信息”在代码视图中.将光标定位在“</ｆｉｅｌｄｓｅｔ>”后.执行“插入”→“表单”→“域集”.在弹出的对话框的“标签”文本框内输入文本“交流信息”.６.插入表单元素(１)最喜欢的颜色在文本“交流信息”后.执行“插入”→“表单”→“颜色”.修改元素前面的“Ｃｏｌｏｒ:”为“最喜欢的颜色”.上一页下一页返回任务一创建表单

(２)兴趣爱好在颜色域下一行.执行“插入”→“表单”→“复选框组”.设置复选框组的名称为“ｉｎｔｅｒｅｓｔ”.设置标签和值分别为:运动、上网、看书、游戏、旅游、摄影、看电影、听音乐、美食.具体设置如图6.1.30

所示.删除每行之间的换行符.使得复选按钮在同一行显示.上一页下一页返回任务一创建表单

在第一个复选框前输入文本“兴趣爱好:”.上一页下一页返回任务一创建表单

７.设置文本样式(１)分组标题样式分别选中分组标题“个人信息”和“交流信息”.在“属性”→“ＨＴＭＬ”中设置文本格式为“标题３”.在ＣＳＳ设计器中创建标签选择器“ｈ２”.设置其文本颜色“ｃｏｌｏｒ”为“＃１１８８ＤＤ”、文本字体“ｆｏｎｔ－ｆａｍｉｌｙ”为“微软雅黑”、文本对齐方式“ｔｅｘｔ－ａｌｉｇｎ”为“ｃｅｎｔｅｒ”.在ＣＳＳ设计器中创建标签选择器“ｈ３”.设置其文本颜色“ｃｏｌｏｒ”为“＃４５８７Ｂ７”、文本字体“ｆｏｎｔ－ｆａｍｉｌｙ”为“方正姚体”、字体大小“ｆｏｎｔ－ｓｉｚｅ”为“２０ｐｘ”.具体设置如图6.1.32所示.上一页下一页返回任务一创建表单

(２)表单文本样式在ＣＳＳ设计器中创建标签选择器“ｌａｂｌｅ”.设置文本字体“ｆｏｎｔ－ｆａｍｉｌｙ”为“华文楷体”、字体大小“ｆｏｎｔ－ｓｉｚｅ”为“１８ｐｘ”.设置文本样式之后的网页预览效果如图6.1.33所示.步骤三编辑表单①选择用户名所在行的“文本”元素.在下方的属性面板设置其长度即“ｓｉｚｅ”为２５.“ＭａｘＬｅｎｇｔｈ”为３０.设置用户名的可见长度为２５字符.最大长度为３０字符.如图6.1.34所示.上一页下一页返回任务一创建表单

②选择联系电话所在行的“电话”元素.在下方的属性面板设置其“ｓｉｚｅ”为１１.“ＭａｘＬｅｎｇｔｈ”为１１.③选择Ｅｍａｉｌ所在行的“邮件”元素.在下方的属性面板设置其“ｓｉｚｅ”为２５.“ＭａＬｅｎｇｔｈ”为３０.④选择最爱的美食所在行的“文本”元素.在下方的属性面板设置其“ｓｉｚｅ”为３０.“ＭａｘＬｅｎｇｔｈ”为４０.⑤选择热爱美食的原因所在行的“文本域”元素.在下方的属性面板设置其“Ｒｏｗｓ”为１０.“Ｃｏｌｓ”为５０.设置多行文本框为１０行５０列的大小.如图6.1.35

所示.上一页下一页返回任务一创建表单

⑥选择性别所在行的单选按钮“男”.在下方的属性面板选择“Ｃｈｅｃｋｅｄ”.将“男”作为此单选按钮组的默认值.⑦选择学历所行在的单选按钮“大专”.在下方的属性面板选择“Ｃｈｅｃｋｅｄ”.将“大专”作为此单选按钮组的默认值.⑧选择兴趣爱好所在行的多选按钮“美食”.在下方的属性面板选择“Ｃｈｅｃｋｅｄ”.将“美食”作为此复选按钮组的默认值.⑨在“生肖”的单选按钮组后.执行“插入”→“图像”.在弹出的对话框中选择ｉｍ￣ａｇｅｓ文件夹中的图片“ｓｈｕ.ｇｉｆ”.并设置此图片的大小为５０×５０ｐｘ.ＩＤ名称为“ｓｈｅｎｇｘｉ￣ａｏ”.如图6.1.36所示.上一页下一页返回任务一创建表单

选中项目标签.打开属性面板中的“列表值”对话框.将列表项“鼠”的值ｖａｌｕｅ修改为“ｉｍａｇｅｓ/ｓｈｕ.ｇｉｆ”.将列表项“牛”的值ｖａｌｕｅ修改为“ｉｍａｇｅｓ/ｎｉｕ.ｇｉｆ”.将列表项“虎”的值ｖａｌｕｅ修改为“ｉｍａｇｅｓ/ｈｕ.ｇｉｆ”.依此类推.将十二生肖对应的列表值的“值”都修改为与之相应的图片.如图6.1.37所示.打开“行为”面板.在下拉菜单中选择“ｏｎＣｈａｎｇｅ”.在右侧文本域中输入“ｓｈｅｎｇｘｉａｏ.ｓｒｃ＝ｓｅｌｅｃｔ.ｖａｌｕｅ”.即让图像“ｓｈｅｎｇｘｉａｏ”的图片来源“ｓｒｃ”随着列表“ｓｅｌｅｃｔ”的值而变化.如图6.1.38所示.上一页下一页返回任务一创建表单

⑩新建内部样式.ｂｕｔｔｏｎ.在ＣＳＳ设计器中创建类选择器“.ｂｕｔｔｏｎ”.设置其ＣＳＳ样式为宽ｗｉｄｔｈ为４０ｐｘ.高ｈｅｉｇｈｔ为４０ｐｘ.边距ｍａｒｇｉｎ为４ｐｘ、４ｐｘ、４ｐｘ、４０ｐｘ.背景图片ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ为ｉｍ￣ａｇｅｓ/ａｎｎｉｕ.ｇｉｆ.边框宽度ｂｏｒｄｅｒ－ｗｉｄｔｈ为０ｐｘ.如图6.1.39所示.11�设置按钮样式.分别选择“提交”按钮和“重置”按钮.将两个按钮的类“Ｃｌａｓｓ”都设置为“ｂｕｔｔｏｎ”.在插入表单、表单域.设置表单域属性之后.美食交流网站首页的预览效果如图6.1.40所示.上一页下一页返回任务一创建表单

(五)任务评价上一页下一页返回任务一创建表单

(六)思考练习上一页下一页返回任务一创建表单

及上一页下一页返回任务一创建表单

１１.根据图6.1.41所示的页面效果.写出对应的表单代码.(七)任务拓展从网络中了解注册网页的组成.并为美食交流网站设计制作一个注册网页和一个注册成功的页面.要求在注册页面中有密码文本框.有用户头像可以选择.在设计制作过程中.要求思考:①如何将文本框设置成密码效果?②用什么方法实现用户头像选择的效果?上一页返回任务二验证表单(一)任务描述通过以下两个步骤的操作实践掌握ＪａｖａＳｃｒｉｐｔ在表单验证中的应用.完善“美食交流”网站“首页”页面的制作.完成“提交”页面的制作.提交页面的效果如图6.2.1所示.①新建“提交”页面.②验证“首页”表单.(二)任务目标按照美食交流网站的需求分析.设计制作提交网页.在首页中对表单的表单域值进行验证.以实现表单域值的准确性.初步掌握对表单域值进行验证的方法.下一页返回任务二验证表单

(三)知识准备知识准备一ＪａｖａＳｃｒｉｐｔ常用全局对象１.ｉｓＦｉｎｉｔｅ()函数用于检查其参数是否是无穷大.语法:ｉｓＦｉｎｉｔｅ(ｎｕｍｂｅｒ)返回值:如果ｎｕｍｂｅｒ是有限数字(或可转换为有限数字).那么返回ｔｒｕｅ.否则.如果ｎｕｍｂｅｒ是ＮａＮ(非数字).或者是正、负无穷大的数.则返回ｆａｌｓｅ.上一页下一页返回任务二验证表单

２.ｉｓＮａＮ()函数用于检查其参数是否是非数字值.语法:ｉｓＮａＮ(ｘ)返回值:如果ｘ是特殊的非数字值ＮａＮ(或者能被转换为这样的值).返回的值就是ｔｒｕｅ.如果ｘ是其他值.则返回ｆａｌｓｅ.上一页下一页返回任务二验证表单

知识准备二Ｗｉｎｄｏｗｓ常用对象方法１.ａｌｅｒｔ()方法用于显示带有一条指定消息和一个“ＯＫ”按钮的警告框.语法:ａｌｅｒｔ(ｍｅｓｓａｇｅ)实例:<ｓｃｒｉｐｔｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎｄｉｓｐｌａｙ＿ａｌｅｒｔ(){ａｌｅｒｔ("Ｉａｍａｎａｌｅｒｔｂｏｘ!!")}</ｓｃｒｉｐｔ>上一页下一页返回任务二验证表单

２.ｃｌｏｓｅ()方法用于关闭浏览器窗口.语法:ｗｉｎｄｏｗ.ｃｌｏｓｅ()实例:<ｈｔｍｌ><ｈｅａｄ><ｓｃｒｉｐｔｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎｃｌｏｓｅＷｉｎ(){ｍｙＷｉｎｄｏｗ.ｃｌｏｓｅ()}上一页下一页返回任务二验证表单

</ｓｃｒｉｐｔ></ｈｅａｄ><ｂｏｄｙ><ｓｃｒｉｐｔｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ">ｍｙＷｉｎｄｏｗ＝ｗｉｎｄｏｗ.ｏｐｅｎ(ˈ.ˈ.ˈｗｉｄｔｈ＝２００.ｈｅｉｇｈｔ＝１００ˈ)ｍｙＷｉｎｄｏｗ.ｄｏｃｕｍｅｎｔ.ｗｒｉｔｅ("ＴｈｉｓｉｓˈｍｙＷｉｎｄｏｗˈ")上一页下一页返回任务二验证表单

</ｓｃｒｉｐｔ><ｉｎｐｕｔｔｙｐｅ＝"ｂｕｔｔｏｎ"ｖａｌｕｅ＝"ＣｌｏｓｅˈｍｙＷｉｎｄｏｗˈ"ｏｎｃｌｉｃｋ＝"ｃｌｏｓｅＷｉｎ()"/></ｂｏｄｙ></ｈｔｍｌ>３.ｏｐｅｎ()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口.语法:ｗｉｎｄｏｗ.ｏｐｅｎ(ＵＲＬ.ｎａｍｅ.ｆｅａｔｕｒｅｓ.ｒｅｐｌａｃｅ)上一页下一页返回任务二验证表单

实例:<ｈｔｍｌ><ｈｅａｄ><ｓｃｒｉｐｔｔｙｐｅ＝"ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎｏｐｅｎ＿ｗｉｎ(){ｗｉｎｄｏｗ.ｏｐｅｎ("ｈｔｔｐ://ｗｗｗ.ｗ３ｓｃｈｏｏｌ.ｃｏｍ.ｃｎ")}</ｓｃｒｉｐｔ></ｈｅａｄ>上一页下一页返回任务二验证表单

<ｂｏｄｙ><ｉｎｐｕｔｔｙｐｅ＝ｂｕｔｔｏｎｖａｌｕｅ＝"ＯｐｅｎＷｉｎｄｏｗ"ｏｎｃｌｉｃｋ＝"ｏｐｅｎ＿ｗｉｎ()"/></ｂｏｄｙ></ｈｔｍｌ>上一页下一页返回任务二验证表单

知识准备三ＪａｖａＳｃｒｉｐｔ表单验证典型案例表单验证是ＪａｖａＳｃｒｉｐｔ中的高级选项之一.ＪａｖａＳｃｒｉｐｔ可用来在数据被送往服务器前对ＨＴＭＬ表单中的这些输入数据进行验证.被ＪａｖａＳｃｒｉｐｔ验证的典型表单数据有:１.长度限制<ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝"ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎｔｅｓｔ(){ｉｆ(ｄｏｃｕｍｅｎｔ.ａ.ｂ.ｖａｌｕｅ.ｌｅｎｇｔｈ﹥５０)上一页下一页返回任务二验证表单

{ａｌｅｒｔ("不能超过５０个字符!").ｄｏｃｕｍｅｎｔ.ａ.ｂ.ｆｏｃｕｓ().ｒｅｔｕｒｎｆａｌｓｅ.}}</ｓｃｒｉｐｔ>上一页下一页返回任务二验证表单

２.两次密码输入是否相同<ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝"ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎＣｈｅｃｋＦｏｒｍ(){ｉｆ(ｄｏｃｕｍｅｎｔ.ｆｏｒｍ.ＰＷＤ.ｖａｌｕｅ!＝ｄｏｃｕｍｅｎｔ.ｆｏｒｍ.ＰＷＤ＿Ａｇａｉｎ.ｖａｌｕｅ){ａｌｅｒｔ("您两次输入的密码不一样!请重新输入.").ｄｏｃｕｍｅｎｔ.ＡＤＤＵｓｅｒ.ＰＷＤ.ｆｏｃｕｓ().ｒｅｔｕｒｎｆａｌｓｅ.上一页下一页返回任务二验证表单

}ｒｅｔｕｒｎｔｒｕｅ.}</ｓｃｒｉｐｔ>３.表单项内容不能为空<ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝"ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎＣｈｅｃｋＦｏｒｍ(){ｉｆ(ｄｏｃｕｍｅｎｔ.ｆｏｒｍ.ｎａｍｅ.ｖａｌｕｅ.ｌｅｎｇｔｈ＝＝０)上一页下一页返回任务二验证表单

{ａｌｅｒｔ("请输入您姓名!").ｄｏｃｕｍｅｎｔ.ｆｏｒｍ.ｎａｍｅ.ｆｏｃｕｓ().ｒｅｔｕｒｎｆａｌｓｅ.}ｒｅｔｕｒｎｔｒｕｅ.}</ｓｃｒｉｐｔ>上一页下一页返回任务二验证表单

４.表单项内容只能为数字<ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝"ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎｏｎｌｙＮｕｍ(){ｉｆ(!((ｅｖｅｎｔ.ｋｅｙＣｏｄｅ﹥＝４８＆＆ｅｖｅｎｔ.ｋｅｙＣｏｄｅ﹤＝５７)｜｜(ｅｖｅｎｔ.ｋｅｙＣｏｄｅ＝９６＆＆ｅｖｅｎｔ.ｋｅｙＣｏｄｅ﹤＝１０５)))ｅｖｅｎｔ.ｒｅｔｕｒｎｖａｌｕｅ＝ｆａｌｓｅ.}</ｓｃｒｉｐｔ>上一页下一页返回任务二验证表单

５.验证邮箱格式<ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝"ｊａｖａｓｃｒｉｐｔ"ｒｕｎａｔ＝"ｓｅｒｖｅｒ">ｆｕｎｃｔｉｏｎｉｓＥｍａｉｌ(ｓｔｒＥｍａｉｌ){ｉｆ(ｓｔｒＥｍａｉｌ.ｓｅａｒｃｈ(/＾＼ｗ＋((－＼ｗ＋)｜(＼.＼ｗ＋))∗＼＠[Ａ－Ｚａ－ｚ０－９]＋((＼.｜－)[Ａ－Ｚａ－ｚ０－９]＋)∗＼.[Ａ－Ｚａ－ｚ０－９]＋＄/)!＝－１)上一页下一页返回任务二验证表单

ｒｅｔｕｒｎｔｒｕｅ.ｅｌｓｅａｌｅｒｔ("ｏｈ").}</ｓｃｒｉｐｔ>上一页下一页返回任务二验证表单

(四)任务实施步骤一新建“提交”页面１.新建网页在站点中新建网页.重命名为“ｔｉｊｉａｏ.ｈｔｍｌ”.并将网页标题修改为“美食交流提交页面”.２.�布局网页①在ｂｏｄｙ标签开始之后插入ＤＩＶ层.设置层ＩＤ为ｍａｉｎ.上一页下一页返回任务二验证表单

②在ＣＳＳ样式表中创建ＩＤ选择器“ｍａｉｎ”.并设置其ＣＳＳ样式为宽度９００像素、上边距为５像素、下边距为０像素、左右边距为ａｕｔｏ、背景色为浅绿＃ＡＥＤＦＡ２、文本字体颜色为＃４６２４２５、字体为微软雅黑、文本大小为４０ｐｘ、行高为５０ｐｘ、文本对齐方式为居中.如图6.2.2所示.３.�填充网页(１)录入标题在ＤＩＶ层中输入文本“感谢您对美食交流网站的支持!”.上一页下一页返回任务二验证表单

(２)设置图片样式在ＣＳＳ设计器中创建标签选择器“ｉｍｇ”.设置其属性为:宽４００ｐｘ、高３００ｐｘ.边框宽度为５ｐｘ.边框样式为“ｄｏｔｔｅｄ”.边框颜色为红色＃３Ｄ３０３０.如图6.2.3所示.(３)插入图片在标题行结尾处按Ｅｎｔｅｒ键到下一个段落.插入ｉｍａｇｅｓ文件夹中的图片“ｔ２.ｊｐｇ”“ｔ９.ｊｐｇ”.插入图片“ｔ９.ｊｐｇ”后按Ｅｎｔｅｒ键到下一个段落.插入ｉｍａｇｅｓ文件夹中的图片“ｔ４.ｊｐｇ”“ｔ７.ｊｐｇ”.上一页下一页返回任务二验证表单

步骤二验证“首页”表单１.设置用户名为必填项打开“ｉｎｄｅｘ.ｈｔｍｌ”网页.选中用户名对应的文本框.在属性面板中选中“Ｒｅｑｕｉｒｅｄ”选项.将用户名设置为必填项.如图6.2.4

所示.上一页下一页返回任务二验证表单

２.验证电话为数字在代码的头部<ｈｅａｄ>内.输入如下所示代码:<ｓｃｒｉｐｔｌａｎｇｕａｇｅ＝"ｊａｖａｓｃｒｉｐｔ">ｆｕｎｃｔｉｏｎｃｈｅｃｋ(){ｖａｒｆｒ＝ｄｏｃｕｍｅｎｔ.ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ("ｔｅｌ").ｖａｌｕｅ.ｉｆ(ｆｒ＝＝""