HTML5教案第3讲 HTML基础-form表单.doc

1、 web前端开发HTML基础（教案）教学内容及教学过程说明步骤一 问题引入网页中用户注册、问卷调查页面如下图问题1：谈谈页面都由什么元素构成？ 回答1： 。问题2：各种元素如何提交信息？回答2： 。步骤二 讲授2.1 FORM表单元素2.1.1认识FORM表单表单的主要功能是收集信息，具体来说就是收集浏览者的信息，实现交互功能，应用于调查、订购、搜索等方面。HTML表单元素form能够收集输入的信息，然后将这些信息传送到它的action属性所指示的程序中进行处理。表单从标签开始，到标签结束。表单的格式如下：其中，name属性值为表单名称；action属性指示表单的处理方式，这个值可以是一个程序

2、或脚本的完整URL；method属性用于规定使用get方法或者post方法发送表单数据，默认为get方法。get方法传输速度比post方法快，但是数据长度不能太长，而且不安全；post方法没有数据长度的限制，较为安全且常用。2.2常见表单元素2.2.1input标签（1） 标签。在HTML表单中，是最常用的标签。属性描述input type=text单行文本输入框input type=password密码输入框，输入文字用*表示input type=radio单选按钮input type=checkbox复选框input type=button普通按钮input type=submit提交按钮

3、，表示将表单内容提交服务器input type=reset复位按钮，表示清空当前表单内容，重新填写input type=hidden隐藏按钮，它不显示在页面上，但会将内容传递给服务器input type=file文件域，一般让用户填写文件路径2.2.2标签下拉列表框控件主要用来选择给定答案中的一种，这类选择答案比较多，使用单选按钮比较浪费空间。可以说，下拉列表框控件主要是为了节省页面控件设置的，主要通过标签实现。其中用来定义标签中的每个选项。浏览器将中的内容作为标签的下拉式菜单。属性描述name菜单和列表名称size显示选项的数量multiple可以借助Ctrl键实现多选value选项值sel

4、ected默认选项2.3 其他元素2.3.1 标签标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性，即当用户选择该标签时，浏览器就会自动将焦点转到标签相关的表单控件上。例如，当用户单击“用户名”时，光标就会自动定位到其右侧的文本框中，这是因为控件标签内的for=username与input标签内的id=username意义对应。2.3.2 标签（标签可以添加多行文字，一般应用于留言系统中。（3）水平线元素。水平线元素。使用标签，可以在页面中插入一条水平标尺线，使不同功能的文字隔开，便于查找阅读。例如：2.4 表单案例利用form表单及其元素实现注册页面的网页设计步骤三 课堂小结1FORM表单的含义2FORM表单中包含的元素 重点会使用表单元素设计网页步骤四 作业（1） 问题引入第1题（2）课后作业 1.单元实践操作网页设计注册页面设计。 2.FORM表单元素综合应用。通过生活实例引入form表单的概念和作用演示FORM表单的作用认识FORM表单中常用的元素Input表单元素结构及其属性 对比讲解举例讲解重点FORM表单中包含元素及其含义。举例、对比、启发教授注册页面设计及其实现举例：注册页面或者调查问卷网页设计案例在总结中提升在练习中强化教学总结