版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3
课题第8课HTML与HTML5（七）课时2课时（90min）教学目标知识技能目标：掌握HTML5新增表单控件素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML5表单控件<input>新增类型，新增表单控件<output>教学难点：HTML5表单控件<input>新增类型教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（25min）→头脑风暴（10min）第2节课：→传授新知（25min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解HTML5新增表单控件的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤
（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题HTML5表单控件<input>的新增类型包括哪些内容？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知
（25min）2.14HTML5新增表单控件及属性2.14.1表单控件<input>的新增类型【教师】讲解表单控件<input>新增类型的语法格式与示例1.数字框number当type的值为number时，可获得数字框控件，它可以生成一个只能输入数字的输入框，且该输入框右侧有微调按钮，可以增减输入框中的数值，步长默认为1。【课堂互动】✈【教师】提问数字框可以配合哪些属性使用？✈【学生】聆听、思考、回答数字框可以配合max和min属性使用，用于设置可微调的最大值和最小值，还可以使用step属性改变步长值。该控件的语法格式如下：<inputtype="number"name="控件名称"value="初始值"min="微调最小值"max="微调最大值"step="步长值"/></iframe>【示例2-14-1】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> 请输入一个数字： <inputtype="number"name="number"value="10"min="0"max="50"step="2"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“页面加载后数字框初始状态”“数字框中的值增加至50不能再增加”图片（详见教材），并讲解效果：页面加载后，数字框中的初始值为10。该数字框的微调最小值为0，微调最大值为50，步长值为2。当数字框中的值为0时，就不能再微调减小了；当数字框中的值为50时，就不能再微调增大了。【提示】用户可以手动输入不在0-50范围内的值。2.颜色选择器color当type的值为color时，可获得颜色选择器控件，它可以生成一个允许用户选择颜色的颜色选择器。该控件的语法格式如下：<inputtype="color"name="控件名称"value="初始颜色值"/>【示例2-14-2】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="color"name="myColor"value="#FF0000"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“颜色选择器初始效果”“单击打开颜色选择器初始效果”“选择新颜色的效果“图片（详见教材），并讲解效果：页面中显示一个初始颜色为红色的颜色选择器。单击打开颜色选择器。选择一个新颜色，颜色选择器效果。3.邮箱地址框email当type的值为email时，可获得邮箱地址框控件，它可以生成一个可以验证E-mail地址格式的输入框，还可以指定多个E-mail地址。若使用属性multiple="multiple"，则该控件可以接受多个地址，每个地址之间用英文标点逗号隔开。该控件的语法格式如下：<inputtype="email"name="控件名称"value="初始值"multiple="multiple"/>【示例2-14-3】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="email"name="myEmail"value="521521@"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“邮箱地址框应用初始效果”“提交时邮箱地址框内容不符合规则效果”图片（详见教材），并讲解效果：页面加载后，若输入的E-mail地址没有@符号时，单击“提交”按钮会出现提示。4.网址框url当type的值为url时，可获得网址框控件，它可以生成一个能够验证URL的输入框。该控件的语法格式如下：<inputtype="url"name="控件名称"value="初始值"/>【示例2-14-4】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="url"name="myUrl"value=""/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“网址框应用初始效果”“提交时网址框内容不符合规则效果”图片（详见教材），并讲解效果：页面加载后，将URL地址中的http://去掉，单击“提交”按钮出现提示。5.电话号码框tel【课堂互动】✈【教师】提问如何生成一个只能输入电话号码的输入框？✈【学生】聆听、思考、回答当type的值为tel时，可获得电话号码框控件，它可以生成一个只能输入电话号码的输入框。该控件的语法格式如下：<inputtype="tel"name="控件名称"/>【提示】由于世界各地的电话号码格式有所差别，浏览器一般不对其做太多检查。电话号码框控件在使用上与文本域控件没有太多区别，但是在移动端，该控件则会自动唤醒数字键盘。【示例2-14-5】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="tel"name="myTel"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“电话号码框的应用效果”图片（详见教材），并讲解效果：在输入框中输单击“提交”按钮，提交的参数myTel示在地址栏中。6.搜索框search当type的值为search时，可获得搜索框控件，它可以生成一个用于输入搜索关键字的输入框。该控件的语法格式如下：<inputtype="search"name="控件名称"/>【提示】搜索框控件在使用上与文本域控件没有太多区别，但是在移动端，该控件则会自动唤醒搜索键盘。【示例2-14-6】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="search"name="mysch"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“搜索框的应用效果”图片（详见教材），并讲解效果：在搜索框中输入web，搜索框右侧显示关闭按钮。单击“提交”按钮，提交的参数mysch=web显示在地址栏中。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解HTML5表单控件<input>新增类型的语法及使用头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何具体使用本节课中的标签设计一个右侧有微调按钮的蓝色输入框、能够验证URL的输入框，以及用于输入搜索关键字的输入框。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题除了之前所讲的内容外，表单控件<input>还有哪些新增类型？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知
（25min）2.14.1表单控件<input>的新增类型【教师】讲解表单控件<input>其他新增类型的语法格式与示例7.拖动条range当type的值为range时，可获得拖动条控件，它可以生成一个指定范围的拖动条，默认范围为0～100，默认值为最大值的50%。拖动条可以配合max和min属性使用，用于指定拖动条的最大值和最小值，还可以使用step属性修改步长值。该控件的语法格式如下：<inputtype="range"name="控件名称"value="初始值"max="最大值"min="最小值"step="步长值"/>【示例2-14-7】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="range"name="myrange"value=""max="80"min="0"step="2"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“<input>控件range类型的应用”图片（详见教材），并讲解效果：页面中显示一个拖动条，当前值为40，单击“提交”按钮，提交的参数myrange=40显示在地址栏中。8.日期框date【课堂互动】✈【教师】提问如何获得日期框控件？✈【学生】聆听、思考、回答当type的值为date时，可获得日期框控件，它可以直接输入年、月、日，或从选择器中选择日期。该控件的语法格式如下：<inputtype="date"name="控件名称"/>【示例2-14-8】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="date"name="myDate"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“日期框的应用效果”“展开的日期选择器“图片（详见教材），并讲解效果：页面中，可以直接输入年、月、日，也可以单击右侧图标展开选择器选择日期。9.月份框month当type的值为month时，可获得月份框控件，它可以直接输入年和月，或从选择器中选择年和月。该控件的语法格式如下：<inputtype="month"name="控件名称"/>【示例2-14-9】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="month"name="myMonth"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“月份框的应用效果”“展开的月份选择器“图片（详见教材），并讲解效果：页面中，可以直接输入年和月，也可以单击右侧图标展开选择器选择年和月。10.星期框week当type的值为week时，可获得星期框控件，它可以直接输入年和周，或从选择器中选择年和周。该控件的语法格式如下：<inputtype="week"name="控件名称"/>【示例2-14-10】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="week"name="myWeek"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“星期框的应用效果”“展开的周选择器“图片（详见教材），并讲解效果：页面中，可以直接输入年和周，也可以单击右侧图标展开选择器选择年和周。11.时间框time当type的值为time时，可获得时间框控件，它可以直接输入时和分，或从选择器中选择时和分。该控件的语法格式如下：<inputtype="time"name="控件名称"/>【示例2-14-11】编辑HTML文档<body>标签的内容，代码如下：<body> <formaction=""> <inputtype="time"name="myTime"/> <inputtype="submit"/> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“时间框的应用效果”“展开的时间选择器“图片（详见教材），并讲解效果：页面中，可以直接输入时和分，也可以单击右侧图标展开选择器选择时和分。【学生】聆听、记录、理解2.14.2新增表单控件<output>【教师】讲解表单控件<output>的语法格式与示例【课堂互动】✈【教师】提问<output>标签的作用是什么？✈【学生】聆听、思考、回答<output>标签用于定义不同类型的输出，如脚本输出，其可选择的属性有for、name。其中，for用于定义与输出域相关的一个或多个元素；name用于定义<output>控件的名称。该标签的语法格式如下：<inputtype="time"name="控件名称"/>【示例2-14-12】编辑HTML文档<body>标签的内容，代码如下：<body> <h4>两个整数相乘：</h4> <formaction=""oninput="result.value=parseInt(num1.value)*parseInt(num2.value)"> <inputtype="number"name="num1"id="num1"value=""placeholder="请输入一个数"/>* <inputtype="number"name="num2"id="num2"value=""placeholder="请输入另一个数"/>= <outputname="result"for="num1num2"></output> </form></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“output控件应用初始效果”“outpu
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年统计工作计划与安排
- 护士个人年度工作计划汇编
- 加油站安全工作隐患排查计划
- 2024年小学英语老师的个人工作计划
- 2024年中学教师师德工作计划
- 幼儿园小班个人教学工作计划
- 2024年1月美术初级班教学工作计划
- 2024开学新计划作文
- 整学期教学计划音乐模板集合
- 初中语文教研个人计划第二学期例文
- 如何在公司中实现自我价值课件
- 最全逆做法顶管井专项施工方案
- 护理部不良事件记录本
- 乒乓球反手推档.课件
- 各少数民族的风俗习惯课件
- 优秀质量检验员培训教材
- 五年级下册道德与法治6《我参与我奉献》教学反思2篇
- 中国新闻事业发展史 第十四讲 社会主义新闻事业的曲折发展课件
- 部编版一年级上册语文期末试卷
- 梁祝音乐钢琴五线谱
- 班级卫生常规检查评分表
评论
0/150
提交评论