第7章　表单

网页中的表单可以用来收集用户填写的信息，如某网站的问卷调查、网站的注册会员等都会用到表单。表单可以说是个容器，里面元素的类型不同，所表示的功能也不同。表单容器里面的表单元素有文本框、密码框、单选框和复选框等，通过＜input＞标记体现它们的功能。在本章中，将会学到以下知识点：

❑表单和表单元素；

❑文本框和密码框；

❑表单；

❑单选框和复选框；

❑按钮；

❑下拉框和文本域。

7.1　表单基本语法

表单是一个能够包含表单元素的容器，表单元素是能够让用户在表单中输入信息的元素，可以这样说，表单包含表单元素。表单在动态网页中常用来收集用户的信息，保存到数据库中。表单语法是由一对＜form＞标记对组成。

＜！—设置表单标记对—＞

＜form＞＜/form＞

在上面的表单中就可以包含表单元素，用表单元素来添加信息，不同的表单元素所表现的功能不一样，如input输入类型有text、password等，分别代表的是文本和密码，下一节会讲到表单元素，代码7.1是表单的基本用法。

代码7.1　表单基本语法（源代码\第7章\表单基本语法.html）

——————————————文件名：表单基本语法.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞表单基本语法＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—设置空的表单—＞

07 ＜form＞＜/form＞

08 ＜/body＞

09 ＜/html＞

【代码解析】在代码第7行中，＜form＞＜/form＞就是表单的语法标记。

表单有两个属性会常用到，就是action和method, form中的action是表示表单提交后发送的URL地址，发送的方式用method表示，可选择的参数有GET和POST。GET传输量比较小，而POST传输值比较大，这是二者最基本的区别。一个表单除了要用表单元素外，还会用到这两个属性来传递值，值是传递给URL地址的后台，处理后保存到数据库中，本书只讲解前台页面的知识。代码7.2是表单的完整实例。

代码7.2　表单两属性（源代码\第7章\表单两属性.html）

——————————————-文件名：表单两属性.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞表单两属性＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—设置表单，并在表单中输入参数—＞

07 ＜form action="show.aspx"method="get"＞

08 ＜！—设置文本框—＞

09 ＜input type="text"＞

10 ＜br＞

11 ＜！—设置密码框—＞

12 ＜input type="password"＞

13 ＜br＞

14 ＜！—设置按钮提交—＞

15 ＜input type="button"value="提交"＞

16 ＜/form＞

17 ＜/body＞

18 ＜/html＞

【代码解析】代码第9～15行有两个输入框和一个按钮，当单击“提交”按钮后，表单中的信息通过表单元素收集值，然后通过代码第7行的get方法传到show.aspx（本页面是.net的动态页）页面。图7.1为上述代码的页面效果。

图　7.1　表单action和method

注意　action后的值因动态语言不同而后缀不一样。method的值只能是GET和POST其中的一种。

在上面的实例中可以看到，在表单里用到＜input＞语法，表示在表单中输入选项，完整的语法如下。

＜input type="#"＞

其中#代码可选项有text、password、checkbox、radio、hidden、submit和reset。分别代表：文本、密码、多选框、单选框、隐藏、提交按钮和重置按钮，这就是上面常讲到的表单元素。有关＜input＞的部分选项值，稍后做出详细讲解。

注意＜form＞与以php、aspx、jsp等为后缀的动态网页结合，所用的动态语言会不同，但用的表单和表单元素都是相同的。