目录

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标记中需要使用最大长度的属性maxlength

例如：

复选框和单选按钮：

单选按钮：

复选框：

隐藏域：收集或发送信息的不可见元素，对网页来说隐藏域是看不见的。

2.2 select标记

..标记可以在浏览 器窗口中设置下拉式菜单或者带有滚动条菜单

选项1……选项n

select标记中有几个常用属性，分别是name、size、 multiple。

name属性是用户提交表单时，服务器程序用于获取用户输人信息的名字；

size属性控制在浏览器窗口中这个菜单选项的显示条数；

multiple属性设置用户一次是否可以选择多个选项，如果缺省multiple,用户一次只能选择一个。

注意：有几个选项就需要有几个option标记

2.3 textarea标记

多行文本框标记。语法格式如下:</p> <pre><code class="language-html"><textarea name="..." cols="..." rows="..." wrap="off/virtual/physical>

其中：
(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标记

标记定义一个按钮。语法结构如下:

按钮内容

标记与相比，提供了更为强大的功能和更丰富的肉
与标记之间的所有内容都是按钮的内容。

 和的具体区别如下。
(1)关闭标记设置。禁用关闭标记,其闭合的写法: value="OK" />。的起始标记和关团标记都是必要的，例如OK
(2) 的值并不是写在value属性中， 而是在起始标记和关闭标记之间，如上
OK，的值很广泛，可以有文字、图像、移动、水平线、框架、分组框。
(3)可为button标记添加CSS样式。例如:
0K
(4)鼠标单击事件、弹出信息的代码可直接写在标记中。 例如:
按钮名称

3.5 details标记和summary标记

标记用于描述文档或文档某个部分的细节。

标记包含在

表
记中，并且是

标记的第一 个子标记，包含的内容是

标记的标题。初始时，表题对用户是可见的，用户单击标题时，会显示或隐藏details标记中的其他内容。如果需要默认状态为展开标记中设置open属性，即

例如：

显示在线用户
李四
张三
王五
赵六

结果：

3.6 progress标记

progress标记的作用是提示任务进度，这个标记可以用JavaScript脚本动态地改变当前的进度值。语法结构如下所示:

max属性:是一个数值，指明任务一共需要多少工作量。
valne属性: 是一 个数值，规定已经完成多少 工作量。
注意：value属性和max属性的值必须大于0，而且value的值需要小于或等于max属性的值

例如：

注意：IE 9或者更早版本的IE浏览器不支持 progress标签

结果：

3.7 meter标记 

meter 标记用来定义度量衡，只用于已知最大值和最小值的度量(如磁盘使用情况、查询结果的租关性等)。

注意： 标记不能当一个进度条使用，并且IE浏览器还不支持该标记。

空间剩余大小：600/1024600/1024 GB

结果：

4 综合案例：

代码演示：

学生注册信息
姓名：
    
性别：
男女保密
学历：
--请选择--小学初中高中大专本科研究生其他
出生日期：
1988200020012002200320042005200620071234567891011121234567891011121314151617
选修课程：
LinuxApacheMysqlPHP
自我评价：