HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案04 《Web前端开发技术》.docx
教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月曰教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3'b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务EWeb前端开发技术3授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索侦I1.标：1.培养学生交流与沟通能力：2. 培养学生探究学习的能力。知识目标，1.了解新华元素的定义:3. 了解制作语义化的表单：4. 了解HTM1.5属性初步脸i三表单。能力目标：1.掌握使用表单元本制作登录页面基R2.掌握使用表单元素属性进行筒中的1JJ内容；殳第5金证功旎帙学内容1 .Web前端开发技术2 .表单发送方式3 .常用表单控件1.表单验证的作5.表单验证的方法.点点教学亮点I1. IITM1.5表单属性2. IMI,5表单常用控件教学难点:1.在表单中使用正则验证教学方法谈论法、讲授法、演示法、练习法素材资*团文本素材团实物展示切PPT幻灯片口音频素材回觇频素材回动何家材0图形/图像素材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班校课可不另填写教案.教学过程及内容注解(应包含注意事项、课程思政点融入等)一、导入斫课1的6分*】教师；良好的沟通和交流是架起人与人之间友好往来的桥梁，而若想在页面中实现用户与后台的信息交流,衣做是这里黑不开的重要桥梁.通过在睥页中添加表单元素，可以实现如会员注册、登录，问卷调查，在线考试，论坛分享、评论等功能。表单涉及到了信息的交互,自然也离不开数据脸证的需求，对于数据的验证通常使用HTM1.表单元案与页面中的JavaScript脚本配合实现.但HM1.5的规范中,新增了对表单内容的向中段诃功能.我们应对其有一个初步的了M新云课堂项目中需要实现登录页,注册页以及用个人估恩登记页.这里就需要用的本单元的表总知识与表中验证来实现,二、新知识点、技能点饼解的X分仲新课讲解1：【约20分钟】教师；衣单用来进行附后端的数据交互,用户在页面中的衣单内提交给服务器的数据,打包发送给接收的附务湍.从而实现r数擀在互联网上的传递.在表单元素内的用来接受用户输入的组件.我们称之为表单控件.这些控件有文本输入枢，下拉列表，单选多选框等等，基本上满足了大多数的数据传递需求.并且在各种各样的去单中通常都至少有个提交功能的按钮，用来触发以埴写数据的提交动作的进行.例如：网站的登录页面,要获取用户的登录名称，登录密码.网上商城的购物车，需要用户进行商品种类和内容的确定，搜索引擎，需要用户传递要搜索的内容和搜索方式，网上考试，需要考生进行的目答案的竹耳。在HTM1.中如何去实现一个表单？我们需要使用form元案去实现.form元素，即表单元素，表单元索本身并没有任何显示效果，仅用来设定表单的一些特性与包及相关表单控件。<fom>VinPU1.type-"tcxt'namc-*uscrnamc"p1.aceho1.der"WJfJ1.S1f">VinPU1.type-"pssword"namc="uscrpvd"p1.acChCkiCr="请输入登录定码17><inpu<type="submit"va1.ue="提交"Z><form>action设定去单数据提交的目标地址meth1.1.设定表单的提交方式(GET或POST)cnctypc用于指定表单内容编码方式(app1.ication/X-WWw-form-codcd、mu1.tipa11i'om-daU或text/p山in)name用于指定去单的唯一名称Iarge1.用于指定使用物种方式打开目标UR1.(_b1.ank.,parent._se1.f»_top)那么method的方法中get与PoSt行什么区别呢？先让大家看看采用post方法和get方法提交表通信息后浏览器地址栏的变化.分别使用两种方法提交表总，分别输入用户名123456和密码123456并进行表单提交.GET方式跳转到的页面:<tbmnth(xi=gc(*,><i111.>ttye=,'(ex(wne=usern<n>e,'p1.aceho1.der='*if,7><inputIyPC="password“namc=''uscrpwd"p1.aceho1.der=''请输入量录密码"7><inpuiIype-"WbmiI“MuC="提交"/><ft>11n>0M/smw77XW×。4W3m*77"WM<C堂gCJwMr<Dfcop451.Mm1.iigfn12>56ftgMd2M56I©J卿em直POST方式跳转到的页面：VfOnnmethod="post,*><inputtypc=,'tcxt"namc=uscmamc"p1.aceho1.der="请输入登录名称”/><inputtype-"password'*namc="uscrpwd"P1.aCChOkkr='请输入登录密码'><inxttype="submitMVa1.Ue="提交"Z><form>4VtvWhMmnw*X4-5Jm<jM11umM04XZX+÷->CsnChe113wvwttop4SE2采用get方法提交表单信息之后.在浏览器的地址栏中UR1.信息会发生变化.仔细观察不难发现，在UR1.信息中清晰地显示出了表总提交的数据内容，即刚刚输入的用户名和密码都完全显示在地址栏中，清晰可见。通过对比,可以发现两种提交方式之间的区别如下.(I)PoM方法提交方式不会改变地址匕状态,表单数据不会被显示.(2)使用ge1.方法提交方式，地址栏状态会发生变化，表单数据会在UR1.信息中显示。基于以上两点区别.POM方法提交的数据安全性明显高于get方法提交的数据.在日常开发中，建议大家尽可能地采用post方法来提交表总数据，学生：在开发中.会忽么选择method的方式？放舶开发过程中，凡是涉及到用户信息、长文本数据或有文件、图片上传的一律使用POSt方式进行提交这样能够用户信息的泄露：而例如分贝页码,搜索内容关迸字或不记名推广来源等非敏感伯恩则可以使用get方式提交，旦进行手动修改也较为使提，并有可以提高搜索引擎收录概率，新课讲解2：【约20分忡】教师：我们将表单中为用户提供数据发送能力的各种纲件称之为，衣单控件。，蚊个表单拄件都有相应的属性进行特性设定.在表单控件中使用多的控件便是input拄件.表单中大多数文本类犷的输入控件都是由input标签实现的.通过设定不同的type展件值进行切换.文本枢：在表单中最常用、最常见的表单怆入元素就是文本根，它用于输入服行文本信息，如用户名的输入文本框，若要在文档的去单里创建一个文木框，将表单元素typeM性设为text类型就可以了.密码枢：在一些特殊情况下，用户希里输入的数据被处理,以免被他人得到，如密码.这时候使用文本框就无法满足要求，树要使用密码招来完成.单选框：用于殂相互排斥的值，组中的饵个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钿。只有从加中选中的单选按钿才会在提交的数据中提交对应的数值.在使用单选按钮时,需要一个故示的Va1.UC蛹性.我选框：与单选按钮有些类似，只不过复选框允许用户选择多个选Ji1.选框的类型是CheCkbox,即将衣单元案的IyPC属性设为checkbox就可以创建个红选梅1.狂选枢的命名与单选按钮有些区别.既可以多个更选柢选用相同的名称,也可以各自具有不同的名称,美城是看如何使用更选框.用户可以选中某个应选枢，也可以取消选中.一旦用户选中了某个夏选框，在女单提交时，会将该复选框的name值和对应的VaIUe值一起提交。单选枢、多选框有一个先天的“缺点”，就是有效地点击范困，只能通过点击圆形或方形的选择控件触发选择功能,实际上用户体验非常不好.第一，控件体积小，不容易选中：第：.控件与相关文本的关联关系相对不明确,可能因为排版等问题，选项换行容易看串行，导致拙误选择的向胞。学生：那么改变选择空间的大小，是否能解法呢？教师：设定合适的控件大小虽然能膨解决不容物选中的向阳.但并不是最佳方式.HTM1.中的Iabd标签可以有效地解决上述问题，Iabd标签标记作用，可将其他元素的点击3件绑定给指定控件，也就是说可以让某个元素有了一个“分身代表让分身的点击“可以出发自己的点击效果.v!DOCTYPEhtm1.><htn1.>Vhead1.ang="en">VmCtacharsct="U'F-8'>VtiUO文本柢v1.it1.c><.,ead><body>VfOnTImcth<1.="post"action="*>性别：<!-1.abe1.的用法-><i11putid="gcn_id"namc="gen"type="radio'C1.aSs="inpu1."va1.ue="男”><1.ahc1.fbr="gen-id"><1.abc1.><!-1.abe1.的用法：><1.abe1.><inputnamc="gcn"typc="radio'va1.ue=""c1.ass="input">女<1.abc1.><fbrm><body><htm1.>首先给文字部分使用Iahe1.包襄形成以的“分身代理“，然后给要被绑定的元素设定一个唯一idW性，再让Iabd元素的frW性值完全等于被绑定元素的id做，就实现了点击触发的绑定，除了上面的方法还有方便的方式，不需要去设定id属性和for属性，而是由接将要被绑定的元素与"分身代理“元素或内容都放到IabC1.元素的内容中,他们就会自己绑定为一个整体，前者要比后者灵活，因为后者的方式必须保证选项的文字等内容与选项控件必须紧邻.
