目录
1. 表单的概述
1.1 表单组成
2. 表单标记
2.1 input标记
2.2 select标记
2.3 textarea标记
3.HTML5新增标记
3.1 datalist标记
3.2 date 输入类型
3.3 color输入类型
3.4 button标记
3.5 details标记和summary标记
3.6 progress标记
3.7 meter标记
4 综合案例：
1. 表单的概述
1.1 表单组成
表单由表单标签、表单域以及表单按钮组成。
1.表单标签：包含处理表单数据使用的服务器端程序的URL以及数据提交到服务器的方法。
2.表单域:包含文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等，用来收集用户需要提交到服务器的数据。
3.表单按钮:包括提交按钮、 重置按钮和普通按钮。表单按钮可以来控制其他定义了处理脚本的处理工作。
2. 表单标记
表单标记用来定义表单采集数据的范围，其起始标记和结束标记分别是
，表单标记的语法格式如下所示:其中: (1) action="URL", 用来指定服务器端处理提交表单信息的程序是什么。
(2) method="ge|post".用来指明提交表单数据到服务器所使用的传递方法。post方法的安全性比较高，传送的数据量相比get方法要大，所以一般推荐使用post方法进行数据。get方法的安全性较差， 传输的数据量小，一般限制在2 KB左右，但其执行效率比post方法高。
(3) enctye="...", enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。
(4) target.-="..."用来指定提交数据给服务器后，服务器所返回的文档结果的显示位置。该属性的取值及含义如下：
_blank:在一个新的浏览器窗口中显示文档。
_top:把文档显示在原来的最顶部浏览器窗口中，因此取消所有其他框架。
_parent:把文档显示在当前框的直接父级框中，如果没有父框时等价于_self。
_self:在当前浏览器中显示指定文档。
2.1 input标记
input标记定义的语法格式如下所示:
其中，type属性用来说明提供给用已进行信息输入的类型，例如文本框、单选按钮或复选框。
input标记type属性的属性值及说明属性值说明text单行文本框password为用户提供密码输人框radio单选按钮checkbox复选框submit提交按钮reset重置按钮button通按钮
如果需要限制用户输入数据的最大长度，在input标记中需要使用最大长度的属性maxlength
例如：
复选框和单选按钮：
单选按钮：
复选框：
隐藏域：收集或发送信息的不可见元素，对网页来说隐藏域是看不见的。
2.2 select标记
标记可以在浏览 器窗口中设置下拉式菜单或者带有滚动条菜单
……
select标记中有几个常用属性，分别是name、size、 multiple。
name属性是用户提交表单时，服务器程序用于获取用户输人信息的名字；
size属性控制在浏览器窗口中这个菜单选项的显示条数；
multiple属性设置用户一次是否可以选择多个选项，如果缺省multiple,用户一次只能选择一个。 注意：有几个选项就需要有几个option标记
2.3 textarea标记
其中： (1) name属性、多行文本框的名称， 这项是必不可少的，服务器端通过这个名字获取这文本框所输人的信息。 (2) cols属性。垂直列。在没有进行样式表设置时，该属性的值表示一行中可容纳的字数。文本框的宽度也是通过这个属性调整的。 (3) rows属性， 水平行，表示可显示的行数。如果rows=5， 表示可显示5行。超过行，需要拖动滚动条进行查看。 (4)通常情况下只有按下Enter键时才产生换行。将wrap属性设置为virtual或physical能实现自动换行功能( word wrapping )。
3.HTML5新增标记
3.1 datalist标记
datalist元素用于定义输人框的选项列表，列表通过datalist内的aption元素创建。如果用户不希望从列表中选择某项，也可以自行输大其他内容。datalist元素通常 与input元素联合使用来定义input的取值。在使用
3.2 date 输入类型
data日历的语法格式：
注意：现目前只有谷歌浏览器完全实现了日历功能。
3.3 color输入类型
color输人类型用于规定颜色，语法格式如下：
其中，value值是定义初始的默认颜色。
例如：
请选择你喜欢的颜色：
3.4 button标记
3.5 details标记和summary标记
标记包含在
例如：
- 李四
- 张三
- 王五
- 赵六
结果：
3.6 progress标记
progress标记的作用是提示任务进度，这个标记可以用JavaScript脚本动态地改变当前的进度值。语法结构如下所示:
max属性:是一个数值，指明任务一共需要多少工作量。 valne属性: 是一 个数值，规定已经完成多少 工作量。 注意：value属性和max属性的值必须大于0，而且value的值需要小于或等于max属性的值
例如：
注意：
IE 9或者更早版本的IE浏览器不支持 progress标签
结果：
3.7 meter标记
meter 标记用来定义度量衡，只用于已知最大值和最小值的度量(如磁盘使用情况、查询结果的租关性等)。
注意：
空间剩余大小：
结果：
4 综合案例：
代码演示：