第5章 表单与表单效果设计-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第5章 表单与表单设计效果 计划学时 6学时 内容分析 本章介绍了表单的<form>标签、<input>标签、<select>标签、<textarea>标签、<fieldest>标签，新增的表单控件，以及border-radius属性、box-shadow属性、background-size属性 教学目标 与 教学要求 【知识目标】 1. 了解表单的组成 2. 理解get方式与post方式的区别 3. 掌握<fieldset>标签的使用 4. 认识表单新增控件 【技能目标】 1. 掌握<form>标签、<input>标签、<select>标签、<textarea>标签的应用 2. 掌握border-radius属性、box-shadow属性、background-size属性的应用 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握<input>标签的各个控件，掌握<select>标签、<textarea>标签的使用，掌握border-radius属性、box-shadow属性、background-size属性的应用 教学难点 实现本章节的3个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （表单组成、<form>标签） 一、提出需求，导入学习任务 （1）思考如何创建表单以及对表单进行效果设计。 · 进入一个新的网站后，用户通常需要进行注册或登录验证，这就需要使用到表单。网站中的用户登录、注册页面，以及一些收集用户反馈信息的调查表，就是通过表单制作的。表单作为用户与网页之间重要的交互工具，了解和掌握表单的应用是十分重要的。 （2）明确学习方向。 · 了解表单的组成 · 理解get方式与post方式的区别 · 掌握<form>标签 二、知识讲解 （一）表单的组成 1.概述 表单是网页中常用的一种展示效果，如登录页面中的用户名和密码的输入、登录按钮等都是用表单的相关标签定义的。表单是HTML中获取用户输入的手段，它的主要功能是收集用户的信息，并将这些信息传递给后台服务器，实现用户与Web服务器的交互。 2.组成 HTML中，一个完整的表单通常由表单元素、提示信息和表单域3个部分组成。 · 表单元素 · 提示信息 · 表单域 （二）<form>标签 1.定义 HTML中<form>标签用于定义表单域，即创建一个表单，用来实现用户信息的收集和传递，<form></form>标签中的所有内容都会提交给服务器。 <form>标签的语法格式如下所示。 <form action="URL地址" method="数据提交方式"> 表单元素和提示信息 </form> 2.标签属性 （1）action属性 action属性可定义表单数据的提交地址，即一个URL地址。HTML表单要想和服务器进行连接，就需要在action属性上设置一个URL。例如，两个人要打电话就必须要知道对方的电话号码，URL就相当于电话号码。action属性用于指定接收并处理表单数据的服务器的URL地址。 （2）method属性 method属性规定如何发送表单数据（表单数据发送到action属性所规定的页面）。表单数据有常用的get（默认）和post两种提交方式，表单数据可以作为URL变量（method="get"）或者HTTP post（method="post"）的方式来发送。 · get方式 · post方式 （3）enctype属性 enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。enctype属性可取值为application/x-www-form-urlencoded、multipart/form-data和text/plain。 · application/x-www-form-urlencoded · multipart/form-data · text/plain （4）target属性 target属定义提交地址的打开方式，常用的打开方式有_self（默认）和_blank。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第二学时 （<input>标签、<label>标签） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节课内容，引出本节课主题。 （3）明确学习方向。 · 掌握<input>标签的各控件 二、知识讲解 （一）<input>标签 1.定义 <input>标签用于搜集用户信息，是一个单标签。网页中经常会包含有单行文本框、密码文本框、单选框、提交按钮等，要想定义