任务8 制作学生信息注册表单电子教案 Web前端开发案例教程（HTML5+CSS3）中职 高三 工信版

教案名称 任务8制作学生信息注册表单 计划学时 6学时 掌握创建表单的HTL标记 知识目标 掌握表单的CSS样式控制 思政目标 引导学生做好职业规划，在课程学习中树立职业理想。 激发学生爱国热情、为科技强国而努力学习 创建表单的HTML标记 教学重点 表单的CSS样式控制 教学难点 表单的CSS样式控制 教学模式 教学做一体化 线上+线下混合教学 教学活动及主要环节 思政元素 切入点 第1、2学时 (表单的创建) 课前发布任务： 观看学习通平台相关学习视频。 随着互联 做课前测试题。 网的飞速 I.学生讨论：(10分钟) 发展，各种 智能终端 表单的标记是什么？表单控件有哪些？ 的普及，前 II.重难点内容讲授： 端开发越 一、认识表单 (5分钟) 来越受到 重视，人才 正量市能 ×+ ←C012700.1884/ab日： 需求量巨 物表单域 大，不仅仅 户g 提示信息 是普通的 ●表单拉件 静态页面， 更多的是 表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏 页面的冲 击和美感 览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应 的享受。 用程序会对这些信息进行处理并响应，这样就完成了浏览者和网站服务器之 激发学生 间的交互。 学好该门 TL5新增了很多表单控件，完善了表单的功能，新特性提供了更好的 课，成为未 用户体验和输入控制。 来的优秀 Web前端开 表单的构成： 发工程师。 ● 表单域(<form>标记)：<fom>标记是一个包含框，是包含表单控件的 容器。 提示信息：表单控件周围用于提示输入内容的文字。 ● 表单控件(<input>标记等)：用于输入用户信息的控件，如文本框、密 码框、单选按钮、复选框和按钮等。 二.表单标记(10分钟) 表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域 输入信息。可以使用<fo1m>标记在网页中创建表单。表单使用的<form>标记 是成对出现的，在开始标记<fom>和结束标记</fom>之间的部分就是一个表 单。 通过编写 表单的基本语法及格式如下。 CSS代码， <form name="表单名称”action="URL地址”method=-"提交方式 让学生了 autocomplete=-”on off”novalidate> 解代码书 000 写要遵循 </form> 规范，小错 <fom>标记主要用于处理和传送表单信息，其常用属性的含义如下。 误可能会 (1)name属性。给定表单名称，以区分同一个页面中的多个表单。 影响大局 (2)action属性。指定处理表单信息的服务器端URL。 面，要养成 (3)method属性。用于设置表单数据的提交方式，其取值为get或post。 严谨细致 其中，gt为默认值，以这种方式提交的数据将显示在浏览器的地址栏中，保 的工匠精 密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制， 神。 使用method-="post"可以大量提交数据。 (4)autocomplete属性。用于指定表单是否有自动完成功能。所谓“自 动完成”，是指将用户在表单控件中输入的内容记录下来，当再次输入时， 会将输入的历史记录显示在一个下拉列表中，以实现自动完成输入。该属性 的取值有on和off,若该属性值为on,则表示有自动完成功能，否则表示没 有。该属性是HTML5的新增属性。 (5)novalidate属性。指定在提交表单时，取消对表单进行有效性检查。 为表单设置该属性时，可以关闭整个表单的验证。该属性的取值有tnue和 false,当为tue时，表示取消表单验证。该属性是HTML5新增属性。 三.表单控件 (60分钟) l.input控件 iput控件用于定义文本框、单选按钮、复选框、提交按钮、重置按钮等。 其基本语法格式如下。 <input type="控件类型” 表8-1 input控件的type属性 属 性 属性值 作 用 text 单行文本输入框 password 密码输入框 radio 单选按钮 checkbox 复选框 button 普通按钮 submit 提交按钮 reset 重置按钮 灵活运用 image 图像形式的提交按钮 type hidden 隐藏域 各种表单 控件 file 文件域 email Email地址的输入域 url URL地址的输入域 number 数值的输入域 range 一定范围内数值的输入域 date、 time等 日期和时间的输入 search 搜索域 color 选择颜色 tel 电话号码的输入 表8-2 input控件的其它属性 属 性 属性值 作用 name 由用户自定义 控件的名称 value 由用户自定义 input控件中的默认文本值