请用微信扫码

扫二维码

关闭

中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务8 制作学生信息注册表单 教案（表格式）

资源下载
资源下载
  1. 二一教育资源

中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务8 制作学生信息注册表单 教案（表格式）

2023-10-24 00:00 71 电子与信息大类 2.12M [教案]

资源简介

教案名称 任务8 制作学生信息注册表单 计划学时 6学时
知识目标 掌握创建表单的HTML标记掌握表单的CSS样式控制
思政目标 引导学生做好职业规划，在课程学习中树立职业理想。激发学生爱国热情、为科技强国而努力学习
教学重点 创建表单的HTML标记表单的CSS样式控制
教学难点 表单的CSS样式控制
教学模式 教学做一体化线上+线下混合教学
教学活动及主要环节 思政元素切入点
第1、2学时（表单的创建）课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（10分钟）表单的标记是什么？表单控件有哪些？II.重难点内容讲授：认识表单 （5分钟） 表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理并响应，这样就完成了浏览者和网站服务器之间的交互。HTML5新增了很多表单控件，完善了表单的功能，新特性提供了更好的用户体验和输入控制。表单的构成：表单域（标记）：标记是一个包含框，是包含表单控件的容器。提示信息：表单控件周围用于提示输入内容的文字。表单控件（标记等）：用于输入用户信息的控件，如文本框、密码框、单选按钮、复选框和按钮等。表单标记 （10分钟）表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域输入信息。可以使用标记在网页中创建表单。表单使用的标记是成对出现的，在开始标记和结束标记

之间的部分就是一个表单。表单的基本语法及格式如下。
……
标记主要用于处理和传送表单信息，其常用属性的含义如下。（1）name属性。给定表单名称，以区分同一个页面中的多个表单。（2）action属性。指定处理表单信息的服务器端URL。（3）method属性。用于设置表单数据的提交方式，其取值为get或post。其中，get为默认值，以这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，使用method="post"可以大量提交数据。（4）autocomplete属性。用于指定表单是否有自动完成功能。所谓“自动完成”，是指将用户在表单控件中输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表中，以实现自动完成输入。该属性的取值有on和off，若该属性值为on，则表示有自动完成功能，否则表示没有。该属性是HTML5的新增属性。（5）novalidate属性。指定在提交表单时，取消对表单进行有效性检查。为表单设置该属性时，可以关闭整个表单的验证。该属性的取值有true和false，当为true时，表示取消表单验证。该属性是HTML5新增属性。表单控件 （60分钟）1．input控件input控件用于定义文本框、单选按钮、复选框、提交按钮、重置按钮等。其基本语法格式如下。表8-1 input控件的type属性属 性属 性 值作 用typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emailEmail地址的输入域urlURL地址的输入域number数值的输入域range一定范围内数值的输入域date、time等日期和时间的输入search搜索域color选择颜色tel电话号码的输入表8-2 input控件的其它属性属 性属 性 值作 用name由用户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设置是否自动完成表单字段的内容autofocusautofocus设置页面加载后是否自动获取焦点formform元素的id设置字段隶属于哪个表单listdatalist元素的id设置字段的数据值列表multiplemultiple设置输入框是否可以选多个值min、max、step数值设置最小值、最大值及步进值pattern字符串设置正则表达式，验证数据合法性placeholder字符串提供提示requiredrequired输入框中不能为空IV.课堂小结： （5分钟）理解表单的概念及组成，能够利用表单控件书写简单的表单。课后作业1： 超星学台作业。课后作业2：借助超星学习平台的教学视频进行线下自学第3、4学时（表单控件、CSS设置表单样式）课前发布任务：观看学台相关学习视频。做课前测试题。I.复习提问：创建表单域的标记？II.导入新课：（5分钟） 分组讨论：利用前面所学知识，能否实现下拉菜单及多行文本框？（学生讨论，参与互动）III.重难点内容讲授： 一、表单控件 （30分钟） 1．textarea控件当定义input控件的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制时，就需要使用标记。例如，输入个人简历时的控件就是textarea控件。其基本语法格式如下。举例说明其常用属性：2．select控件select控件提供下拉列表选项，供用户进行选择。下拉框通过select标记和option标记来定义。例如，在用户注册表单中，职业的选择项就使用下拉列表实现。其基本语法格式如下。举例说明其常用属性需要注意的是：多选和单选下拉列表的区别在于是否设置标记定义各种按钮时，通常需要清除其边框。（3）通常情况下，需要对文本框和密码框设置2～3px的内边距，以使用户输入的内容不会紧贴输入框。课后作业1： 超星学台作业。课后作业2：借助超星学习平台的教学视频进行线下自学第5、6学时（制作学生信息注册页面）课前发布任务：观看学台相关学习视频。做课前测试题。I.重难点内容讲授： （70分钟）【任务实现】制作学生信息注册页面使用前面所学的表单知识构建学生信息注册表单，并使用CSS定义表单样式，页面浏览效果如下图所示。具体要求如下：（1）定义表单域。（2）使用表单控件定义各输入控件。（3）使用标记的按钮属性定义提交和重置按钮。（4）通过CSS整体设置表单样式。分析结构 （10分钟）搭建结构 （20分钟）此时浏览网页，效果如图所示定义样式 （40分钟）搭建表单结构后，使用CSS内部样式表定义表单各元素样式，将该部分代码放入和标记之间，样式表代码如下。 II.拓展练习 （15分钟）学生自行尝试。小组成员之间协作讨论，教师巡视，对疑难问题进行解答。III.课堂小结： （5分钟）本任务围绕登录和注册表单的制作，介绍了表单的创建，主要包括表单相关标记以及如何使用CSS定义表单的样式，最后综合利用这些知识完成了学生信息注册表单的制作。课后作业1： 超星学台作业。课后作业2：借助超星学习平台的教学视频进行线下自学 随着互联网的飞速发展，各种智能终端的普及，前端开发越来越受到重视，人才需求量巨大，不仅仅是普通的静态页面，更多的是页面的冲击和美感的享受。激发学生学好该门课，成为未来的优秀Web前端开发工程师。通过编写CSS代码，让学生了解代码书写要遵循规范，小错误可能会影响大局面，要养成严谨细致的工匠精神。灵活运用各种表单控件分小组讨论过程中，培养学生团队合作，共同探讨的协作意识，培养同学们良好的沟通能力，为以后进入工作岗位打下良好的基础。学习源码的过程就像是良好行为习惯养成的过程。在学习过程中去体会、感悟、内化，并外化成良好的行为习惯。培养学生独立思考的能力任务完成过程中，提高学生对美的鉴赏能力。鼓励学生除了完成任务外，可以运用头脑风暴、发散思维，结合相关知识点，充分发挥自己的创新意识和主观能动性，实现更加丰富的网页效果。

展开更多......

收起↑

资源预览

缩略图、资源来源于二一教育资源库