《网站前端技术》教案第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类型的应用”图片(详见教材)，
