《网站前端技术》教案第8课HTML与HTML5（七）.docx
.f.1.3出嗤三一；户课题第8课HTML与HTML5（七）课时2课时(90min)教学目标知识技能目标：掌握HTML5新增表单控件素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML5表单控件input新增类型，新增表单控件output教学难点：HTML5表单控件inpu新增类型教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（8min）一传授新知（25min）一头脑风暴（IOmin）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML5新增表单控件的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题HTML5表单控件input的新增类型包括哪些内容?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）2.14HTML5新增表单控件及属性2.14.1 表单控件inpul的新增类型【教师】讲解表单控件input新增类型的语法格式与示例1.数字框number当IyPe的值为number时，可获得数字框控件，它可以生成一个只能输入数字的输入框，且该输入框右侧有微调按钮，可以增减输入框中的数值，步长默认为1.【课堂互动】通过教师讲解、课堂互动、演示操作等方式，使学生了解HTML5表单控件inpul新增类型的语法及使用>»÷【学生】聆听、思考、回答数字框可以配合max和min属性使用，用于设置可微调的最大值和最小值,还可以使用SleP属性改变步长值。该控件的语法格式如下：(inputtype="number"name="控件名称"VaIUe="初始值"min="微调最小值'max="微调最大值“SteP="步长值，/><iframe>【示例2-14-1编辑HTML文档<body>标签的内容，代码如下：<body><fbnaction="">请输入一个数字：VinPUttype="number"name=',number"value="10"min=',0"max="50"1SIeP="2"/><fbrm><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”页面加载后数字框初始状态”数字框中的值增加至50不能再增力口”图片(详见教材)，并讲解效果：页面加载后,数字框中的初始值为IOe该数字框的微调最小值为0,微调最大值为50,步长值为2.当数字框中的值为0时，就不能再微调减小了；当数字框中的值为50时，就不能再微调增大了。【提示】用户可以手动输入不在0-5()范围内的值。2 .颜色选择器Color当type的值为COlor时，可获得颜色选择器控件,它可以生成一个允许用户选择颜色的颜色选择器。该控件的语法格式如下：<inputtype="color"name="控件名称"value="初始颜色值"/>【示例2-14-2编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction=",'><inputtype=",color"name="myColor"value="#FFOOOO"><inputtype=',submit"><fbrm><bo<iy>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【教师】PPt展示“颜色选择器初始效果”单击打开颜色选择器初始效果”“选择新颜色的效果”图片（详磁材），并讲解效果：页面中显示一个初始颜色为红色的颜色选择器。单击打开颜色选择器。选择新颜色，颜色选择器效果。3 .邮箱地址框email当type的值为email时，可获得邮箱地址框控件，它可以生成一个可以验证E-mail地址格式的输入框，还可以指定多个E-mail地址。若使用属性multiple='multiple",则该控件可以接受多个地址，每个地址之间用英文标点逗号隔开。该控件的语法格式如下：<inputtype="email"name="控彳S称"value="初始值"multiple="muhiple"/>【示例2-14-3编辑HTML文档<body>标签的内容，代码如下：<body><fbnaction=",'><inputtype="email"name="myEmail"value="52152l"/><inpu（lype="submit"/><fbrm><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“邮箱地址框应用初始效果”“提交时邮箱地址框内容不符合规则效果”图片（详见教材），并讲解效果：页面加载后，若输入的E-mail地址没有符号时，单击"提交"按钮会出现提示。4 .网址框IIrl当type的值为url时，可获得网址框控件，它可以生成一个能够验证URL的输入框。该控件的语法格式如下：<inputtype="url"name="密称"value="初始值"/>【示例2-14-4编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction=,",><inputtype="url"name="myUrl"VaIlIe="https:/WWW”/><inputtype="submit"/><fbrm><body>【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“网址框应用初始效果”提交时网址框内容不符合规则效果”图片（详见教材）,并讲解效果：页面加载后，将URL地址中的http:去掉，单击"提交"按钮出现提示。5 .电话号码框te】【课堂互动】中【教师】提问如何生成一个只能输入电话号码的输入框？【学生】聆听、思考、回答当type的值为Iel时，可获得电话号码框控件,它可以生成一个只能输入电话号码的输入框.该控件的语法格式如下：<inputtype="tel"name="控件名称"/>【提示】由于世界各地的电话号码格式有所差别，浏览器一般不对其做太多检直。电话号码框控件在使用上与文本域控件没有太多区别，但是在移动端，该控件则会自动唤醒数字键盘。【示例2-14-5编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction=""><inputtype="tel"name=',myTel"/><inputtype="subnit"/><fbrm><body>【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“电话号码框的应用效果”图片（详见教材），并讲解效果:在输入框中输入13555556666,单击"提交"按钮,提交的参数myTel=13555556666显示在地址栏中。6.搜索框search当type的值为search时，可获得搜索随件，它可以生成一个用于输入搜索关键字的输入框。该控件的语法格式如下：<inputtype=,'search"name="控件名称"/>【提示】搜索框控件在使用上与文本域控件没有太多区别，但是在移动端，该控件则会自动唤醒搜索键盘。【示例2-14-6编辑HTML文档VboUy>标签的内容，代码如下：<body><fbrmaction=""><inputtype="search"name="mysch"><inputIyPe="submit"><fbrm><body>【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示.A*三gfejK.U:冠:,rYJ一l'!三M2%=三-MR【教师】PPt展示”搜索框的应用效果”图片(详见教材)，并讲解效果：在搜索框中输入Web,搜索框右侧显示关闭按钮。单击"提交"按钮，提交的参数mysch=web显示在地址栏中。【学生】聆听、记录、理解头脑风暴(10min)【教师】根据头脑风暴主题,组织学生分组开展讨论根据各队伍的网站主题，讨论如何具体使用本节课中的标签设计一个右侧有微调按钮的蓝色输入框、能够验证URL的输入框，以及用于输入搜索关键字的输入框。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入(5min)【教师】提出以下问题除了之前所讲的内容外，表单控件<inpu(>还有哪些新增类型?【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(25min)1 .14.1表单控件<inpul>的新增类型【教师】讲解表单控件<input>其他新增类型的语法格式与示例7 .拖动条range当type的值为range时，可获得拖动条控件，它可以生成一个指定范围的拖动条，默认范围为0100,默认值为最大值的50%拖动条可以配合max和min属性使用，用于指定拖动条的最大值和最小值，还可以使用SIeP属性修改步长值。该控件的语法格式如下：<inputtype="range"name="控件名称"value="初始值"max="最大值"min="最小值"Slep="步长值"/>【示例2-14-7】编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction=",'><inpuitye="range"name="myrange"value=""max="80"min="0"step="2't/><inputtype="submit"/><fbn><7body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“<input>控件range类型的应用”图片(详见教材)，并讲解效果：页面中显示一个拖动条，当前值为40.单击"提交"按钮，提交的参数myrange=40显示在地址栏中。8 .曰期框date【课堂互动】中【教师】提问通过教师讲解、课堂互动、演示操作等方式，让学生了解HTML5表单控件VinPU1>新增类型及新增表单控件<output的语法及使用3如函得日期框控件？【学生】聆听、思考、回答当type的值为date时,可获得日期框控件，它可以直接输入年、月、日，或从选择器中选择日期。该控件的语法格式如下：<inputtype="date"name="控彳it称"/>【示例2-14-8编辑HTML文档<body>标签的内容，代码如下：<body><formaction=*','><inuttype="date"name="myDate"/><inputtype=',submit"/><fbrm><bo<ly>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示"曰期框的应用效果”“展开的曰期选择器“图片（详见教材），并讲解效果：页面中，可以直接输入年、月、日，也可以单击右侧图标展开选择器选择日期。9 .月份框month当type的值为month时，可获得月份框控件,它可以直接输入年和月，或从选择器中选择年和月。该控件的语法格式如下：<inputtype="mon（h"name="控件名称"/>【示例2-14-9编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction=""><inputtype="month"name="myMonth"/><inputtype="submit"/><frm><body>【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生迸行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”月份框的应用效果”“展开的月份选择器”图片（详见教材），并讲解效果：页面中，可以直接输入年和月，也可以单击右侧图标展开选择器选择箍口月。10 .星期框Week当IyPe的值为week时，可获得星期框控件，它可以直接输入年和周，或从选择器中选择年和周。该控件的语法格式如下：<inuUype="week"name="控件名称"/>（2-14-10编辑HTML文档<body>标签的内容，代码如下：<body><fbrmaction=",'><inputtype="week"name="myWeek"/><inputtype="submit”/><fbrm>>»【学生】聆听、上机操作、演示【教师】PPt展示“星期框的应用效果”展开的周选择器”图片（详见教材），并讲解效果：页面中，可以直接输入年和周，也可以单击右侧图标展开选择器选择年和周。11 .时间框time当type的值为time时，可获得时间框控件，它可以直接输入时和分，或从选择器中选择时和分。该控件的语法格式如下：<inputtype="time"name="控（i称"/>【示例2-14-11】编辑HTML文档<bcdy>标签的内容，代码如下：<body><formaction=""><inputtype="time"name="myTime"/><inputtype="submit"/><frm><body>【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”时间框的应用效果”“展开的时间选择器“图片（详见教材），并讲解效果：页面中，可以直接输入时和分，也可以单击右侧图标展开选择器选择时和分。【学生】聆听、记录、理解12 14.2新增表单控件<outut>【教师】讲解表单控件output>的语法格式与示例【课堂互动】十【教师】提问<output标签的作用是什么?【学生】聆听、思考、回答<oupw>标签用于定义不同类型的输出，如脚本输出,其可选择的属性有for、name.其中，for用于定义与输出域相关的一个或多个元素；name用于定义<output>痣牛的名称。该标签的语法格式如下：<inputtype="time"name="控彳S称"/>【示例2-14-12编辑HTML文档<body>标签的内容，代码如下：<body><h4>两个整数相乘：<h4><frmaction=""oninput="result.value=parselnt(num1.value)*ParSeInKnUm2.value)”>*"请输入一个数"/>*<inputtype="number"name="num2"id="num2"value=""placeholder=”请输入另一个数”>=<outputname="result"fbr="numlnum2"><output><fbrm><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“output控件应用初始效果”"output控件在参数输入不全时效果“图片(详见教材)，并讲解【提示】该示例中使用了CSS控制VoIHPUA标签的样式，使<outpul>标签在页面中显示为红线框。CSS的内容在后面的章节详细讲解。效果：只在一个数字框中输入数字后，等号右边红线框内显示为NaNe在另一个数字框中输入数字后，两个整数相乘的结果显示在等号右边红线框内。【学生】聆听、记录、理解上机操作(10min)【教师】组织学生分组讨论，上机完成以下任务使用<ouip11>标签输出1-100以内的斐波那契数列的和。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了HTML5表单控件<inpul>的新增类型，以及<oulpul>的相关内容，希望通过本节课的讲解，大家可以掌握这两种表单控件的语法和使用方法，提升专业技能。【学生】总结回顾知识点总结知识点，巩固学生对HTML5表单控件<input>新增类型与VoUlPU1>相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识,完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的HTML5表单控件<input>与VOUlPU1>进行设计,并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思这节课整体节奏较好，但学生主动提问较少.根据新课程的要求，教师应由传统的知识传授者转变为学生学习的组织者；教师应成为学生学习活动的引导者，而不再是主导者；教师应从"师道尊严"的架子中走出来，成为学生学习的参与者，师生合作学习，共同进步。
