《网站前端技术》教案第9课HTML与HTML5（八）.docx

《《网站前端技术》教案第9课HTML与HTML5（八）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第9课HTML与HTML5（八）.docx（14页珍藏版）》请在优知文库上搜索。

1、课题第9课HTML与HTML5（八）课时2课时(90min)教学目标知识技能目标：掌握HTML5新增的表单控件属性素质目标：（1）加强理论基础，提升专业技能（2）制作百度首页，锻炼实践能力，从而达到学以致用的目的教学重难点教学重点：HTML5表单控件的新增属性教学难点：HTML5表单控件的新增属性、制作百度首页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（IOmin）第2节课：问题导入（3min）一传授新知（17min）T综合案例（20min）一课堂小

2、结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML5新增表单控件属性的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP迸行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题HTML5表单控件有哪些新增属性？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴

3、趣传授新知（28min）2.14.3HTML5表单控件的新增属性【教师】讲解HTML5表单控件新增属性的使用与示例1.placeholder属性P山CehOlder属性一般用于提示用户可输入的预期信息。当用户输入时，提示文本消失。【示例2-14-3编辑HTML文档标签的内容，代码如下：账号:通过教师讲解、课堂互动、演示操作等方式，使学生了解HTML5表单控件新增属性的语法及使用密码：【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“placeh。Ider属性的应用效果”“输入内容后”图片（详见教材），并

4、讲解效果：用户输入账号和密码时，提示内容立即消失，刷新页面，页面变回初始状态。2. form属性form属性用于设置控件属于哪个表单，可以将表单控件置于标签之外。它的值为某个表单的id值。【课堂互动】十【教师】提问HTML中的form属性如何应用？十【学生】聆听、思考、回答【示例2-14-14编辑HTML文档VbO标签的内容，代码如下：5：密码：【教师】PPt展示“form属性的应用效果”图片（详见教材），并讲解效果：HTML文件中提交按钮位于表单之外，但是页面中，提交按钮仍然可以提交数据，且提交后的数据作为参数跟在页面URL后面。3. formaction属性formaction属性用5领定

5、提交表单雌的目标地址。它可以覆盖Mrm漏签的action属性,还可以为不同的submil按钮设置不同的表单数醴交地此该属性的取值为发送表单数据的地址。【示例2-14-15编辑HTML文档标签的内容，代码如下：账号：密码：【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“formaction属性的应用效果”“表单数据提交到不同的目标地址“图片（详见教材），并讲解效果：输入信息并单击登录按钮后，地址栏中的?参数前面是login；单击“注册按钮后，地址栏中的？”参数前面是regist4. formmethod

6、属性formme（hoci属性用于规定将表单发送到action属性规定的地址中的方法。【课堂互动】十【教师】提问formmethod属性的作用是什么？【学生】聆听、思考、回答它可以覆盖标签的method属性，还可以为不同的submit按钮设置不同的表单数据发送方法。该属性的取值有get（默认值）和post.【示例2-14-16编辑HTML文档标签的内容,代码如下：账号：密码：【教师】PPt展示“不同的formmethod属性值的不同效果”图片（详见教材），并讲解效果：页面初始状态与form属性应用效果相同，当输入信息并单击登录按钮后，地址栏中会显示提交的表单触。但是，单击注册按钮后，地址栏不会

7、显示提交的表单蝇5. formenctype属性formenctype属性用于规定表单数据提交到服务器时的编码方式。它可以覆盖标签的enctype属性,还可以为不同的submit按钮设置不同的表单数据编码方式.该属性的值有aplica（ionx-www-form-urlencoded（默认值）、mullipartform-da（axIeXUPlaino【示例2-14-17编辑HTML文档标签的内容，代码如下：【教师】PPt展示“formenctype属性的应用效果”图片（详见教材），并讲解【课堂互动】十【教师】提问HTML中的formtarget属性怎么应用？十【学生】聆听、思考、回答【课堂互

8、动】十【教师】提问autocomplete属性有什么作用?【学生】聆听、思考、回答效果：填写账号与密码，无论选择那种提交方式，地址栏中都会显示提交的表单数据。6. formtarget 属性formtarget属性用于规定提交表单数据后页面地址的打开方式。它可以覆盖Ibrm标签 的target属性，还可以为不同的submit按钮设置不同的页面地址打开方式.该属性的值有 .self （默认值）和-blank【示例2-14-18编辑HTML文档标签的内容，代码如下：贝长号：密码：账号：inputtype=lextname=,usejaccounr,PIaCehoIder=请输入您的账号,密码：效果

9、：填写账号与密码，单击提交按钮会在当前窗口打开页面；单击打开一个新窗口”按钮会在新窗口打开页面。7. autocomplete属性4autocomplete属性用于规定输入字段是否开启自动完成功能，其取值有on（默认值）和off.当属性值为on时，启动自动完成功能；属性值为Off时，禁用自动完成功能。【示例2-14-19编辑HTML文档标签的内容,代码如下：账号：密码：效果：提交过信息后，再次输入时，输入框下方就会出现最近的历史输入信息。若属性autocomplete=offz则输入框下方不会出现历史输入信息。8. autofocus属性auiof。CuS属性用于规定页面加载后表单控件自动获得焦点，其取值为autofocus.【示例2-14-20编辑HTML文档标签的内容,代码如下：账号：密码：【教师】PPt展示“autof。CUS属性的应用效果”图片（详见教材），并讲解效果：页