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.元素的内容中,他们就会自己绑定为一个整体，前者要比后者灵活，因为后者的方式必须保证选项的文字等内容与选项控件必须紧邻.新课讲解3；【约30分钟】教师，列去框的目的主要是使用户快速、方使、正确地选择一些选项，并且节省页面空间。它是通过<se1.ect>标签和<oP1.iOn>标签来实现的。<se1.ec0标笠用于显示可供用户选择的列表框，旬个选项由一个V。Ptig标签表示，<ek1.>标签必须至少包含一个<op1.ion>标签“其中,在仃多条选项可供用户滚动查存时size谕性确定列表中可同时看到的行数；W1.eCted典性表示该选项在默认情况下是被选中的，而且个列表框中只能有一个列表项默认被选中，如同单选按钮组那样.Vbnnmc1.h(1.="post'action='">出生日期：<inpunane="byear"va1.ue="yyyy"size="4"max1.ength="4'7>年<se1.ectane="bnon">VoPtiOnVa1.UC=选择月份JVjoPnoN><op(ionva1.ue=">-fj<op<ion><op1.ionYa1.Ue="2">二月<oxion><optionva1.ue="11->H月<op<ion><optionva1.ue="12">十二月<,option><sc1.cct>月<inpu1.name=,bday"va1.uc="dd"size="2"11ux1.ength='2"f>日<form>按钮在表单中经常用到，在HTM1.5中按钮分为三种，分别是普通按钮(button),提交按钮(submit)和重置按钮(reset),普通按钮主要用来响应UnC1.iCk事件,提交按钮用来提交表单信息,重置按钮用来消除表单.中已填的信息.<1.omnw,h(xi=*gc("ac1.ion=""><p>JP名：<inutname="nane"iye="tex"xp><P>密码：<inputna11e="pass"1.ypc="passworx1."><P><P><i11put(ypc=resct"nane=*butReset"va1.ue=*rcs<按钮“i><inputtypc='submit"namc="butSubmit"va1.uc="submit按钮”><inputIyPC="button-namc="butButton"va1.ue="button按钮”onc1.ick="a1.et(his.va1.ue)"f><p>当翻要在网页中给入两行或两行以上的文本时,怎么办？显然，前面学过的文本框及我他友总元素描不能满足要求，这就应该使用多行文本框，它的标签是<extarea>,<fo11nme1.h<J="posaction="">vh4>填写个人评价<h4><P><(extarcaname="tex1.area'co1.s=40"rows='6">自信、活泼、善于思考v"cxtarca><form>文件域的作用是用于实现文件的选择.在应用时只需把type属性改为Ii1.c即可,在实际应用中文件域通常应用于文件上传的操作，如选择需要上传的文本、图片等。<omacion="mchod="pos"cnctypc="mu1.(ipart,'formdata',><P><input1.ype='fi1.e*name='fi1.es"7><br1.><input1.ype="subnit"nane="upk>ad"va1.ue="-Ef*f><p><form>新课讲解4：【约15分钟】教师：上图是用户iS行登录的个流程模拟，表单的执行晚理是用户通过网络提交表单给服务潺，等待服务器反Mu如果用户填写的表单内容不进行验证就发给服务器,那么极务着发现填写的不合法，或他没有填写，就会返回响应蛤用户，用户重新填写再提交,如此多次持续直到用户输入正确，它们之间的通信是通过网络迸行的，如果同络很差，那么注册一个账号就得花很长时间，对用户来说是非常烦的，对服务那来说也增加了其工作压力.所以在处理用户业务之前进行表单基础格式或内容的脸证就非常重要，Ur以有效地减轻服务擀的汽力：保证数据的可行性和安全性.新课讲解5：【约30分钟】我师：在HTM1.5中如何进行验证？这里主要了解以下几种方式.PIaCehoWer属性用于为inp类型的文本框提供一种提示(hint),这种提示可以描述文本册期待用户输入何种内容。在输入为空时显示，当在文本框中写入内容时消失.P1.aCehOkiCr跟性适合于input标签：text,search.uri、Cmai1.和password等类型。required属性用于规定文本框地写内容不能为空，否则不允许用户提交表单。该属性适合input标签：text、search、ur1.emai1.>password.number,checkbox.radio,fi1.e等类型.PaUCm随性用于验证表维输入的内容，通常情况下emai1.、number等，已经自带了简单的验证，加上Pauern就会更加高效，pauern的周性伯力正则表达式。注意，该属性在具有nova1.ida1.e属性的Vtbnn>元素内不生效。nova1.idate限性规定，当提交农IR时不进行验证,如果使用该电性，则表单不会验证表单的输入，以上几种特殊属性中,paucrn用来设定正则脸证规则，是最灵活也是较难理斛的.正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合，殂成一个“规则字符中”。起初是科学家研究出了一种用数学方式来描述神经网络的新方法，他们创造性地将神经系统中的神经元描述成了小而简胞的自动控制元从而作出了一项伟大的工作革新.本质上正则表达式是使用特殊符号发示一定匹配规则的字符串.刖来进行内容比对。HTM1.5标准中提供了一种不借助js进行表单验证的新方式：文本类输入框中的pattern属性中存放开发者预先设定的内容格式的正则表达式用户输入的内容必须符合正则衣达式所指的现则，否则就不能提交表单，在提交表单时做出错误信息的反馈，关于正则表达式这里不怕深入讲解，我们举几个例子，让大家在头胶中有初步的概念即可.示例：/Aa-z0-9_-6,18)W分析：两侧厂衣示正则表达式的开始与结束，开始位置与A相邻构成了八，表示正则表达式的匹配要求从目标内容的头部开始匹配：结束位置的,与相邻的S构成了SA表示正则友达式的匹也要持续到目标内容的最后.再看后面az9r表示在英文大小写字母、数字、.、一符号中，匹配任意一个，然后与前面的八相匏表示，能够正确对配的内内容要求，必须是以英文大小目字母、数字、-、一中的一种开头.维续向右若，6,18用来修饰做出相邻的内容的数St龙示左侧内容匹配6到18个，在然后与最后的S/相邻，表示目标内容要以英文大小写字母、数字、_符号中的一种结尾才能完整风配.所育最后推导出,该表示能匹配的是，由英文大小写字母、数字、-、一中任意字符纲成，且长度为6至18位的字符用新课讲解6：【约30分仲】教师：演示操作上机任务-制作信息登记页面学生：跟做新课讲解7：【约30分钟】敦师：演示操作上机任务M作用户登录页面学生:跟做新邯讲解8：【约30分钟】教师；演示操作上机任务-制作用户注册页面学生：跟做三、教学总结【的5分”】本单元主要讲述了表单的构成及如何创建表胞,然后讲述了表单控件的谱法和使用方法,然后介绍了表的验证的方法.并且完成r新云课堂项目登录页面和注册页面的搭建。通过本单元的学习,读者应该了解表单的创建方法和常用表单控件及其相关属性，能修进行表单的验证方法.为后面点节的学习打下基础.四、售后作业【的5分仲】1 .整理课程知识笔记2 .尝试完成犷展实践,参考效果图制作新店注册页面.
