《web前端技术》(赵敏)003-0教案 第6课 表单_第1页
《web前端技术》(赵敏)003-0教案 第6课 表单_第2页
《web前端技术》(赵敏)003-0教案 第6课 表单_第3页
《web前端技术》(赵敏)003-0教案 第6课 表单_第4页
《web前端技术》(赵敏)003-0教案 第6课 表单_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE1PAGE1PAGE2PAGE2

课题第6课表单课时2课时（90min）教学目标知识技能目标：掌握表单标签的使用方法和表单控件的设置方法，熟悉表单控件的属性巩固超链接标签的使用方法巩固表格标签的使用方法素质目标：（1）增加知识储备，规范编码习惯，提升职业素养（2）锻炼思维方式，加强实践练习，提升专业技能教学重难点教学重点：表单标签的使用方法教学难点：表单控件的设置方法教学方法问答法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→传授新知（25min）→实战拓展（15min）第2节课：传授新知（20min）→实战演练（20min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】通过展示一个有表单的网页，提出问题表单有什么作用？怎么往网页里添加表单？表单由哪些元素组成？接下来我们来学习表单的基本结构【学生】观看效果、聆听、理解通过网页效果展示有表单的网页，提出问题，引发思考，引入新课传授新知（25min）4.3表单4.3.1表单的基本结构【教师】展示图片“表单的基本结构”并讲解新知一个最简单的表单结构包括表单域与表单控件，……（详见教材）表单域：……（详见教材）表单控件：……（详见教材）提交按钮：……（详见教材）提示信息：……（详见教材）【学生】聆听、记录、理解4.3.2表单域【教师】讲解表单域标签并展示标签书写的格式，讲解标签属性在HTML5中，使用<form>标签标记表单域，代码具体格式为：……（详见教材）其中，action属性表示表单数据的提交地址，属性值是一个URL；method属性表示提交表单数据的方式，默认的属性值为get，一般使用post。下面对<form>标签的其他属性进行说明。下面对<form>标签的其他属性进行说明。……（详见教材）【课堂拓展】一个网页中可以包含多个<form>标签，<form>标签中也可以添加各种其他元素，如文本、图像、表格等。但需要注意的是，<form>标签中不可以包含其他<form>标签。【学生】聆听、记录、理解4.3.3常用表单控件【教师】讲解常用表单控件标签，展示表格“Type属性值及说明”，讲解标签属性，并举例说明表单控件用于收集用户在表单中输入的信息。在HTML5中，最常使用<input/>标签标记表单控件，具体格式为：<inputtype="类型"/>其中，type属性用于规定表单控件的类型……（详见教材）下面对这些常用表单控件进行详细介绍。（1）单行文本框<inputtype="text"/>，用于输入简短的文本，如用户名、账号等。（2）密码框<inputtype="password"/>，用于输入密码文本，输入的内容显示为黑色的圆点。（3）单选钮<inputtype="radio"/>，用于单项选择，如选择性别、询问意愿（是或否）等。（4）复选框<inputtype="checkbox"/>，用于多项选择（也可以只选择一项），如选择兴趣爱好、喜欢的食物等。（5）普通按钮<inputtype="button"/>，用于定义可单击的按钮，当用户单击该按钮时执行JavaScript程序。【课堂拓展】与<inputtype="button"/>类似，<button>标签也可以标记一个普通按钮，同样需要配合JavaScript使用。不同的是，<button>标签中能够放置文本、图像等内容，按钮样式更加丰富。（6）提交按钮<inputtype="submit"/>，是表单中的重要控件，用户输入信息后，需要单击提交按钮将信息传送到服务器。按钮上的文本（按钮名称）默认为“提交”，也可使用value属性设置该文本。……（详见教材）【例4-14】使用常用的表单控件制作账号信息统计单……（详见教材）【学生】观看效果、聆听、记录、理解4.3.4其他表单控件【教师】讲解其他表单控件标签及标签属性，并演示例子辅助理解在HTML5中，除了可以使用<input/>标签标记一些常用表单控件外，还可以使用<textarea>、<select>和<datalist>等标签标记文本区域、选择框、数据列表等其他表单控件。……（详见教材）【例4-15】使用文本区域及其他表单控件制作留言板……（详见教材）2．选择框在HTML5中，使用<select>标签标记选择框，具体格式为：……（详见教材）其中，<select>标签中包含一个或多个用于标记选项的<option>标签。……（详见教材）【例4-16】使用选择框、文本区域等表单控件制作校园食堂环境调查问卷……（详见教材）当选择框中选项较多时，可以在<select>标签中使用<optgroup>标签将选项分组显示，并且，使用<optgroup>标签的label属性能够为各组设置名称。……（详见教材）【例4-17】制作配送地址表单，使用<optgroup>标签将选择框中的选项分组……（详见教材）3．数据列表在浏览网页时，单击某些输入型文本框会自动打开一个含有常用内容的列表，用户可以选择列表中的选项快捷输入内容，也可以在文本框中直接输入内容。该功能是由文本框和数据列表共同实现的，具体格式为：……（详见教材）【例4-18】为“输入网址”文本框创建数据列表，……（详见教材）【课堂拓展】（1）<datalist>标签可以置于任何地方，建议将其与关联的<input/>标签放在一起。（2）设置<option>标签的label属性可以为选项增加一个说明（如“百度首页”等），选择选项后，说明内容不会跟随选项内容一同填入表单控件中。【学生】观看效果、聆听、记录、理解通过讲解，演示和课堂互动，使学生掌握表单的基本结构、表单域标签及标签属性，常用表单控件标签和标签属性实战拓展（15min）【教师】要求学生根据例子4-14到4-18的例子，制作自己队伍的项目，要求加入表单部分，可以互相讨论或询问老师【学生】讨论、思考、操作通过团队任务，拓展学生所学知识，培养学生创新能力和团协作能力第二节课传授新知（20min）4.3.5表单控件的属性【教师】讲解表单控件的属性并展示表格“表单控件的属性、属性值及说明”，并演示例子设置表单控件的属性能够限制输入的信息或设置表单控件的状态等……（详见教材）下面对表单控件的属性进行详细介绍。（1）name属性用于设置表单控件的名称，value属性用于设置表单控件的默认值，为同一个表单控件设置这两个属性之后，服务器可以通过name属性值找到对应的value属性值。【课堂拓展】在添加单选钮与复选框时，需要为同一组的选项设置相同的name属性值。例如，例4-14中的“性别”组与“兴趣”组，两组的单选钮与复选框都分别设置了相同的name属性值，从而实现单选与复选的效果。（2）readonly属性用于设置表单控件中的内容不可修改，而disabled属性用于禁用表单控件。两者都会使输入型文本框变为不可编辑状态，但readonly属性无法作用于单选钮及复选框等控件。checked属性用于设置默认选中某个单选钮或复选框。……（详见教材）【课堂拓展】正则即正则表达式，又称规则表达式，它使用特定的字符描述一种字符串匹配模式，用于检查字符串是否包含某种字符或是否符合某个条件等。正则表达式的具体内容读者可查阅相关资料。【学生】观看效果、聆听、记录、理解4.3.6提示信息【教师】讲解提示信息的含义和标签，并演示例子辅助理解提示信息一般位于对应的表单控件之前或之后，用于说明表单控件的功能或含义。在HTML5中，使用<label>标签标记表单控件的提示信息，具体格式为：……（详见教材）【课堂拓展】使用for属性绑定对应的表单控件后，在网页中单击提示信息所在区域也能够激活对应的表单控件，如选中单选钮、勾选复选框等，这大大提升了表单的可用性与可访问性。【例4-19】了解提示信息的应用，制作个人信息表（以下提供部分代码）……（详见教材）【学生】观看效果、聆听、记录、理解4.3.7表单对象分组【教师】讲解表单对象分组标签，并演示例子辅助理解对于内容较多的表单，可将表单对象分组放置以便用户理解。在HTML5中，使用<fieldset>标签为表单对象分组；使用<legend>标签设置表单分组的标题，具体格式为：……（详见教材）【例4-20】制作会员信息表，并为表单对象分组（以下提供部分代码）……（详见教材）【学生】观看效果、聆听、记录、理解通过讲解，演示和课堂互动，使学生了解表单控件的属性实战演练（20min）制作“金企鹅教育”网站的登录页面【教师】要求学生根据上课所学知识，按要求制作“金企鹅教育”网站的登录页面，遇到不会的问题可以扫描微课二维码观看视频”制作“金企鹅教育”网站的登录页面“（详见教材）也可以互相讨论“金企鹅教育”网站的登录页面用于登录该网站，下面使用表单实现该页面中登录注册模块的内容。步骤1在HBuilderX中导入本书配套素材“素材与案例\第4章\实战演练\4.3\JinqieProject”文件夹，然后打开“login.html”文档。步骤2在HBuilderX中导入本书配套素材“素材与案例\第4章\实战演练\4.3\JinqieProject”文件夹，然后打开“login.html”文档。……（详见教材）步骤3链接CSS样式表文件。在标签<head>…</head>中添加以下代码，链接CSS样式表文件“index.css”和“login.css”，即可得到如图4-28所示的页面效果。……（详见教材）【学生】聆听要求、制作项目、制作项目，观看微课【教师】安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题【学生】对比操作方法、提升操作技巧通过制作“金企鹅教育”网站的登录页面，锻炼动手操作能力，尊重学生的差异性，使每个学生都能掌握知识点课堂小结（3min）【教师】简要总结本节课的要点本节课主要讲解了HTML5中表单的相关知识。通过本章的学习，读者应重点掌握以下内容。（1）表单是实现用户与网站沟通的重要元素，主要用于数据的收集与处理。表单结构包括表单域、表单控件、提交按钮、提示信息。（2）在HTML5中，使用<form>标签标记表单域，使用<input/>标签、<textarea>标签、<option>标签标记不同的表单控件，使用<label>标签标记提示信息，使用<fieldset>标签为表单对象分组。【学生】总结回顾知识点总结知识点，巩固学生对表单的基本结构，及表单的标签和标签属性的了解作业布置（2min）【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论