2.5　表单

表单是用户在Internet上交换彼此的看法和意见，互相了解对方对问题的见解的最常用的基本手段。在HTML语言中，实现交换信息的基本方法就是使用表单。而且它与动态网站设计有着直接的联系。在动态网页技术中，如ASP技术，表单可以从客户端浏览器收集用户信息，然后传递到服务器端的某个ASP程序进行处理，或通过ASP与数据库进行数据交换，然后返回数据给该客户浏览器。表单是后面讲解AJAX程序设计的重要基础。

2.5.1　表单的定义

1.表单的定义

所谓表单，就是用户用来采集浏览者信息的网页的，包括反馈信息的一些区域（又称表单域）。在表单中，可以让用户反馈如姓名、年龄、爱好、对某一事件的看法和某一观点……。表单元素：

＜form＞…＜/form＞

form元素可以为用户提供一种窗口界面，让用户在窗口的表单中输入信息，单击提交表单按钮，表单中的信息会发送到Web服务器进行处理。服务器将处理过的用户信息的HTML文件返回客户端浏览器中显示出来。

form的语法格式为：

说明：method属性说明和服务器交换信息时所使用的方式，一般选择post或get。post表示发送，get表示获得。action属性说明当这个form提交后的处理方式，通常指明一个处理函数的URL地址。

在＜form＞…＜/form＞中常用元素如下：

＜input＞、＜select＞…＜/select＞、＜option＞…＜/option＞、＜textarea＞…＜/textarea＞

2.表单示例

图2.19是一个典型的表单，下面通过网页程序设计来实现这个表单。

例2.10　按照图2.19的网页设计程序（ch2-10.htm）。

这是一个包含了所有form元素的表单，比较复杂。

为了使文字及表单控件对齐，整个页面用＜table＞元素进行规划，将对应的文字和表单控件分别放在两个单元格中。这种方式在表单设计中普遍使用，＜table＞的border属性值为0表示表格边框线为虚线，在浏览器中不会显示出来。

2.5.2　表单中常用的元素

下面通过对表单控件的介绍说明例2.10程序中各个表单元素的作用。

1.＜input＞元素

＜input＞元素定义了一个用于用户输入的表单控件。＜input＞是＜form＞元素中极为有用的控件。当一张表单被发送后，＜form＞内＜input＞元素的当前值将以一对名字/值的形式被发往服务器。＜input＞元素的type属性用来规定＜input＞的类型，不同的type取值确定＜input＞表现形式，这些形式包括文本框、口令、单选按钮、复选框、命令按钮、提交按钮、重置按钮等，这是一个十分重要的属性。

表2.4中列出了＜input＞的type属性所定义的控件类型。

这里特别说明一下提交按钮和重置按钮，提交按钮是把用户输入的表单内容提交给服务器进行处理；重置按钮是把用户输入的内容清除掉，重新输入。通过输入＜input＞元素中value属性的属性值可改变按钮上的提示文字，否则它自动写上submit和reset。

＜input＞元素的name属性定义该控件的名称，控件中内容与该名称将作为一对“名字/值”发送给服务器的应用程序，应用程序就是通过name属性来检索该控件的。

图2.19的标题为第一行。

第二行是用户名，用一个输入文字内容的文本框（type="text"），可以在其中输入任意字符，对应程序的第7行～程序的第12行语句。

第三行是用户密码输入框（type="password"），用户填写密码时将用“*”代替真实密码，对应程序的第13行～程序的第18行语句。

第四行是性别单选按钮（type="radio"），此例中设定为二选一，即在“男”和“女”之间选择一个；有时也可以设置为多选一，当需要多选一时，要用多个单选按钮来实现，其中的cheched属性设置该单选按钮为默认按钮；对应程序的第19行～程序的第25行。

第五行是关于“职业”的下拉按钮，使用了＜select＞元素，其中给定一个参数列表，用户可以在其中进行多选一，或多选多的选择；对应程序的第26行～程序的第37行。

第六行是关于“爱好”的复选框按钮（type="checkbox"），此例中设定了五个选项，可以全选、多选或不选，对应程序的第38行～程序的第47行。

第七行是用户反映意见的文本框，使用了＜textarea＞，用户可以在其中填写意见，对应程序的第48行～程序的第53行。

第八行是表单提交按钮和重置按钮，用户单击“发送”按钮时，表单中的内容将发送到服务器，单击“重填”按钮时，填写的信息将被清零，对应程序的第54行～程序的第59行。

2.＜select＞元素

＜select＞元素定义了一个选择选项的表单控件。＜select＞元素在＜form＞中极为有用，HTML 4.0中允许＜select＞在任何块级元素中使用。

＜select＞元素通常包含若干个＜option＞元素来为用户提供选项。每个选项都存在一个＜option＞元素。＜select＞的name属性提供了和选项的值一同发送到服务器的关键字。

＜select＞的size属性可以设置列表框的高度，即一次同时显示在列表中的选择项数目。multiple属性允许选择多个选项值，如果在＜select＞元素中加入了multiple属性，允许用户一次选择多个选项，如果默认multiple（在程序中不写明），一次只能选择一项。下面就是multiple属性的例子。

例2.11　select的使用举例（下拉列表）（ch2-11.htm）。

例2.11　的程序运行结果如图2.20所示，＜select＞元素的size属性等于1，设置了列表框的高度为1行，且默认multiple属性，用户只能选择一项，是典型的下拉列表。

例2.12　select的使用举例（滚动列表）（ch2-12.htm）。

例2.12　的程序运行结果如图2.21所示，＜select＞元素的size属性等于5，设置了列表框的高度为5行，当选项数目超过列表框的高度则出现滚动条，同时增加了multiple属性，在选项中，用户按住【Ctrl】键单击可以选择不连续的多个选项，按住【Shift】键单击可以选择连续的多个选项。

3.＜option＞元素

＜option＞元素定义了＜select＞元素中的列表选项。随表单一起发送的选项值由value属性确定。如果没有value属性，发送的将是＜option＞元素的内容。

selected属性定义了＜option＞被初始选中。＜select＞元素中每次仅有一个＜option＞可以被选中，除非使用了multiple属性。

4.＜textarea＞元素

＜textarea＞元素定义了一个用于多行输入的表单控件。＜textarea＞是＜form＞中极为有用的控件，主要用来接收用户较多文字的输入。

＜textarea＞的初始值将作为元素的内容，且不含任何HTML元素。在＜textarea＞中rows和cols不可默认。属性cols确定文本框的宽度，它指的是多行多列文本框的一行同时出现多少个文字；属性rows确定多行多列文本框的高度，即有多少行文字一次出现。