HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案04 《Web前端开发技术》_第1页
HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案04 《Web前端开发技术》_第2页
HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案04 《Web前端开发技术》_第3页
HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案04 《Web前端开发技术》_第4页
HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案04 《Web前端开发技术》_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

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

文档简介

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时6授课日期教学任务《Web前端开发技术》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生交流与沟通能力；2.培养学生探究学习的能力。知识目标：1.了解表单元素的定义；2.了解制作语义化的表单；3.了解HTML5属性初步验证表单。能力目标：1.掌握使用表单元素制作登录页面基础内容；2.掌握使用表单元素属性进行简单的表单验证功能教学内容Web前端开发技术表单发送方式常用表单控件表单验证的作表单验证的方法重点难点教学重点：HTML5表单属性HTML5表单常用控件教学难点：1.在表单中使用正则验证教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：良好的沟通和交流是架起人与人之间友好往来的桥梁。而若想在页面中实现用户与后台的信息交流，表单是这里离不开的重要桥梁。通过在网页中添加表单元素，可以实现如会员注册、登录，问卷调查，在线考试，论坛分享、评论等功能。表单涉及到了信息的交互，自然也离不开数据验证的需求，对于数据的验证通常使用HTML表单元素与页面中的JavaScript脚本配合实现。但HTML5的规范中，新增了对表单内容的简单验证功能，我们应对其有一个初步的了解。新云课堂项目中需要实现登录页，注册页以及用个人信息登记页。这里就需要用的本单元的表单知识与表单验证来实现。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：表单用来进行前后端的数据交互，用户在页面中的表单内提交给服务器的数据，打包发送给接收的服务器，从而实现了数据在互联网上的传递。在表单元素内的用来接受用户输入的组件，我们称之为表单控件。这些控件有文本输入框，下拉列表，单选多选框等等，基本上满足了大多数的数据传递需求。并且在各种各样的表单中通常都至少有一个提交功能的按钮，用来触发以填写数据的提交动作的进行。例如：网站的登录页面，需要获取用户的登录名称，登录密码。网上商城的购物车，需要用户进行商品种类和内容的确定。搜索引擎，需要用户传递要搜索的内容和搜索方式。网上考试，需要考生进行题目答案的书写。在HTML中如何去实现一个表单？我们需要使用form元素去实现。form元素，即表单元素，表单元素本身并没有任何显示效果，仅用来设定表单的一些特性与包裹相关表单控件。<form><inputtype="text"name="username"placeholder="请输入登录名称"/><inputtype="password"name="userpwd"placeholder="请输入登录密码"/><inputtype="submit"value="提交"/></form>action 设定表单数据提交的目标地址method 设定表单的提交方式（GET或POST）enctype 用于指定表单内容编码方式（application/x-www-form-urlencoded、multipart/form-data或text/plain）name 用于指定表单的唯一名称target 用于指定使用哪种方式打开目标URL（_blank、_parent、_self、_top）那么method的方法中get与post有什么区别呢？先让大家看看采用post方法和get方法提交表单信息后浏览器地址栏的变化。分别使用两种方法提交表单，分别输入用户名123456和密码123456并进行表单提交。GET方式跳转到的页面：<formmethod="get"><inputtype="text"name="username"placeholder="请输入登录名称"/><inputtype="password"name="userpwd"placeholder="请输入登录密码"/><inputtype="submit"value="提交"/></form>POST方式跳转到的页面：<formmethod="post"><inputtype="text"name="username"placeholder="请输入登录名称"/><inputtype="password"name="userpwd"placeholder="请输入登录密码"/><inputtype="submit"value="提交"/></form>采用get方法提交表单信息之后，在浏览器的地址栏中，URL信息会发生变化。仔细观察不难发现，在URL信息中清晰地显示出了表单提交的数据内容，即刚刚输入的用户名和密码都完全显示在地址栏中，清晰可见。通过对比，可以发现两种提交方式之间的区别如下。（1）post方法提交方式不会改变地址栏状态，表单数据不会被显示。（2）使用get方法提交方式，地址栏状态会发生变化，表单数据会在URL信息中显示。基于以上两点区别，post方法提交的数据安全性明显高于get方法提交的数据。在日常开发中，建议大家尽可能地采用post方法来提交表单数据。学生：在开发中，会怎么选择method的方式？教师：开发过程中，凡是涉及到用户信息、长文本数据或有文件、图片上传的一律使用post方式进行提交，这样能够用户信息的泄露；而例如分页页码，搜索内容关键字或不记名推广来源等非敏感信息则可以使用get方式提交，且进行手动修改也较为便捷，并有可以提高搜索引擎收录概率。新课讲解2：【约20分钟】教师：我们将表单中为用户提供数据发送能力的各种组件称之为，表单控件。，欸个表单控件都有相应的属性进行特性设定。在表单控件中使用多的控件便是input控件。表单中大多数文本类型的输入控件都是由input标签实现的。通过设定不同的type属性值进行切换。文本框：在表单中最常用、最常见的表单输入元素就是文本框，它用于输入单行文本信息，如用户名的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text类型就可以了。密码框：在一些特殊情况下，用户希望输入的数据被处理，以免被他人得到，如密码。这时候使用文本框就无法满足要求，需要使用密码框来完成。单选框：用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钮。只有从组中选中的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显示的value属性。复选框：与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框了。复选框的命名与单选按钮有些区别，既可以多个复选框选用相同的名称，也可以各自具有不同的名称，关键是看如何使用复选框。用户可以选中某个复选框，也可以取消选中。一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。单选框、多选框有一个先天的“缺点"，就是有效地点击范围，只能通过点击圆形或方形的选择控件触发选择功能，实际上用户体验非常不好。第一，控件体积小，不容易选中；第二，控件与相关文本的关联关系相对不明确，可能因为排版等问题，选项换行容易看串行，导致错误选择的问题。学生：那么改变选择空间的大小，是否能解决呢？教师：设定合适的控件大小虽然能够解决不容易选中的问题，但并不是最佳方式。HTML中的label标签可以有效地解决上述问题。label标签标记作用，可将其他元素的点击事件绑定给指定控件，也就是说可以让某个元素有了一个“分身代表"，让"分身的点击“可以出发自己的点击效果。<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>文本框</title></head><body><formmethod="post"action="">性别：<!--label的用法一--><inputid="gen_id"name="gen"type="radio"class="input"value="男"><labelfor="gen_id">男</label><!--label的用法二--><label><inputname="gen"type="radio"value="女"class="input"/>女</label></form></body></html>首先给文字部分使用label包裹形成以的”分身代理“，然后给要被绑定的元素设定一个唯一id属性，再让label元素的for属性值完全等于被绑定元素的id值，就实现了点击触发的绑定。除了上面的方法还有方便的方式，不需要去设定id属性和for属性，而是直接将要被绑定的元素与”分身代理“元素或内容都放到label元素的内容中，他们就会自己绑定为一个整体。前者要比后者灵活，因为后者的方式必须保证选项的文字等内容与选项控件必须紧邻。新课讲解3：【约30分钟】教师：列表框的目的主要是使用户快速、方便、正确地选择一些选项，并且节省页面空间。它是通过<select>标签和<

option>标签来实现的。<select>标签用于显示可供用户选择的列表框，每个选项由一个<

option>标签表示，<select>标签必须至少包含一个<option>标签。其中，在有多条选项可供用户滚动查看时，size属性确定列表中可同时看到的行数；selected属性表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。<formmethod="post"action="">出生日期:<inputname="byear"value="yyyy"size="4"maxlength="4"/>年<selectname="bmon"><optionvalue="">[选择月份]</OPTION><optionvalue="1">一月</option><optionvalue="2">二月</option>......<optionvalue="11">十一月</option><optionvalue="12">十二月</option></select>月<inputname="bday"value="dd"size="2"maxlength="2"/>日</form>按钮在表单中经常用到，在HTML5中按钮分为三种，分别是普通按钮（button），提交按钮（submit）和重置按钮（reset），普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填的信息。<formmethod="get"action=""><p>用户名：<inputname="name"type="text"/></p><P>密码：<inputname="pass"type="password"/></P><p><inputtype="reset"name="butReset"value="reset按钮"/><inputtype="submit"name="butSubmit"value="submit按钮"/><inputtype="button"name="butButton"value="button按钮"onclick="alert(this.value)"/></p>当需要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它的标签是<

textarea>。<formmethod="post"action=""><h4>填写个人评价</h4><P><textareaname="textarea"cols="40"rows="6">自信、活泼、善于思考...</textarea></form>文件域的作用是用于实现文件的选择，在应用时只需把type属性设为file即可。在实际应用中文件域通常应用于文件上传的操作，如选择需要上传的文本、图片等。<formaction=""method="post"enctype="multipart/form-data"><p><inputtype="file"name="files"/><br/><inputtype="submit"name="upload"value="上传"/></p></form>新课讲解4：【约15分钟】教师：上图是用户进行登录的一个流程模拟，表单的执行原理是用户通过网络提交表单给服务器，等待服务器反馈。如果用户填写的表单内容不进行验证就发给服务器，那么服务器发现填写的不合法，或是没有填写，就会返回响应给用户，用户重新填写再提交，如此多次持续直到用户输入正确。它们之间的通信是通过网络进行的，如果网络很差，那么注册一个账号就得花很长时间，对用户来说是非常烦的，对服务器来说也增加了其工作压力。所以在处理用户业务之前进行表单基础格式或内容的验证就非常重要，可以有效地减轻服务器的压力；保证数据的可行性和安全性。新课讲解5：【约30分钟】教师：在HTML5中如何进行验证？这里主要了解以下几种方式。placeholder属性用于为input类型的文本框提供一种提示（hint）。这种提示可以描述文本框期待用户输入何种内容。在输入为空时显示，当在文本框中写入内容时消失。

placeholder属性适合于input标签：text、search、url、email和password等类型。required属性用于规定文本框填写内容不能为空，否则不允许用户提交表单。该属性适合input标签：text、search、url、email、password、number、checkbox、radio、file等类型。pattern属性用于验证表单输入的内容，通常情况下email、tel、number等，已经自带了简单的验证，加上pattern就会更加高效。pattern的属性值为正则表达式。注意，该属性在具有novalidate属性的<form>元素内不生效。novalidate属性规定，当提交表单时不进行验证。如果使用该属性，则表单不会验证表单的输入。以上几种特殊属性中，pattern用来设定正则验证规则，是最灵活也是较难理解的。正则表达式是对\t"/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/_blank"字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”。起初是科学家研究出了一种用数学方式来描述神经网络的新方法，他们创造性地将神经系统中的神经元描述成了小而简单的自动控制元，从而作出了一项伟大的工作革新。本质上正则表达式是使用特殊符号表示一定匹配规则的字符串，用来进行内容比对。HTML5标准中提供了一种不借助js进行

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论