HTML5 CSS3网站设计基础教程教案（人邮）第7章 表单的应用教学设计.docx

《HTML5 CSS3网站设计基础教程教案（人邮）第7章 表单的应用教学设计.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3网站设计基础教程教案（人邮）第7章 表单的应用教学设计.docx（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教学课题第四章CSS3选择器专业大 类计算机大类所属课程静态网页设计授课对 象计算机应用技术专 业学生所选教材HTM L 5+CSS3网站设计基础教程授课地 点机房授课时长6课时教学分析内容分析本课程根据计算机应用技术专业人才培养方案，确定该课程 是面向计算机相关专业的一门专业基础课，通过本课程的学习，学生 能够掌握表单的基础知识，能够在网页中创立表单来实现网上注册， 网上登录，网上交易等多种功能。学会制作各种企业、门户、电商类 网站。“HTML概述”选自HTML 5+CSS3网站设计基础教程第七章 节内容，为后面章节的学习打下良好的基础。学情分析授课对象为高职计算机应用技术专业学生。根据学生

2、学情分析如 下：1 .知识基础：本课程开设在大一第二学期，大局部学生对程序设 计语言有了一定的了解，具备一定的平面设计基础。2 .能力基础：通过前面的学习，能熟练的使用电脑，具备简单的 代码编写能力。3 .行为习惯：现代学生是生活一个信息化的时间，学生喜欢形象 化，活动式的教学内容，适应从简单到复杂的学习模式。对网页开发 比拟感兴趣，有较为丰富的网站使用经验。教学目标知识目标技能目标素养目标1 .掌握表单的定义标 签。2 .掌握表单元素及属性 设置。1 .能够创立表单。2 .能够选择正确的表单 元素和属性。3 .能够对表单界面的具 有美化的能力。1 .培养学生计算机思维 的能力，帮助学生树立

3、科学严谨的负责态度。2 .培养学生的团队协作 意识，自主解决问题的 能力。教学重点表单的创立、其他表单元素、CSS控制表单样式教学难点input元素及属性教学策略教学组织 与实施本课以学生的疑问、观点和观察结果为教学契机，采用探究式学 习方式。利用职教云平台布置课前任务，通过学生完成任务分析教学重难重点:select元素、datalist元素、label元素。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生 不理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带着学生对本课时所学知识点进行回顾。 以此使学生更熟练的了解层次选择器的使用方法。令布置作业完成“补充案例”，通

4、过平台提交给教师，教师下节课进 行点评。预习4.4节【表单新增属性】。第四课时 （表单新增属性） ，复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节 课内容。1.在网页中，如果想提高用户体验感，可以在设置单项选择或多 选时，鼠标单击选项文字可以一并选中单项选择按钮或多项选择框， 该效果如何实现？教师对上述问题进行解释：可以通过label元素”实现：label元素用于为标注（标签）文本与input元素建立关联，当用户在label元素内点击标注文本时，就会触发绑定的input控件，这时浏览 器就会自动将焦点转到相关的表单控件上。label元素不会向用户呈现任何特殊效果，但它方便鼠

5、标点击使用， 增强用户操作体验。需要注意的是，label标签的for属性应当与相关元素的id属性相同才能实现该功能。说明：教师可根据学生对上述问题的回答情况，对以上问题进 行简单讲解或直接进入本课时新内容的学习。本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：表单属性除了前面讲解的，还有没有其他的属性？ 教师对上述问题进行解释：表单还有一些新增属性：新增属性属性说明autofocus页面加载时，控件自动获得焦点form通过from元素的id使表单之外的控件与表单 建立关联list值为某个datalist元素的id,指定输入框中选 项列表，也可以输入值multiple指定输入

6、框是否可以选择多个值，适用于 email和file控件类型min、max 和 step指定输入框所允许的最小值、最大值和步长pattern正那么表达式，值为字符串，规定输入内容必须 满足何种条件placeholder显示输入框提供提示语(值)required规定输入框中的内容不能为空令知识点讲解 讲解autofocus属性”(1)、教师PPT展示对“autofocus属性”的具体格式进行 讲解。(2)、教师PPT展示对“autofocus属性”的用法进行讲解 并通过代码进行演示。讲解“form属性”(1)、教师PPT展示对“form属性”的具体格式进行讲解。(2)、教师PPT展示对“form属

7、性”的用法进行讲解并通 过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答讲解“list属性”(1)、教师PPT展示对“list属性”的具体格式进行讲解。(2)、教师PPT展示对“list属性”的用法进行讲解并通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答讲解“multiple属性”、教师PPT展示对“multiple属性”的具体格式进行讲 解。(2)、教师PPT展示对“multiple属性”的用法进行讲解并 通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答 讲解min、max和step属性”(1)、教师PPT展示对“min、max和step属性”

8、的具体格 式进行讲解。(2)、教师PPT展示对“min、max和step属性”的用法进 行讲解并通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答讲解“pattern属性”(1)、教师PPT展示对pattern属性”的具体格式进行讲 解。(2)、教师PPT展示对“pattern属性”的用法进行讲解并 通过代码进行演示，常用正那么表达式和说明见下表。(3)、教师指出应用“pattern属性”时需要注意的问题， 并给予解答。(4)、教师让学生自行尝试，理解“pattern属性”的语法, 并能灵活运用。(5)、学生练习，教师巡视，对疑难问题进行解答。正那么表达式说明A0-9*$数字Ad

9、n$n位数字Adn,$至少n位的数字Adm,n$m-n位的数字a(0|1-90-9*)$零和非零开头的数字a(1-90-9*H.0-91,2)?$非零开头的最多带两们小数的 数字八(-|+)?d+(.d+)?$正数、负数和小数Nd+$ 或八l-9d*|0$非负整数zl-9d*|0$ 或 a(- d+)|(0+)$非正整数Au4e00-uu9fa50J$汉字Aa-zA-Z0-9+$AA-Za-z0- 94,40$英文和数字Aa-zA-Z+$由26个英文字母组成的字符 串Aa-zA-Z0-9+$由数字和26个英文字母组成 的字符串Aw+$nXAw3,20$由数字、26个英文字母或下划 线组成的字符

10、串Au4E00-u9FA5A-Za-z0- 9+$中文、英文、数字包括下划线Aw+(-+.w+)*w+(-.w+)*.w+(-.w+)*$Email地址a-zA-Z+:s或 A :/(w-+.)+w-+(/w-./?%&=*)?$URL地址Ad15|d18(x|X)?$身份证号(15位、18位数 字)八(0-9)7,18仅凶?$或 Ad8,18|0-9x8,18|0-9X8,18?$以数字、字母X结尾的短身份 证号Na-zA-Za-zA-Z0-94,15$账号是否合法(字母开头，允 许516字节，允许字母数字 下划线)Aa-zA-Zw5/17$密码(以字母开头，长度为 618,只能包含字母、数

11、字和 下划线) 讲解placeholder 属性”(1)、教师PPT展示对“placeholder属性”的具体格式进行 讲解。(2)、教师PPT展示对“placeholder属性”的用法进行讲 解并通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答。讲解required属性”(1)、教师PPT展示对required属性”的具体格式进行讲 解。（2）、教师PPT展示对required属性”的用法进行讲解并 通过代码进行演示。（3）、学生练习，教师巡视，对疑难问题进行解答。令阶段小结小结重点：autofocus 属性、pattern 属性、placeholder 属性、require

12、d 属性答疑教师询问学生对于知识点还有什么不理解的地方。针对学生 不理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带着学生对本课时所学知识点进行回顾。以此使学生掌握“autofocus属性、pattern属性、placeholder 属性、required属性”等知识点。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学, 可以通过补充案例对相关知识点进行巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进 行点评。预习4.5节【表单样式案例一一登录界面】。第五课时（讲解制作登录界面），复习上节课内容在讲解本节内容前，抛出以下问题让学

13、生回答，以复习上节 课内容1、请问:正那么表达式有什么作用，适用于什么类型？答案：正那么表达式是以八开头，$结尾的字符串，规定输入内容必须 满足何种条件。pattern属性适用于的类型是:text、search urk tel、email 和 password 的input标签。说明：教师可根据学生对上述问题的回答情况，对以上问题进行 简单讲解或直接进入本课时新内容的学习。， 本课时内容学习令案例讲解案例描述登陆页面是网页最常见的界面之一，本节将通过制作一个 简单的登陆界面来巩固表单内容。默认效果如以下图所示。用户登录案例分析1. HTML标签搭建页面结构案例分为标题和表单两局部，HTML结构

14、代码如例01 02 03 04 Cneta charset=*UTF-8*05用户登录页面title)06 07 C6 8 0 12 3 4 5 611111118 0 12 3 4 5 61111111header)用户登录 ethod=*postx class=*content*input typ=*text* ”luo=用户名/input type=*text* yalue=W码)input type=*text* value：确认密码/input type=*submit* value=登录17 2 .页面结构效果图案例实现教师带着学生分步骤地进行网页制作，通过分析效果图、制 作页面、

15、制作页面链接等步骤完成页面的制作，并指出其中 需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小 组之间可以协作讨论，教师巡视，对疑难问题进行解答。令阶段小结小结重点：制作登录界面。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生 不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，让学生对制作“登录界面”进行内容的增加。 以此使学生更熟练地掌握选择正确的表单类型来的创立表 单。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学, 可以通过补充案例对相关知识点进行巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进 行点

16、评。复习本课时的所有知识点和案例，加强巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习4.6节【阶段案例一一制作用户注册页】。第六课时（讲解制作用户注册页），复习上节课内容，本课时内容学习令案例讲解案例描述本节将通过案例的形式分步骤地制作用户注册页，默认效 果如以下图所示。mpg：诲禽人用户名en：附入空码ttM： 男女部 用户注册7案例分析2.结构分析对应的结构如下图2 .样式分析效果图样式主要分为以下几个局部，具体如下： 通过最外层的大盒子对页面进行整体控制，对其设置宽高、居中 及相对定位。通过h3标签设置标题文字，对其进行背景图片及大小位置的设 置。 通过f

17、orm标签对表单进行整体控制，对其设置宽高、边距、边 框样式及绝对定位。 通过标签控制每一行的信息，对其设置外边距样式。 通过span标签控制提示信息，将其转换为行内块元素，对其设 置宽度、内边距及右对齐。 通过input标签控制输入框的宽高、内边距和边框样式。 对两个按钮进行宽高，外边距及鼠标放置上方背景颜色变化的设 置。案例实现教师带着学生分步骤地进行网页制作，通过分析效果图、制 作页面、制作页面链接等步骤完成页面的制作，并指出其中 需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小 组之间可以协作讨论，教师巡视，对疑难问题进行解答。令阶段小结小结重点：制作用户注册页。答疑

18、教师询问学生对于知识点还有什么不理解的地方。针对学生 不理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，让学生再制作一次“用户注册页”，并对其进 行个人喜好的修改。以此使学生更熟练地掌握如何使用CSS控 制表单样式。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学， 可以通过补充案例对相关知识点进行巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进 行点评。复习本课时的所有知识点和案例，加强巩固。课后教师活动学生活动教学资 源与手 段设计意图教师在职教云平 台布置拓展任 务。根据课中修改意见，继续完 善注册页面。职教云 平台作 业提交

19、功能。内化知识，学以致 用。教学评价1 .评价构成：线上学习平台记录成绩和线下实践操作成绩构成。2 .评价结果：为了多元化全过程考核评价，学生课堂学习评价表：科学量化学生 各环节学习情况；学习周报：准确呈现学生学习趋势；好友积分排行表：显示 与同学好友学习情况的比照。教学反思教学效果本教学设计采用线上线下的混合教学模式，借助信息化手段，以学生 为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教 学，同时加强专业教育，注重学生全面开展，在教学过程中注重引导 和培养学生的爱岗敬业坚持不懈的职业精神。诊改措施1 .教学过程中引入了职教云平台，平台虽然给予了学生较为中肯的建 议，但还缺乏有效

20、的监督手段。2 .在今后的工作中，将注重对学生的成长性评价，努力为学生的个性 化学习和终身学习提供帮助。点，在课堂教学中引入案例突破教学重难点，争取学生的薄弱环节布 置课后任务巩固教学知识点。整个教学采用线上线下相结合的模式，借助信息化手段，以学生 为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教 学。同时加强德育渗透，注重学生全面开展，在教学过程中注重引导 和培养学生的爱岗敬业坚持不懈的职业精神，以及精益求精开拓创新 的艺术家精神。教学方法本课程采用探究式教学方法,分为三大任务:一是基础理论局部， 通过学生讲解，教师总结。二是学生提供分析作品，在相互学习中共 同提高，加深印象。三

21、是将专业教育渗透到教学中，实践教学案例的 选取，以学生专业领域为背景，充分发挥学生的主体地位，为后续的 专业学习打下良好的基础。教学资源 与手段电子教学资料（如PPT,知识笔记，微课视频）、职教云平台等， 辅助学生自主学习和探究，解决教学重难点，提高学习效率。教学实施课前教师活动学生活动教学资 源与手 段设计意图1 .发布学习资 源，比方：教学 PPT、知识清单 等，下达任务。2 .查看学生提交 职教云平台作 业，根据提交作 业调整教学策 略，确定教学难 点。1.学生领取任务单，借助职 教云微课初步了解表单的 基础知识，能够在网页中创 建表单来实现网上注册，网 上登录，网上交易等多种功 能，并

22、具备表单美化的能 力。1.教学资 源： 教 学 PPT、知 识清单、 职教云 微课。2.教学手 段： 职教云 平台作 业提交 功能。1 .学生预习，为课中 做准备，培养学生的 自主学习能力。2 .教师通过作业反应 掌握学生的预习情 况，确定教学难点。课中教学过程第一、二课时（讲解表单的构成、创立表单、表单属性、input表单类型），复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第六 章“元素的浮动与定位”的相关知识。1.上一章“元素的浮动与定位”的学习，我们知道：给元素设置 浮动后，会出现高度塌陷的情况，请大家顾上节课的知识，M 答出现高度塌陷的原因及解决方法？ 答案：高度塌陷

23、的原因：如果某一元素没有设置高度，它的高度将由内容撑开。如 果其内容元素都设置了浮动，那么内容元素会脱离文档流，此 时，由内容撑开高度的元素没有了内容元素，那么会出现高度 塌陷。解决高度塌陷的方法：（1） 把高度写死但是一旦高度写死，父元素的高度将不能自动适应了元素的高 度，所以这种方案是不推荐使用的。（2）使用空标记清除浮动结构：属性：.cleardear: both; 使用overflow属性清除浮动 给父级元素设置属性 overflow:hidden;使用after伪对象清除浮动.box:after content:display: block;clear: both;这样做和添加一个d

24、iv的原理一样，可以到达一个相同的效果，而且不会 在页面中添加多余的div,这是我们最推荐使用的方式.说明：教师可根据学生对上述问题的回答情况，对以上问题进 行简单讲解或直接进入本课时新内容的学习。工本课时内容学习分组讨论浏览网页的时候，经常要求用户登录，在登录或者注册页面 需要在填写用户名、密码等。这些输入的信息就是表单类型。 请同学们讨论下：什么是“表单”，以及表单都有哪些作用？ 请小组代表对以上问题发表见解。教师对上述问题进行解释：教师对上述问题进行解释：，表单”类型在互联网上随处可见，例如注册登录页面中各类信息 都是用表单相关的标记定义的。简单地说，“表单”是网页上用于输入信息的区域，

25、它的主要功能 是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的 沟通。令知识点讲解教师播放微课视频学习表单的创立方法讲解“表单的创立”(1)、教师PPT展示对“表单的创立”的具体格式进行讲解。(2)、教师PPT展示对“表单的创立”的用法进行讲解并 通过代码进行演示。在HTML5中，只需要在要使用表单的地方插入 标签就可以完成表单的定义，其基本语 法格式如下：form action-嫉工地址method=提交方式name=表单名称 表单控件讲解“表单标签的属性及说明”(1)、教师PPT展示对“表单标签的属性及说明”的具体格 式进行讲解。(2)、教师PPT展示对“表单标签的属性及说明

26、”的用法进行讲解并通过代码进行演示。表单属性属性说明action指定接收并处理表单数据的服务器url地址method设置表单数据的提交方式，其取值为get 或post,默认为getname表单名称autocomplet指定表单是否有自动完成的功能novalidate规定当提交表单时不对其进行验证(3)、教师分别对action属性、method属性、name属性、 autocomplete属性及novalidate属性及其属性值进行讲 解，并使用代码进行演示。(4)、教师指出使用“表单属性”时需要注意的问题，并给 与解答。(5)、学生练习，教师巡视，对疑难问题进行解答。讲解“Input元素的ty

27、pe属性”(1)、教师和学生互动：同学们在网页中遇到过各种不同类 型的表单类型，那么，如果来定义表单控件呢？(2)、教师通过PPT对“Input元素的type属性”定义的单 行文本输入框、单项选择按钮、复选框、提交按钮、email类 型、tel类型、search类型等控件进行展示，input元素 的类型如下表所示。(3)、教师对Input元素的type属性进行讲解，并进行代 码演示。(4)教师分别对不同的type属性定义的控件类型进行展示， 并比照其应用效果。(5)、教师指出应用“Input元素的type属性”时需要注意 的问题，并给予解答。(6)、学生练习，教师巡视，对疑难问题进行解答。属性

28、类型类型说明typetext单行文本输入框password密码输入框radio单项选择按钮checkbox复选框button按钮submit提交按钮reset重置按钮image图像按钮hidden隐藏域file文本域emailE-mail地址的输入域urlURL地址的输入框number数值输入框range有取值范围的数字输入框date pickers定义日期选择框color颜色输入类型tel定义 号码输入框令阶段小结小结重点：创立表单、Input元素的type属性。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生 不理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带着

29、学生对本课时所学知识点进行回顾。 以此使学生更熟练的掌握表单相关属性和nput元素的type属性， 并学会如何创立表单。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进 行点评。预习7.3节【其他表单元素】。第三课时（讲解 textarea 元素、select 元素、datalist 元素、label 元素、 keygen 元素、output 元素），复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、以下选项中，属于input控件的有哪些？（）A、单行文本输入框B、单项选择按钮C、文本域D、动画图片答案：ABC答案解析：input控件包括单行文本输入框、

30、单项选择按钮、复 选框、提交按钮、重置按钮等。说明：教师可根据学生对上述问题的回答情况，对以上问题进 行简单讲解或直接进入本课时新内容的学习。1本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在一些表单项选择项中，有一些工程，比方所在的区域（城市，区，街道等)可以实现下拉菜单项选择择，那么表单元素下拉菜 单如何创立呢？请小组代表对以上问题发表见解教师对上述问题进行解释：在表单中，使用select控件可以定义下拉菜单效果。其中， 标记用于在表单中添加一个下拉菜单， 标记嵌套在标记中，用于定义 下拉菜单中的具体选项，每对中至少应包含一 对 。令知识点讲解讲解a text are

31、a文本域”(1)、教师PPT展示对“textarea文本域”的具体格式进 行讲解。D创立文本域X 4V C 文件 I C:/Users填写个人评价自信、大方、再欢运动(2)、教师PPT展示对“ textarea文本域”的用法进行讲 解并通过代码进行演示。(3)、教师对textarea元素的常用属性进行讲解，并进行代 码演示，常用属性见下表。(4)、教师指出应用“textarea元素”时需要注意的问题， 并给予解答。(5)、学生练习，教师巡视，对疑难问题进行解答。属性 属性说明name控件的名称rows定义多行文本输入框显示的行数讲解“ select选择列表”cols定义多行文本输入框每行中的字

32、符数readonly该控件内容只读（不能编辑修改）disabled第一次加载页面时禁用该控件（显示为灰 色）（1）、教师PPT展示对“select选择列表”的具体格式进行讲 解。工作也需泽（多送）: T Hi 广州然XT（2）、教师PPT展示对“select选择列表”的用法进行讲解并通过代码进行演示。（3）、教师对“select选择列表”元素的常用属性进行讲解, 并进行代码演示，常用属性见下表。（4）、教师指出应用“select选择列表”时需要注意的问题,并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。标签名常用属性属性说明name指定列表的名称size指定下拉菜单的可见选项数（取

33、值为 正整数），默认为1,取值大于或等于1multiple定义multiple=multiple时，下拉菜单 将具有多项选择的功能，方法为按住 Ctrl键的同时选择多项。没有该属性时 只能选择一个选项value设置选项值selected定义 selected=selectedfbt,当前项即 为默认选中项 讲解“datalist元素”(1)、教师PPT展示对“datalist元素”的具体格式进行讲解。(2)、教师PPT展示对“datalist元素”的用法进行讲解并 通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答。讲解“label元素”(1)、教师PPT展示对“label元素”

34、的具体格式进行讲解。(2)、教师PPT展示对label元素”的用法进行讲解并通过 代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答。D labe阮素的使用 C 。文件 | C:/Use用户名 性别：男回女讲解keygen元素”(1)、教师PPT展示对“keygen元素”的具体格式进行讲 解。(2)、教师PPT展示对“keygen元素”的用法进行讲解并 通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答。讲解“output元素”(1)、教师PPT展示对“output元素”的具体格式进行讲 解。(2)、教师PPT展示对“output元素”的用法进行讲解并 通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结