RIZHAOPOLYTECHNIC
课题
1-4表单标记
授课班级
《Web网站开发技术》教案
课型
理实一体化
授课时数
教学目标
理解表单的构成，可以快速创建表单；掌握表单相关标记，能够创建具有相应功能的表单控件；掌握表单样式的控制，能够美化表单界面
教学重难点
教学重点：认识表单、表单元素、input元素及属性、其他表单元素、CSS控制表单样式。
措施：通过上机操作加强学习和补充案例进行巩固。
学情分析 教学效果 教后记
1 日照职业技术学院RIZHAOPOLYTECHNIC 任务1表单标记 《Web网站开发技术》教案 了解表单能够创建表单掌握表单的属性 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：浏览网页的时候，我们经常需要在表单中的文本框中填写用户名、密码等。
其实， HTML表单可以搜集不同类型的用户输入。
那么，请同学们讨论下：什么是“表单”， 以及表单都有哪些作用？ 请小组代表对以上问题发表见解。
教师对上述问题进行解释：对于“表单”大家并不陌生，它们在互联网上随处可见，例如注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单相关的标记定义的。
简单地说，“表单”是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。
知识点讲解讲解“表单的构成”
（1）、教师通过PPT对网页中常见的表单进行展示。
（2）、教师通过PPT对表单的概念及构成进行讲解，并以网页中常见表单的构成元素进行举例。
表单域(容纳表单控件和提示信息) 提示信息 表单控件(包含单行文本输入框、密码输入框、提交按钮等)
2 日照职业技术学院RIZHAOPOLYTECHNIC 《Web网站开发技术》教案
（3）、教师展示PPT，对构成表单的表单控件、提示信息和表单域进行具体讲解。
（4）、教师对如何创建表单进行讲解，并进行代码演示。
（5）、教师对常用的表单控件进行简单介绍，并进行列表说明。
（6）、学生练习，教师巡视，对疑难问题进行解答。
讲解“创建表单”
（1）、教师对“创建表单的基本语法格式”进行讲解，并举例说明。
（2）、教师指出“创建表单”时需要注意的问题，并给与解答。
（3）、学生练习，教师巡视，对疑难问题进行解答。
讲解“表单属性”
（1）、教师和学生互动：在HTML5中，表单拥有多个属性，通过设置表单属性 可以实现提交方式、自动完成、表单验证等不同的表单功能。
下面将对form标记的相关属性进行讲解。
（2）、教师指出表单属性包括action属性、method属性、name属性、plete属性及novalidate属性。
（3）、教师分别对action属性、method属性、name属性、plete属性及novalidate属性及其属性值进行讲解，并使用代码进行演示。
（4）、教师指出使用“表单属性”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
阶段小结小结重点：创建表单、表单属性。
答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与 解释。
巩固练习 巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。
以此使学生更熟练 地掌握表单相关属性，并学会如何创建表单。
通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例 对相关知识点进行巩固。
布置作业 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
预习【输入标记Input及属性】。
3 日照职业技术学院RIZHAOPOLYTECHNIC 任务2输入标记 《Web网站开发技术》教案 了解输入标记的各种属性掌握各种属性的用法。
分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 上一节中，我们认识了网页中的表单。
元素是表单中最常见的元素，网 页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。
在HTML5中， 标记通过type属性可以设置多种输入类型，请分别进行列举？ 请小组代表对以上问题发表见解。
教师对上述问题进行解释： 在HTML5中，标记拥有多种输入类型，如下表所示。
属性 属性值 描述 text 单行文本输入框 password 密码输入框 radio 单选按钮 checkbox 复选框 button 普通按钮 submit 提交按钮 reset 重置按钮 image 图像形式的提交按钮 hidden 隐藏域 type file 文件域 email e-mail
地址的输入域 url URL地址的输入域 number 数值的输入域 range 一定范围内数字值的输入域 Datepickers(date, month,week,time, 日期和时间的输入类型 datetime,datetime-local) search 搜索域 color 颜色输入类型 tel 电话号码输入类型 知识点讲解讲解“Input元素的type属性”
（1）、教师和学生互动：在HTML5中，元素拥有多个type属性值，用
4 日照职业技术学院RIZHAOPOLYTECHNIC 《Web网站开发技术》教案 于定义不同的控件类型。
那么，通过type属性可以定义哪些表单控件呢？
（2）、教师通过PPT对“Input元素的type属性”定义的单行文本输入框、单选 按钮、复选框、提交按钮、email类型、tel类型、search类型等控件进行展示。
单行文本输入框text密码输入框password单选按钮radio复选框checkbox文件域file图像域image 提交按钮重置按钮普通按钮 submitreset buttom
（3）、教师对Input元素的type属性进行讲解，并进行代码演示。
（4）教师分别对不同的type属性定义的控件类型进行展示，并对比其应用效果。
（5）、教师指出应用“Input元素的type属性”时需要注意的问题，并给予解答。
（6）、学生练习，教师巡视，对疑难问题进行解答。
讲解“Input元素的其他属性”
（1）、教师和学生互动：除了type属性之外，标记还可以定义很多其他 的属性，以实现不同的功能。
下面将介绍input元素的几种常用属性。
（2）、教师指出input元素还拥有autofocus属性、form属性、list属性、multiple属性、min、max和step属性、pattern属性、placeholder属性以及required属性。
（3）、教师分别对autofocus属性、form属性、list属性、multiple属性、min、max和step属性、pattern属性、placeholder属性以及required属性进行讲解，并进行代码演示。
（4）、教师指出应用“Input元素的其他属性”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
阶段小结小结重点：Input元素的type属性。
答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。
以此使学生更熟练地使用input元素的相关属性创建不同的表单控件。
通过“补充案例”加强学习 教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
5 日照职业技术学院RIZHAOPOLYTECHNIC 任务
3 文本域标记 《Web网站开发技术》教案 了解文本域标记掌握文本域标记的使用方法。
分组讨论对新课进行讲解前，先让学生分组讨论以下问题：浏览网页时，经常会看到输入多行文本的文本域，例如留言板、购物评论、其他 建议或意见。
那么，如何使用表单元素创建文本域效果呢？ 请小组代表对以上问题发表见解。
教师对上述问题进行解释：
在表单中，使用
措施：通过上机操作加强学习和补充案例进行巩固。
学情分析 教学效果 教后记
1 日照职业技术学院RIZHAOPOLYTECHNIC 任务1表单标记 《Web网站开发技术》教案 了解表单能够创建表单掌握表单的属性 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：浏览网页的时候，我们经常需要在表单中的文本框中填写用户名、密码等。
其实， HTML表单可以搜集不同类型的用户输入。
那么，请同学们讨论下：什么是“表单”， 以及表单都有哪些作用？ 请小组代表对以上问题发表见解。
教师对上述问题进行解释：对于“表单”大家并不陌生，它们在互联网上随处可见，例如注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单相关的标记定义的。
简单地说，“表单”是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。
知识点讲解讲解“表单的构成”
（1）、教师通过PPT对网页中常见的表单进行展示。
（2）、教师通过PPT对表单的概念及构成进行讲解，并以网页中常见表单的构成元素进行举例。
表单域(容纳表单控件和提示信息) 提示信息 表单控件(包含单行文本输入框、密码输入框、提交按钮等)
2 日照职业技术学院RIZHAOPOLYTECHNIC 《Web网站开发技术》教案
（3）、教师展示PPT，对构成表单的表单控件、提示信息和表单域进行具体讲解。
（4）、教师对如何创建表单进行讲解，并进行代码演示。
（5）、教师对常用的表单控件进行简单介绍，并进行列表说明。
（6）、学生练习，教师巡视，对疑难问题进行解答。
讲解“创建表单”
（1）、教师对“创建表单的基本语法格式”进行讲解，并举例说明。
（2）、教师指出“创建表单”时需要注意的问题，并给与解答。
（3）、学生练习，教师巡视，对疑难问题进行解答。
讲解“表单属性”
（1）、教师和学生互动：在HTML5中，表单拥有多个属性，通过设置表单属性 可以实现提交方式、自动完成、表单验证等不同的表单功能。
下面将对form标记的相关属性进行讲解。
（2）、教师指出表单属性包括action属性、method属性、name属性、plete属性及novalidate属性。
（3）、教师分别对action属性、method属性、name属性、plete属性及novalidate属性及其属性值进行讲解，并使用代码进行演示。
（4）、教师指出使用“表单属性”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
阶段小结小结重点：创建表单、表单属性。
答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与 解释。
巩固练习 巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。
以此使学生更熟练 地掌握表单相关属性，并学会如何创建表单。
通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例 对相关知识点进行巩固。
布置作业 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
预习【输入标记Input及属性】。
3 日照职业技术学院RIZHAOPOLYTECHNIC 任务2输入标记 《Web网站开发技术》教案 了解输入标记的各种属性掌握各种属性的用法。
分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 上一节中，我们认识了网页中的表单。
元素是表单中最常见的元素，网 页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。
在HTML5中， 标记通过type属性可以设置多种输入类型，请分别进行列举？ 请小组代表对以上问题发表见解。
教师对上述问题进行解释： 在HTML5中，标记拥有多种输入类型，如下表所示。
属性 属性值 描述 text 单行文本输入框 password 密码输入框 radio 单选按钮 checkbox 复选框 button 普通按钮 submit 提交按钮 reset 重置按钮 image 图像形式的提交按钮 hidden 隐藏域 type file 文件域 email e-mail
地址的输入域 url URL地址的输入域 number 数值的输入域 range 一定范围内数字值的输入域 Datepickers(date, month,week,time, 日期和时间的输入类型 datetime,datetime-local) search 搜索域 color 颜色输入类型 tel 电话号码输入类型 知识点讲解讲解“Input元素的type属性”
（1）、教师和学生互动：在HTML5中，元素拥有多个type属性值，用
4 日照职业技术学院RIZHAOPOLYTECHNIC 《Web网站开发技术》教案 于定义不同的控件类型。
那么，通过type属性可以定义哪些表单控件呢？
（2）、教师通过PPT对“Input元素的type属性”定义的单行文本输入框、单选 按钮、复选框、提交按钮、email类型、tel类型、search类型等控件进行展示。
单行文本输入框text密码输入框password单选按钮radio复选框checkbox文件域file图像域image 提交按钮重置按钮普通按钮 submitreset buttom
（3）、教师对Input元素的type属性进行讲解，并进行代码演示。
（4）教师分别对不同的type属性定义的控件类型进行展示，并对比其应用效果。
（5）、教师指出应用“Input元素的type属性”时需要注意的问题，并给予解答。
（6）、学生练习，教师巡视，对疑难问题进行解答。
讲解“Input元素的其他属性”
（1）、教师和学生互动：除了type属性之外，标记还可以定义很多其他 的属性，以实现不同的功能。
下面将介绍input元素的几种常用属性。
（2）、教师指出input元素还拥有autofocus属性、form属性、list属性、multiple属性、min、max和step属性、pattern属性、placeholder属性以及required属性。
（3）、教师分别对autofocus属性、form属性、list属性、multiple属性、min、max和step属性、pattern属性、placeholder属性以及required属性进行讲解，并进行代码演示。
（4）、教师指出应用“Input元素的其他属性”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
阶段小结小结重点：Input元素的type属性。
答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。
以此使学生更熟练地使用input元素的相关属性创建不同的表单控件。
通过“补充案例”加强学习 教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
5 日照职业技术学院RIZHAOPOLYTECHNIC 任务
3 文本域标记 《Web网站开发技术》教案 了解文本域标记掌握文本域标记的使用方法。
分组讨论对新课进行讲解前，先让学生分组讨论以下问题：浏览网页时，经常会看到输入多行文本的文本域，例如留言板、购物评论、其他 建议或意见。
那么，如何使用表单元素创建文本域效果呢？ 请小组代表对以上问题发表见解。
教师对上述问题进行解释：
在表单中，使用