项目七表单的应用

1、项目七项目七 表单的应用表单的应用第 2 页中小型网站建设与管理中小型网站建设与管理n 项目简介项目简介 本项目的任务是制作一个信息反馈表单。本项目的任务是制作一个信息反馈表单。 在网页制作时经常会遇到通过表单提供交互信息。本项目就是通过表在网页制作时经常会遇到通过表单提供交互信息。本项目就是通过表单来收集访问者的信息，实现网站同访问者之间进行交互的高级功能单来收集访问者的信息，实现网站同访问者之间进行交互的高级功能。表单通过一些基本的元素，如文本字段、文本域和单选按钮等，收。表单通过一些基本的元素，如文本字段、文本域和单选按钮等，收集访问者的请求信息，然后将这些信息传送给相应的处理程序，由这

2、集访问者的请求信息，然后将这些信息传送给相应的处理程序，由这些程序对访问者的请求做出回应。些程序对访问者的请求做出回应。 本项目中，页面完成的功能如下：本项目中，页面完成的功能如下： （1）创建表单）创建表单 （2）创建表单对象）创建表单对象 （3）表单输入验证）表单输入验证 （4）表单结果的接受）表单结果的接受第 3 页中小型网站建设与管理中小型网站建设与管理n 项目目标项目目标本项目通过制作信息反馈表单，要求学生掌握表单布局、美化表本项目通过制作信息反馈表单，要求学生掌握表单布局、美化表单、操作表单项、并对表单的各种元素灵活运用，熟练制作信息反馈单、操作表单项、并对表单的各种元素灵活运用，

3、熟练制作信息反馈表单。表单。 第 4 页中小型网站建设与管理中小型网站建设与管理n 工作任务工作任务 制作一个信息反馈表单。制作一个信息反馈表单。 第 5 页中小型网站建设与管理中小型网站建设与管理模块一模块一 建立表单建立表单 (一一)学习目标学习目标掌握表单布局、美化表单、操作表单项、并对表单的各种元素灵掌握表单布局、美化表单、操作表单项、并对表单的各种元素灵活运用，熟练制作信息反馈表单。活运用，熟练制作信息反馈表单。 (二二) 任务分析任务分析 （1）创建表单）创建表单 （2）创建表单对象）创建表单对象图图7.1 表单效果图表单效果图 第 6 页中小型网站建设与管理中小型网站建设与管理任

4、务一：建立站点任务一：建立站点 1、在、在D盘建立站点目录盘建立站点目录cpfk，并使用高级标签定义站点，站点名为，并使用高级标签定义站点，站点名为“产品产品反馈反馈”； 2、在起始页中的、在起始页中的“创建新项目创建新项目”中单击中单击“html”创建新网页；创建新网页；3、执行、执行“文件文件保存保存”命令，将网页保存在站点根目录下，保存文件名为命令，将网页保存在站点根目录下，保存文件名为cpfk.html；第 7 页中小型网站建设与管理中小型网站建设与管理任务二：创建表单任务二：创建表单 1、单击属性面板中的、单击属性面板中的“页面属性页面属性”按钮，设置页面属性，如图按钮，设置页面属性

5、，如图7.1.1所示所示。图图7.1.1 设置页面属性设置页面属性第 8 页中小型网站建设与管理中小型网站建设与管理2、单击插入工具栏上、单击插入工具栏上“表单表单”选项卡中的选项卡中的“表单表单”按钮，如图按钮，如图7.1.2所示。所示。3、即可在页面中插入一个空白表单，表单轮廓以红色虚线表示，如图、即可在页面中插入一个空白表单，表单轮廓以红色虚线表示，如图7.1.3所所示。示。图图7.1.2 插入表单插入表单图图7.1.3 表单显示表单显示第 9 页中小型网站建设与管理中小型网站建设与管理任务三：创建表单对象任务三：创建表单对象 1、将光标定位在空白表单中，在表单中插入一个、将光标定位在空

6、白表单中，在表单中插入一个9行行4列的表格，设置表格属性，如列的表格，设置表格属性，如图图7.1.4所示，调整单元格并填写文字内容，效果如图所示，调整单元格并填写文字内容，效果如图7.1.5所示。所示。 2、将光标定位在、将光标定位在“姓名姓名”右侧的单元格中，单击插入工具栏右侧的单元格中，单击插入工具栏“表单表单”选项卡中的选项卡中的“文本字段文本字段”按钮，如图按钮，如图7.1.6所示。所示。3、打开、打开“输入标签辅助功能属性输入标签辅助功能属性”对话框，单击对话框下面的链接文字对话框，单击对话框下面的链接文字“请更改请更改辅助功能辅助功能首选参数首选参数”，如图，如图7.1.7所示。所

7、示。4、打开、打开“首选参数首选参数”对话框，取消选中对话框，取消选中“表单对象表单对象”复选框，单击复选框，单击“确定确定”按钮，按钮，如图如图7.1.8所示。所示。5、回到、回到“输入标签辅助功能属性输入标签辅助功能属性”对话框，单击对话框，单击“确定确定”按钮，文本字段被插入到按钮，文本字段被插入到文档中，如图文档中，如图7.1.9所示。所示。6、选定上面的文本字段，打开、选定上面的文本字段，打开“属性属性”面板，确认类型为面板，确认类型为“单行单行”，如图图，如图图7.1.10所所示。示。7、将光标定位在、将光标定位在“年龄年龄”右边的单元格中，单击插入工具栏右边的单元格中，单击插入工

8、具栏“表单表单”选项卡选项卡中的中的“文本字段文本字段”按钮。按钮。第 10 页中小型网站建设与管理中小型网站建设与管理图图7.1.4 创建表格并设置其属性创建表格并设置其属性图图7.1.5 表格内容表格内容图图7.1.6 插入文本字段插入文本字段第 11 页中小型网站建设与管理中小型网站建设与管理图图7.1.7 更改辅助功能更改辅助功能图图7.1.8 首选参数首选参数第 12 页中小型网站建设与管理中小型网站建设与管理图图7.1.9 文本字段效果文本字段效果图图7.1.10 设置文本字段属性设置文本字段属性第 13 页中小型网站建设与管理中小型网站建设与管理9、在、在“工作性质工作性质”右边

9、的单元格中插入右边的单元格中插入“列表列表菜单菜单”，如图，如图7.1.11所示。所示。 10、打开、打开“列表值列表值”对话框，单击对话框，单击“+”按钮，增加项目标签按钮，增加项目标签-值对，输入完毕值对，输入完毕后单击后单击“确定确定”按钮，如图按钮，如图7.1.12 图图7.1.13所示。所示。 11、将光标定位在、将光标定位在“性别性别”右边的单元格中，单击插入工具栏右边的单元格中，单击插入工具栏“表单表单”选项选项卡中的卡中的“单选按钮单选按钮”按钮，如图按钮，如图7.1.14所示。所示。 12、选定刚刚插入的单选按钮，打开、选定刚刚插入的单选按钮，打开“属性属性”面板，将面板，将

10、“初始状态初始状态”由由“未未选中选中”改为改为“已勾选已勾选”，如图，如图7.1.15所示。所示。 13、再插入一个单选按钮，并在旁边分别输入文字说明、再插入一个单选按钮，并在旁边分别输入文字说明“男男”和和“女女”，如，如图图7.1.16所示。所示。 14、将光标定位在、将光标定位在“您是如何知道本产品的您是如何知道本产品的”右下方的单元格中，单击插入右下方的单元格中，单击插入工具栏工具栏“表单表单”选项卡中的选项卡中的“单选按钮组单选按钮组”按钮，如图按钮，如图7.1.17所示。所示。 15、打开、打开“单选按钮组单选按钮组”对话框，单击对话框，单击“+”按钮，增加标签按钮，增加标签-值

11、对，输入完毕值对，输入完毕后单击后单击“确定确定”按钮，如图按钮，如图7.1.18所示。所示。 第 14 页中小型网站建设与管理中小型网站建设与管理图图7.1.11 插入下拉列表插入下拉列表图图7.1.12 设置下拉列表属性设置下拉列表属性图图7.1.13 添加列表值添加列表值图图7.1.14 插入单选按钮插入单选按钮第 15 页中小型网站建设与管理中小型网站建设与管理图图7.1.15 设置单选按钮属性设置单选按钮属性图图7.1.16 单选按钮效果图单选按钮效果图图图7.1.17 插入单选按钮组插入单选按钮组第 16 页中小型网站建设与管理中小型网站建设与管理图图7.1.18 添加单选按钮组选

12、项添加单选按钮组选项第 17 页中小型网站建设与管理中小型网站建设与管理16、将光标定位在、将光标定位在“您对本产品最感兴趣的部分是您对本产品最感兴趣的部分是”右下方的单元格中，单右下方的单元格中，单击插入工具栏击插入工具栏“表单表单”选项卡中的选项卡中的“复选框复选框”按钮，如图按钮，如图7.1.19所示。所示。 17、在该复选框右边输入文字说明、在该复选框右边输入文字说明“颜色颜色”。18、再插入几个复选框，并输入必要的文字，如图、再插入几个复选框，并输入必要的文字，如图7.1.20所示。所示。19、将光标定位在、将光标定位在“您认为本产品有哪些地方需要改进？您认为本产品有哪些地方需要改进

13、？”右下方的单元格右下方的单元格中，单击插入工具栏中，单击插入工具栏“表单表单”选项卡中的选项卡中的“文件域文件域”按钮，如图按钮，如图7.1.21所所示。示。 20、将光标定位在最后一行单元格中，单击插入工具栏、将光标定位在最后一行单元格中，单击插入工具栏“表单表单”选项卡中的选项卡中的“按钮按钮”按钮，插入按钮，插入3个按钮，如图个按钮，如图7.1.22所示。所示。 21、选中中间的按钮，打开、选中中间的按钮，打开“属性属性”面板，将面板，将“值值”改为改为“重置重置”，设置，设置“动作动作”为为“重设表单重设表单”，如图，如图7.1.23所示。所示。 22、选择右边的按钮，打开、选择右边

14、的按钮，打开“属性属性”面板，将面板，将“值值”改为改为“退出退出”，设置，设置“动作动作”为为“无无”，如图，如图7.1.24所示。所示。23、保存网页，并按、保存网页，并按F12键预览页面。键预览页面。 第 18 页中小型网站建设与管理中小型网站建设与管理图图7.1.19 插入复选框插入复选框图图7.1.20 复选框效果图复选框效果图图图7.1.21 插入文件域插入文件域第 19 页中小型网站建设与管理中小型网站建设与管理图图7.1.22 插入按钮插入按钮图图7.1.23设置设置“重置重置”按钮属性按钮属性图图7.1.24设置设置“退出退出”按钮属性按钮属性第 20 页中小型网站建设与管理

15、中小型网站建设与管理模块二模块二 表单的验证与接收表单的验证与接收 (一一)学习目标学习目标掌握验证表单的输入结果并设置接收结果的方式。掌握验证表单的输入结果并设置接收结果的方式。 (二二) 任务分析任务分析 1、验证表单、验证表单 2、利用、利用spry对表单进行验证对表单进行验证 3、通过电子邮件接收表单结果、通过电子邮件接收表单结果 第 21 页中小型网站建设与管理中小型网站建设与管理图图7.2 表单验证及电子邮件接收效果图表单验证及电子邮件接收效果图第 22 页中小型网站建设与管理中小型网站建设与管理任务一：任务一：验证表单验证表单 1、打开、打开“xxfk.html”网页，将光标停放

16、在表单内，在标签选择器中，选中表网页，将光标停放在表单内，在标签选择器中，选中表单单“form”标签。标签。 2、分别将、分别将“姓名姓名”、“密码密码”和和“电话电话”后的文本域名称修改为后的文本域名称修改为“name”、“password”和和“tel”。3、执行、执行“窗口窗口行为行为”命令，打开命令，打开“行为行为”面板。面板。4、单击、单击“行为行为”面板中的面板中的“+”按钮，从动作列表中选择按钮，从动作列表中选择“检查表单检查表单”。5、在出现的对话框中，在、在出现的对话框中，在“域域”中分别选取中分别选取“name”和和“password”，选，选取取“必需的必需的”，表示浏览

17、者在用户名及密码处必须输入字符。，表示浏览者在用户名及密码处必须输入字符。6、选择、选择“tel”,选取选取“数字数字”单选按钮，表示浏览者在该项目中必须输入数字单选按钮，表示浏览者在该项目中必须输入数字。7、单击、单击“确定确定”关闭对话框。关闭对话框。8、保存网页。、保存网页。 第 23 页中小型网站建设与管理中小型网站建设与管理任务二：任务二：利用利用spry对表单进行验证对表单进行验证1、打开、打开“xxfk.html”网页，选择网页，选择“电话电话”后面的后面的“tel”文本域。文本域。2、选择、选择“spry”工具栏中的工具栏中的“spry验证文本域验证文本域” 。3、设置、设置“sprytextfield1”属性属性。4、保存并预览；在这里，我们设置、保存并预览；在这里，我们设置“电话电话”对应的对应的“tel”为为“必填必填”项，项，“字符数字符数”在在“813”区间，因此，我们在区间，因此，我们在“tel”文本框中输入文本框中输入“11”字符字符，