八、表单的建立和应用

1、表单（表单（Form）可以让网页的浏）可以让网页的浏览者输入数据，然后将数据返回览者输入数据，然后将数据返回Web服务器，以备登录或查询之用。服务器，以备登录或查询之用。Web搜索：搜索：网络票选：网络票选：意见调查：意见调查：报名或在线订购：报名或在线订购：知名的知名的YahooYahoo、新浪、搜狐、首都在线、新浪、搜狐、首都在线（263263）、）、ChinarenChinaren、网易（、网易（163163）等。）等。一、决定要搜集的数据：一、决定要搜集的数据：首先，您必须根首先，您必须根据实际需求决定要搜集哪些数据。据实际需求决定要搜集哪些数据。二、建立表单：二、建立表单：首先，您必

2、须针对要搜集首先，您必须针对要搜集的数据建立一个输入界面，也就是表单的形式。的数据建立一个输入界面，也就是表单的形式。三设计表单处理程序：三设计表单处理程序：最后，您还要设计最后，您还要设计表单处理程序，这个程序负责接收浏览者所输入表单处理程序，这个程序负责接收浏览者所输入的数据，以便将数据进行登录或查询等进一步的的数据，以便将数据进行登录或查询等进一步的处理，如表处理，如表8-1所示。所示。表表8-1表单字段单行文本框多行文本框复选框范例上传您的GIF文件您喜欢下列哪些活动（可复选）？水上运动旅行说明允许浏览者输入单行的文字,如姓名、电话、传真、地址、E-Mail等。允许浏览者输入多行的文字

3、，如建议、评语、自我介绍等。允许浏览者从一组选取单一或多个选项，比方说，要票选最喜爱的男歌手，于是以复选框设计一组包含5个歌手的选项，然后浏览者可以从5个歌手中做复选。表单字段选择钮下拉式菜单密码字段范例说明允许浏览者从一组选项中选取单一选项，比方说，要知道浏览者的性别，于是以选择设计一组包含男和女的选项，然后浏览者只能从中选择男或选择女。密码字段其实就像单行文本框一样，只是无论浏览者输入什么数据，密码字段都会以星号（*）表示。续上表续上表按钮性别： 男女范例请输入密码：允许浏览者从下拉式菜单所列出的清单中做选择当浏览者的表单输入完成之后，可以点取按钮将数据传送回Web服务器；或者，当浏览器想

4、放弃刚才输入的数据，亦可点取按钮重新输入。标记的用途是在标记的用途是在HTMLHTML文件中插入表单。文件中插入表单。ACTION=“URL”指定表单处理程序的相对或绝对位置（若要将表单指定表单处理程序的相对或绝对位置（若要将表单数据寄到电子邮件信箱，可以指定该电子邮件信箱数据寄到电子邮件信箱，可以指定该电子邮件信箱的的URLURL；若没有指定；若没有指定ACTIONACTION属性的值，表示使用默认属性的值，表示使用默认的表单外理程序）的表单外理程序）范例：范例：FORM METHOD=“POST” 标签亦含有标签亦含有LANGLANG、DIRDIR、CLASSCLASS、IDID、STYL

5、ESTYLE、TITLETITLE、OnClickOnClick、OnDblClickOnDblClick、OnMouseDownOnMouseDown、OnMouseUpOnMouseUp、OnMouseMoveOnMouseMove、 OnKeyPressOnKeyPress、 OnMouseOutOnMouseOut、 OnMouseOverOnMouseOver、OnKeyDownOnKeyDown、OnKeyUpOnKeyUp等属性。等属性。标记的用途是在表单中插入输标记的用途是在表单中插入输入字段或按钮，如选择钮、选取方块、入字段或按钮，如选择钮、选取方块、单行文本框等，这个标记必

6、须放在单行文本框等，这个标记必须放在标记之间。标记之间。ALIGN=“LEFT，RIGHT，CENTER”指定图片提交按钮的对齐指定图片提交按钮的对齐方式（方式（TYPE=“IMAGE”TYPE=“IMAGE”）ACCEPT=“”指定提交文件时的指定提交文件时的MIMEMIME类类型（以逗号隔开）型（以逗号隔开）取消表单字段，使表单数取消表单字段，使表单数据无法被接受或提交据无法被接受或提交DISABLEDCHECKED当当 T Y P E = “ R A D I O ”T Y P E = “ R A D I O ” 或或TYPE=“CHECKBOX”TYPE=“CHECKBOX”时，此时，此

7、属性会将选择钮或选取框属性会将选择钮或选取框默认为已选取的状态默认为已选取的状态范例：范例：INPUT image/jpeg”1.首先，我们使用标记插入表单。2.在标记之间使用标记插入“提交”和“重新输入”两个按钮。在表单内插入按钮，若配合上在表单内插入按钮，若配合上标记，则可插入图片按钮。标记，则可插入图片按钮。ACCESSKEY=“”指定按钮的按键顺序指定按钮的按键顺序DISABLED取消按钮的功能取消按钮的功能NAME=“”指定按钮的名称（限英文），指定按钮的名称（限英文），此名称不会显示在网页，但可此名称不会显示在网页，但可作为后端处理用，供作为后端处理用，供ScriptScript、

8、表单处理程序使用表单处理程序使用TYPE=“SUBMIT，RESET指定按钮的类型。指定按钮的类型。SUBMITSUBMIT表示按钮为表示按钮为“提提交交”按钮，当浏览者按下按钮，当浏览者按下“提交提交”按钮时，按钮时，表单数据会被返回表单数据会被返回WebWeb服务器；服务器；RESETRESET表示表示按钮为按钮为“重新输入重新输入”按钮，当浏览者按下按钮，当浏览者按下“重新输入重新输入”按钮时，表单数据会被清除按钮时，表单数据会被清除或恢复至默认的状态；或恢复至默认的状态；BUTTONBUTTON表示为表示为“一一般般”按钮，无特殊用途，但可另外指定按钮，无特殊用途，但可另外指定Scri

9、ptScript、AppletApplet等处理程序等处理程序指定按钮的默认值指定按钮的默认值VALUE=“”标签亦含有标签亦含有LANGLANG、DIRDIR、CLASSCLASS、IDID、STYLESTYLE、TITLETITLE、OnClickOnClick、OnDblClickOnDblClick、OnMouseDownOnMouseDown、OnMouseUpOnMouseUp、OnFocusOnFocus、OnMouseMoveOnMouseMove、OnMouseOverOnMouseOver、OnBlurOnBlur、OnMouseOutOnMouseOut、OnKeyPre

10、ssOnKeyPress、OnKeyDownOnKeyDown、OnKeyUpOnKeyUp等属性。等属性。图图8-23“单行文本框单行文本框”允许使用者输入允许使用者输入单行的文字语句，如姓名、绰号、联单行的文字语句，如姓名、绰号、联络电话、络电话、E-mail、籍贯、国籍、出生、籍贯、国籍、出生地等信息。地等信息。“选择钮选择钮”就像只允许单选的选择题一就像只允许单选的选择题一样，我们通常会利用这个组件列出数个选样，我们通常会利用这个组件列出数个选项，以询问用户的性别、年龄、婚姻状况、项，以询问用户的性别、年龄、婚姻状况、最高学历等只有一个答案的问题。最高学历等只有一个答案的问题。“复选框

11、复选框”就像允许复选框的选择题就像允许复选框的选择题一样，它允许使用者同时选取多个选项，一样，它允许使用者同时选取多个选项，我们通常会利用这个组件询问使用者喜欢我们通常会利用这个组件询问使用者喜欢阅读哪几类的书籍、喜欢从事哪几类的活阅读哪几类的书籍、喜欢从事哪几类的活动等可以复选的问题。动等可以复选的问题。“多行文本框多行文本框”允许使用者输入多行的允许使用者输入多行的文字语句，如个人意见、自我介绍等信息，文字语句，如个人意见、自我介绍等信息，我们可以使用我们可以使用标记在表标记在表单中插入多行文本框。单中插入多行文本框。“下拉式菜单下拉式菜单”允许使用者从下拉式允许使用者从下拉式清单中选择项

12、目，例如嗜好、兴趣、学历、清单中选择项目，例如嗜好、兴趣、学历、出 生 地 等 ， 我 们 可 以 使 用出 生 地 等 ， 我 们 可 以 使 用标记搭配标记搭配标记来制作下拉式菜单。标记来制作下拉式菜单。标记的用途是在标记的用途是在表单中插入下拉式菜单，这个标记必表单中插入下拉式菜单，这个标记必须搭配须搭配标记以指定下拉式菜标记以指定下拉式菜单中的选项。单中的选项。此标记是放在此标记是放在标记标记之间，用来指定下拉式菜单的选项。之间，用来指定下拉式菜单的选项。DISABLEDDISABLED取消下拉式菜单选项，使之无法存取取消下拉式菜单选项，使之无法存取SELECTEDSELECTED指定

13、预先选取的选项指定预先选取的选项指定下拉式菜单选项的值（中英文皆可），指定下拉式菜单选项的值（中英文皆可），当浏览者按下当浏览者按下“提交提交”按钮之后，被选取的按钮之后，被选取的下拉式菜单选项的值会被返回表单处理程序，下拉式菜单选项的值会被返回表单处理程序，若您没有指定若您没有指定VALUEVALUE属性，那么下拉式菜单选属性，那么下拉式菜单选项的数据则会被返回表单处理程序项的数据则会被返回表单处理程序标签亦含有标签亦含有LANGLANG、DIRDIR、CLASSCLASS、IDID、STYLESTYLE、TITLETITLE、OnClickOnClick、OnDblClickOnDblClick、OnMouseDownOnMouseDown、O n M o u s e U pO n M o u s e U p 、 O n F o c u sO n F o c u s 、 O n C h a n g eO n C h a n g e 、OnMouseMoveOnMouseMove、OnMouseOverOnMouseOver、OnBlurOnBlur、OnMouseOutOnMouseOut、OnKeyPressOnKeyPress、OnSelectOnSelect、OnKeyDownOnKeyDown、OnKeyUpOnKeyUp等属