创新杯计算机类第六单元任务二

1、第六单元检查表单制作“访客信息”网页任务二一、提出任务任务目标对“访客信息”栏目中表单输入数据的正确性进行检验。解决本任务通过实现对用户输入内容进行验证，学习应用检查表单。本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：表单以及文本字段、复选框等表单元素的使用。二、教学目标1. 知识目标2.了解检查表单的作用。验证文本内容为“必需的”。验证文本内容必需符合“电子邮件地址”。对文本内容进行其他要求的验证（例如只能输入数字，只能输入一定范围的数字）。能力目标能够使用“检查表单”确性验证。3. 情感目标框对表单中的文本字段、多行文本区域等表单元素进行输入内容正正确自己在团队中的作用，提高团队

2、协作能力。三、教学分析与准备教学重点 验证文本内容为“必需的”。 验证文本内容必需符合“电子邮件地址”。教学难点了解检查表单的作用。教学方法提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到，通过举一反三拓展对知识点的认识与理解。安排。 教学环境网络教室。4.25.多四、教学过程（组织课堂、复习知识、教师引领完成任务占 1 学时；举一反三占 1 学时。）教学环节及教学内容备注组织课堂复习知识集中学生注意力，准备上课。通过让学生上前操作学生对“表单内容”的掌握情况。1参照 126 邮箱的登陆网页，使用表单制作一个用户登录网页。任务流程导入任务分析任务完成任务用

3、户通过键盘输入数据时难免输错，有些能当下发现并修改，有些则不能，使用了错误数据就会造成一系列严重 。为了减少出错可以添加检查表单元素内容正确性功能，通过检查的才能输入，否则不允许输入。DreamWeaver CS5 就提供了检查表单元素内容正确性的功能，以确保用户输入有效的数据。若输入包含无效数据，则自动会给予提示，并要求用户重新填写，直到输入的数据有效时才会接收。下面通过验证任务一中完成的表单，介绍检验表单正确性的方法。提出任务：对表单输入数据的正确性进行检验。用户在表单中输入内容时，可能会输入各种各样的数据，其中有些可能是无效的，为了避免这些无效的数据提交到服务器，可以使用“检查表单”验证

4、用户输入的正确性。本任务将对“访客信息”表单中的“留言人”和“电子邮件”中输入的内容进行验证。首先验证一个“文本域”的内容是“必须的”，然后验证一个“文本域”的内容必须符合电子邮件地址。通过设置文本域的验证规则，来验证用户输入的内容是否有效，如果用户输入的内容不符合规则，则给出错误提示。1验证文本内容为“必需的” 运行 DreamWeaver CS5，打开“ .html”页面，选择菜单栏“窗口”菜单下的“行为”选项，在面板组添加“行为”面板。单击“ .html”页面中的 “提交”按钮，然后在“行为”面板上单击“添加行为”按钮 ，在弹出的下拉菜单中选择“检查表单”选项，打开“检查表单” 框。 由

5、于“ 留言人 ” 文本域的名称为 “username”，所以在“检查表单” 框 名的栏位”列表框中，选择选项文本“username”在表单“form1”，然后选中“值”为“必需的”，表示“留言人 ”文本域中必须输入内容，设置完成后单击“确定”按钮，保存文件。 按下 F12 键，预览“.html”页面。完成表单中各选项的数据输入，把“留言人”文本框中的内容全部删除，单击“提交”按钮，会弹出提示框，提示输入的信息有误，要求“留言人 ”文本框中必须输入数据而不能为空。用户只需在“留言人”文本框中输入数据，然后再单击“提交”力求通过任务导入，吸引学生学习欲望。学生分组 并尝试操作。学生分组 实现方法，

6、并比较与之前所使用方法的不同。知识总结举一反三任务目标按钮即可正确完成提交。验证文本内容必须符合“电子邮件地址” 按上述方法打开“检查表单框。由于“电子邮件”文本域的名称为“”，所以在“检查表单”框名的栏位”列表框中，选择文本 “”在表单“form1”，然后选中“可接受”中的 “电子邮件地址”单选按钮，设置完成后单击“确定”按钮，保存文件。 按下 F12 键，预览“.html”页面。除“电子邮件”文本框中输入错误的邮件地址（如 “123”）外，正确地输入其他表单内容，然后单击“提交”按钮，这时会弹出提示框，提示输入的电子邮件信息有误。用户只需在“电子邮件”文本框中输入正确的邮件地址（只接受符合

7、电子邮件格式的字符串，如“ . ”），然后再次单击“提交”按钮即可输入。知识讲解：“检查表单” 框中各选项功能 “命名的栏位”列表框：列出的是表单中所有的文本域。检查表单即是对表单中的文本域进行检查，包括单行文本域、域和多行文本域等。 “值”选项：选中“必需的”，代表此文本域在提交时必须填写内容。 “可接收”选项组：指定表单元素所能接受的值，该项有如下 4 个单选按钮。“任何东西”：如果该域是必需的但不需要包含任何特定类型的数据，则单击“任何东西”按钮。如果没有选中“必需的”复选框，则“任何东西”选项就没有意义了，相当于该域未附加“检查表单”动作。 “数字”单选按钮：检查该域是否只包含数字，即

8、文本域中只能接收数字形式的数据“电子邮件地址”单选按钮：检查域中输入的内容是否符合电子邮件格式。“数字从到”单选按钮：检查域是否包含指定范围内的数字，即文本域只能接受一定范围内的数字。通过完成本任务学习了DreamWeaver CS5 就提供的检查表单元素内容正确性功能，包括验证文本内容 为“必需的”、验证文本内容必需符合“电子邮件地址”。1利用本单元所学的知识，制作个人 的“用户登录”网页“practice6-3.html”，效果如 图JYFS6-3所示。设置验证规则，要求用户必须输入用户名和密码，并且其中 必须是数字格式，若不符合要求，教师作为引导者和组织者，学生分组上机操作，完成相应任务并进行评价。学生分组 并通过尝试操作得出结论。启发思路 分组完成任务学生自评或互评教师点评总结布置作业则显示错误提示信息。使用“检查表单”框完成每组 4 名