表单(FORM)定义
表单(FORM)在动态网站编程中占有重要的地位,使用FORM,可以从客户端向服务器端发送数据,在服务器端,可以使用ASP、JSP、Servlet、CGI等程序将传递过来的数据读取出来进行处理。FORM定义的基本格式如下:
...
在FORM定义中,可以指定ACTION、METHOD、NAME、ENCTYPE等属性,用于接收数据的各类表单元素定义在
和之间。ACTION属性用于指定此表单数据提交的目标URL,它通常是一个相对路径。如果没有设置这个属性或者属性值为空,表单数据将提交给此表单自身的URL。
METHOD属性用于指定提交表单数据的方式,常用的有GET和POST两种方式,如果没有设置此属性或者此属性值为空,则使用GET方式来提交数据。GET和POST提交方式的主要不同点在于如下两点:
因为GET数据是URL的一部分,所以它会将表单数据附在URL后面传送。也就是说,在浏览器的地址栏将会显示表单中的数据,并且,在通常情况下,浏览器会将这个附加数据后的URL保存起来,可以查阅通过浏览器的“历史”来得到它。所以,这种方式不适合于发送需要保密的数据的表单,比如,密码等。而POST不是URL的一部分,所以它不会将表单数据附在URL后面,所以这种方式不会发生上面的问题。
因为浏览器通常会限制URL的长度,所以,使用GET这种方式无法传送大量的数据。而POST方式不会有这种问题。
所以,如果没有特殊的需要,最好使用POST方式来传送表单数据。
NAME属性用于给这个FORM指定一个名字,可以用字母和数字组合的方式来给FORM命名,但不要用数字开头。
ENCTYPE属性用于定义数据在发送前需要完成的编码方式,如果没有设置这个属性,那么会使用默认的值application/x-www-form-urlencoded,它使用的编码方式是UTF-8。
ACCEPT属性用于指定处理表单数据的ASP、JSP、Servlet或者其他程序接受的MIME(Multipurpose Internet Mail Extension protocol, 多用途网际邮件扩充协议)数据类型,如果FORM中有文件组件(FILE),还可以使用它来限制上载文件的类型。
ACCEPT-CHARSET属性用于指定处理表单数据的ASP、JSP、Servlet或者其他的程序接受的字符编码。
文本组件
文本组件分成三种:文本框、密码框和文本域,它们都可以放在FORM标记中用于接收文本数据,下面我们来学习这三种文本组件。
l 文本框
文本框定义的基本格式如下:
文本框用标记INPUT定义,并且需要将它的TYPE属性值定义为TEXT,这也是INPUT标记的默认类型;NAME属性用于给文本框指定一个名字,这个属性是必需的;VALUE属性可以用于指定文本框的默认值;SIZE属性用于定义文本框的大小,默认是20;而MAXLENGTH是用于限制文本框的输入数据长度的属性。
l 密码框
密码框和文本框类似,唯一和文本框区别的地方在于,需要将INPUT标记的TYPE属性设置为PASSWORD,其他的属性设置和文本框的设置一样,另外,在密码框中输入数据的时候,密码框中不会明文显示输入的数据,而是用“*”或其他的掩盖字符来表示,但这并不影响到将输入的数据发送。
l 文本域
文本域使用标记来定义,它的基本格式如下:
和前面的两个文本组件不同,标记必须成对出现,它有三个属性必须定义:NAME用于设置文本域的名字,而ROWS用于设置文本域的行数,而COLS用于设置文本域的列数,如果文本域有默认值,则将默认值放在和之间。
NAME="userInfo">
MAXLENGTH="30" VALUE="默认值">
SIZE="15" MAXLENGTH="30">
默认的值放在这里
下拉列表
下拉列表向用户提供一系列的选项。它可以分为单选列表和多选列表两种。单选列表可以让用户选择一个选项,它也是下拉列表的默认设置;多选列表可以让用户选择多个选项。
下拉列表的基本格式如下:
#
下拉列表使用SELECT标记来定义,需要使用“NAME”属性来给它指定一个名字,“SIZE”属性用于指定下拉列表在浏览器中显示的行数,如果不指定这个属性,那么在浏览器中只有一行可见。下拉列表的各个选项可以使用标记来定义,使用“VALUE”属性来给选项指定值,这个值不会显示在浏览器中,如果需要指定一个默认的选项,可以在该选项中加上一个“SELECTED”属性;而在之间,可以定义显示到浏览器中的内容。
如果需要定义多选列表,可以通过指定标记的一个属性MULTIPLE来完成,并且同时将“SIZE”属性值设置为2或者2以上。
下面我们来看一个单选列表和多选列表的例子。
篮球
排球
乒乓球
网球
男
女
单选框
单选框提供给用户多选一的组件,它的基本格式如下:
#
可以看出,单选框也是使用标记来定义,但是需要将它的“TYPE”属性设置为“RADIO”,需要给它指定一个名字。一个只能定义一个单选框选项,因此对于一组的选项,必须针对每个选项定义并且需要给它们提供一样的名字,这样这些选项就能组成一个“组”,在这些选项中,每次最多只能有一个选项被选中。如果需要指定默认的选项,可以给该选项指定“CHECKED”属性即可,如:
男
女
这样,对于 “性别”单选框,它有两个选项,默认选项是“女”。
多选框
多选框提供给用户一个选择多个选项的组件,它的基本格式如下:
#
通常情况下,将一组同样性质的多选框指定一样的名字。如果需要指定某些选项为默认选项,可以给这个选项指定“CHECKED”属性。被选择中的各个选项值会组成一个字符串发送到服务器端,各个选项值之间用逗号隔开。
选择性别:
男
女
选择你的兴趣爱好:
上网
踢球
篮球
健身
按钮
在HTML中,有三种类型的按钮:Submit、Button和Reset。使用Submit按钮可以将表单提交到FORM标记的ACTION所指定的url中;而Button类型的按钮通常情况下需要和JavaScript结合起来使用才有意义;Reset按钮可以将表单的内容回复到原始的状态。
l Submit按钮
Submit按钮定义的基本格式如下:
可以看出,Submit按钮的定义也是使用标记,只是需要将“TYPE”属性值指定为“SUBMIT”就可以了,另外需要给它指定一个名字。VALUE属性将显示在Submit按钮上,但它不是必需的,如果没有指定它,那么在浏览器中就会自己加上一个值,在不同的浏览器中可能会有所不同,如在英文的IE中通常会是“Submit Query”,而在中文IE中是“提交查询内容”等。
l Reset
Reset按钮用于将表单中的各个组件的值恢复到最初设置的初值,它的基本格式如下:
RESET按钮的定义也使用标记,只是需要将“TYPE”属性值指定为“RESET”就可以了,另外需要给它指定一个名字。VALUE属性将会显示在Reset按钮上,它可以不指定,而是让浏览器自己给它赋值,不同的浏览器中会有一些差别,如在英文IE中显示为“Reset”,而在中文IE中显示为“重置”等。
l Button
Button通常需要和JavaScript结合起来才能作用,因为它本身不能完成任何的功能,它的格式如下:
和Submit和Reset按钮一样,Button使用来定义,在Button定义中,需要给VALUE指定一个值,否则,在浏览器中的按钮组件上不会有任何的文字指示。
在FORM中,通常至少需要定义一个Submit按钮,这样表单才可以提交到ACTION指定的url中,或者使用Button按钮和JavaScript结合也能达到一样的目的,在下一节我们会学习这种方式。
隐藏域
隐藏域可以定义在FORM中,用来传递不需用户输入的值。和其他的FORM组件不同,它不会显示在浏览器中,用户不能去修改它的值。它的定义基本格式如下:
和文本框等组件一样,隐藏域的定义也是使用标记来完成的,需要将它的“TYPE”属性值设置为“HIDDEN”,并且需要给它指定一个名字。另外因为隐藏域不能接收用户的输入,所以通常需要给它指定一个VALUE值。
文件上载组件
有时候我们需要将客户端的文件上载到服务器端,这时候就需要使用文件上载组件来接收需要上载的文件的路径,它的基本格式如下:
文件上载组件也使用标记来定义,并且将它的“TYPE”属性值设置为“FILE”,同时需要给它的“NAME”指定一个值。MAXLENGTH和SIZE属性的含义和文本框的含义一样。文件上载组件在浏览器上的表现形式为一个“文本框”和一个“按钮”,这个按钮上面会在不同的浏览器上面显示类似“浏览…”的内容。点击这个按钮,将打开一个文件选择对话框,让用户选择一个文件。