PHP网站开发项目式教程教案任务5-5-表单数据回填

1、PHP网站开发项目式教程教案任务5-5-表单数据回填PHP网站开发项目式教程教案任务5-5-表单数据回填PHP网站开发项目式教程教案任务5-5-表单数据回填5-5 表单数据回填课程内容信息说明所属任务任务五 邮箱注册和登录功能实现已有基础（学情）已经完成了本任务中的用户注册信息的获取，并实现用户输入的验证码和系统生成验证码的比较，具备了项目基础。教学目标知识目标1.掌握表单数据的回填2.掌握错误提示信息的设置能力目标1.使学生能够使用include命令引用外部页面文件2.使学生能够使用JS脚本实现表单数据的回填3.使学生能够设置表单元素的placeholder提示错误信息4.课后通过分析提交失

2、败的操作，培养分析问题的创新思维和设计能力素质目标（包含课程思政）1.体会网站的友好体验度，培养精益求精的工匠精神，做到客户至上，尽最大可能保护客户的利益2.养成代码规范习惯重点1.重新加载注册界面2.将用户提交的注册信息回填到表单3.在注册页面设置验证码错误提示信息难点1.如何实现回填数据2.如何在不同浏览器中保证错误信息的显示效果教学策略信息化手段视频展示注册时验证码输入错误的“体验感差”和“体验感好”的形式通过动画展示注册过程的数据流向。教学方法启发引导、问题导向、案例演示、设置障碍、问卷调研等学习方法课前预习、课中探究、课后练习与拓展课前活动及需要时间教师活动及内容学生活动及内容1.布

3、置学生观看如下视频，设计翻转课堂问题5-5.4-3在PHP中引用外部文件5-5.4-4验证码输入错误后的功能说明5-5.4-5表单数据回填2.设计职教云问卷调查、抢答问题、摇一摇问题、头脑风暴问题，为课堂使用做准备。3.批阅学生的预习作业4.查看学生课前预习后的难点问题调查1.观看视频5-5.4-3（约5分钟）5-5.4-4（约4分钟）5-5.4-5（约11分钟）2.完成预习作业3.完成“预习过程中难点问题调查”课中活动（检查预习效果，讲解重点难点）及需要时间1.导入模块-说明本次课要实现表单数据回填（5分钟）2.引用外部文件（10分钟）3.表单数据回填（30分钟）4.设置验证码错误提示信息（

4、35分钟）5.课中考核与总结（10分钟）环节1-导入模块：实现表单数据回填（5分钟）教学手段：案例演示、启发引导教师活动学生活动（1）演示目前已经实现的注册功能：输入错误的验证码提交后，在浏览器中输出“验证码输入错误，本次注册没有成功”。引导问题：你的体验感如何？（2分钟）学生思考、回答问题（2）演示常见注册功能实现效果：输入错误的验证码提交后，重新回到注册页面。引导问题：根据页面运行的正常要求，在验证码输入错误之后，需要实现哪些功能？给出注册效果的具体操作步骤。引入课程能力目标（3分钟）学生思考并参与讨论、听讲环节2-引用外部文件（10分钟）重点：使用include命令引用外部文件教学方法：

5、问题导向教师活动学生活动（1）启用头脑风暴问题：验证码输入错误之后，为何要引用zhuce.html文件？为后面的功能实现做准备。启用头脑风暴问题：在zhuce.php文件中何时需要引用zhuce.html文件？如何引用？使用include命令引用外部文件。（5分钟）回答问题、听课（2）启用摇一摇操作问题：完善zhuce.php文件中功能实现，实现引用zhuce.html文件。（5分钟）学生操作完成后，强调在zhuce.php文件中使用include引用zhuce.html文件，即重新运行zhuce.html文件。学生登台实操实现功能代码环节3-表单数据回填（30分钟）重点：使用JS进行表单数据

6、回填难点：数据回填教学方法：问题导向、案例演示、实训练习教师活动学生活动（1）引导问题：这样的注册效果你满意吗？演示第一种注册过程视频（“未进行数据回填”）启用头脑风暴问题：用户注册第一种处理方式体验满意度问卷调查询问学生不满意的原因。演示第二种注册过程视频。（3分钟）通过引导问题引导学生明确用户至上、提高用户友好体验度，从而更全面的考虑问题，培养精益求精的工匠精神。回答问题（2）解决重点+难点：数据回填（12分钟）先说明用户注册时候数据流向：引导问题：浏览器提交数据时，提交到哪里去了呢？引导问题：验证码输入错误时需要做什么？引导问题：验证码需要回填到注册页面吗？引导问题：密码和确认密码需要回

7、填到注册页面吗？启用抢答问题：如何获取浏览器中邮件地址文本框？启用摇一摇问题：获取文本框的语句怎样书写？能直接给文本框赋值吗？需要给文本框的哪个属性赋值？引导问题：数据回填语句能直接放到zhuce.php中吗？在PHP文件中如何把JS脚本语句输出到浏览器？教师带领学生一起实现：编写代码回填邮件地址文本框的数据。启用头脑风暴问题：要回填的邮件地址、密码、手机号码信息在客户端还是在服务器端？回填邮件地址、手机号信息时，需要设置表单元素哪个属性的取值？zhuce.php中使用什么把JS脚本输出到浏览器？听课、回答问题、跟老师一起完成功能代码（3）安排学生完成课堂练习，教师检查学生练习情况并帮助学生解

8、决问题（8分钟）启用摇一摇操作问题：完善注册功能代码，验证码错误输入错误时对用户注册信息进行回填。（5分）学生完成课堂练习学生登台实操实现功能代码（4）小结（2分钟）学生操作后，对学生练习中存在的问题进行总结。通过数据回填引导学生明确用户至上、提高用户友好体验度，从而更全面的考虑问题，培养精益求精的工匠精神。学生完成课堂练习学生登台实操实现功能代码环节4-设置验证码错误提示信息（30分钟）重点：设置验证码错误提示信息难点：如何在不同浏览器中保证错误信息的显示效果教学方法：问题导向、设置障碍、启发引导法、实训练习教师活动学生活动（1）解决重点+难点：一步步的设置障碍和启发引导，带领学生步步前行（

9、20分钟）引导问题：表单数据回填时，是否需要回填验证码信息？验证码文本框设置为空值吗？学生回答后，教师强调务必在回注册页面中提示“验证码输入错误”的信息。该信息可以放在输入验证码的文本框中，也可以放在其他合适的位置。引导问题：若在验证码文本框中进行错误信息提示，需要设置表单元素哪个属性的取值？启用摇一摇操作问题：完善注册功能代码，验证码错误输入错误时同时要在验证码文本框中显示错误提示信息“验证码输入错误，请重新输入”。完成操作后运行演示。引导问题：运行发现可以在验证码文本框中提示错误信息，但是存在两个问题，一个是提示信息不明显，二是用户输入时需要先删除文本框的内容。是否有办法解决呢？重点：设置

10、验证码文本框的placeholder属性为“验证码输入错误，请重新输入”，而不是设置value属性。强调placeholder属性再用户输入时提示内容自动消失。引导问题：解决了显示错误提示信息，但提示信息不明显，如何解决？难点：设置验证码文本框的样式类型。分两步实现：一定义样式，二指定验证码文本框的样式。强调由于浏览器的内核不同，导致不同的浏览器可能运行出来的效果不一致，为了保证错误信息提示的一致性，设置多个浏览器的该样式类型为相同格式。启用头脑风暴问题：在验证码文本框中，通过哪个属性设置验证码错误提示信息？使用哪个属性引用类名inp，设置提示信息为红色？通过引导问题引导学生明确用户至上、提高

11、用户友好体验度，从而更全面的考虑问题，培养精益求精的工匠精神。回答问题、听课（2）安排学生完成课堂练习，教师检查学生练习情况并帮助学生解决问题（10分钟）启用摇一摇操作问题：完善代码，验证码输入错误时在验证码文本框中设置错误提示信息，并用红色字体进行显示。（5分钟）学生完成课堂练习学生登台实操实现功能代码环节5-课中考核与总结（10分钟）（1）完成职教云表单数据回填相关课堂小测试（5分钟）（2）学生总结本次课的收获（2分钟）（3）教师总结重难点及学生遇到的各种问题（3分钟）课后活动学生活动（总结与能力提升）教师活动（教学总结与反思）（1）完成职教云课堂中的课后总结。（2）创新应用能力培养：课后分析常用网站提交数据的操作，若提交失败：回填哪些数据，如何提示错误信息，培养学生分析问题的创新思维和创新设计能力。（1）教学效果：本次