八、表單的建立和應(yīng)用

1、表單（表單（Form）可以讓網(wǎng)頁(yè)的瀏）可以讓網(wǎng)頁(yè)的瀏覽者輸入數(shù)據(jù)，然后將數(shù)據(jù)返回覽者輸入數(shù)據(jù)，然后將數(shù)據(jù)返回Web服務(wù)器，以備登錄或查詢之用。服務(wù)器，以備登錄或查詢之用。Web搜索：搜索：網(wǎng)絡(luò)票選：網(wǎng)絡(luò)票選：意見調(diào)查：意見調(diào)查：報(bào)名或在線訂購(gòu)：報(bào)名或在線訂購(gòu)：知名的知名的YahooYahoo、新浪、搜狐、首都在線、新浪、搜狐、首都在線（263263）、）、ChinarenChinaren、網(wǎng)易（、網(wǎng)易（163163）等。）等。一、決定要搜集的數(shù)據(jù)：一、決定要搜集的數(shù)據(jù)：首先，您必須根首先，您必須根據(jù)實(shí)際需求決定要搜集哪些數(shù)據(jù)。據(jù)實(shí)際需求決定要搜集哪些數(shù)據(jù)。二、建立表單：二、建立表單：首先，您必

2、須針對(duì)要搜集首先，您必須針對(duì)要搜集的數(shù)據(jù)建立一個(gè)輸入界面，也就是表單的形式。的數(shù)據(jù)建立一個(gè)輸入界面，也就是表單的形式。三設(shè)計(jì)表單處理程序：三設(shè)計(jì)表單處理程序：最后，您還要設(shè)計(jì)最后，您還要設(shè)計(jì)表單處理程序，這個(gè)程序負(fù)責(zé)接收瀏覽者所輸入表單處理程序，這個(gè)程序負(fù)責(zé)接收瀏覽者所輸入的數(shù)據(jù)，以便將數(shù)據(jù)進(jìn)行登錄或查詢等進(jìn)一步的的數(shù)據(jù)，以便將數(shù)據(jù)進(jìn)行登錄或查詢等進(jìn)一步的處理，如表處理，如表8-1所示。所示。表表8-1表單字段單行文本框多行文本框復(fù)選框范例上傳您的GIF文件您喜歡下列哪些活動(dòng)（可復(fù)選）？水上運(yùn)動(dòng)旅行說明允許瀏覽者輸入單行的文字,如姓名、電話、傳真、地址、E-Mail等。允許瀏覽者輸入多行的文字

3、，如建議、評(píng)語(yǔ)、自我介紹等。允許瀏覽者從一組選取單一或多個(gè)選項(xiàng)，比方說，要票選最喜愛的男歌手，于是以復(fù)選框設(shè)計(jì)一組包含5個(gè)歌手的選項(xiàng)，然后瀏覽者可以從5個(gè)歌手中做復(fù)選。表單字段選擇鈕下拉式菜單密碼字段范例說明允許瀏覽者從一組選項(xiàng)中選取單一選項(xiàng)，比方說，要知道瀏覽者的性別，于是以選擇設(shè)計(jì)一組包含男和女的選項(xiàng)，然后瀏覽者只能從中選擇男或選擇女。密碼字段其實(shí)就像單行文本框一樣，只是無論瀏覽者輸入什么數(shù)據(jù)，密碼字段都會(huì)以星號(hào)（*）表示。續(xù)上表續(xù)上表按鈕性別： 男女范例請(qǐng)輸入密碼：允許瀏覽者從下拉式菜單所列出的清單中做選擇當(dāng)瀏覽者的表單輸入完成之后，可以點(diǎn)取按鈕將數(shù)據(jù)傳送回Web服務(wù)器；或者，當(dāng)瀏覽器想

4、放棄剛才輸入的數(shù)據(jù)，亦可點(diǎn)取按鈕重新輸入。標(biāo)記的用途是在標(biāo)記的用途是在HTMLHTML文件中插入表單。文件中插入表單。ACTION=“URL”指定表單處理程序的相對(duì)或絕對(duì)位置（若要將表單指定表單處理程序的相對(duì)或絕對(duì)位置（若要將表單數(shù)據(jù)寄到電子郵件信箱，可以指定該電子郵件信箱數(shù)據(jù)寄到電子郵件信箱，可以指定該電子郵件信箱的的URLURL；若沒有指定；若沒有指定ACTIONACTION屬性的值，表示使用默認(rèn)屬性的值，表示使用默認(rèn)的表單外理程序）的表單外理程序）范例：范例：FORM METHOD=“POST” 標(biāo)簽亦含有標(biāo)簽亦含有LANGLANG、DIRDIR、CLASSCLASS、IDID、STYL

5、ESTYLE、TITLETITLE、OnClickOnClick、OnDblClickOnDblClick、OnMouseDownOnMouseDown、OnMouseUpOnMouseUp、OnMouseMoveOnMouseMove、 OnKeyPressOnKeyPress、 OnMouseOutOnMouseOut、 OnMouseOverOnMouseOver、OnKeyDownOnKeyDown、OnKeyUpOnKeyUp等屬性。等屬性。標(biāo)記的用途是在表單中插入輸標(biāo)記的用途是在表單中插入輸入字段或按鈕，如選擇鈕、選取方塊、入字段或按鈕，如選擇鈕、選取方塊、單行文本框等，這個(gè)標(biāo)記必

6、須放在單行文本框等，這個(gè)標(biāo)記必須放在標(biāo)記之間。標(biāo)記之間。ALIGN=“LEFT，RIGHT，CENTER”指定圖片提交按鈕的對(duì)齊指定圖片提交按鈕的對(duì)齊方式（方式（TYPE=“IMAGE”TYPE=“IMAGE”）ACCEPT=“”指定提交文件時(shí)的指定提交文件時(shí)的MIMEMIME類類型（以逗號(hào)隔開）型（以逗號(hào)隔開）取消表單字段，使表單數(shù)取消表單字段，使表單數(shù)據(jù)無法被接受或提交據(jù)無法被接受或提交DISABLEDCHECKED當(dāng)當(dāng) T Y P E = “ R A D I O ”T Y P E = “ R A D I O ” 或或TYPE=“CHECKBOX”TYPE=“CHECKBOX”時(shí)，此時(shí)，此

7、屬性會(huì)將選擇鈕或選取框?qū)傩詴?huì)將選擇鈕或選取框默認(rèn)為已選取的狀態(tài)默認(rèn)為已選取的狀態(tài)范例：范例：INPUT image/jpeg”1.首先，我們使用標(biāo)記插入表單。2.在標(biāo)記之間使用標(biāo)記插入“提交”和“重新輸入”兩個(gè)按鈕。在表單內(nèi)插入按鈕，若配合上在表單內(nèi)插入按鈕，若配合上標(biāo)記，則可插入圖片按鈕。標(biāo)記，則可插入圖片按鈕。ACCESSKEY=“”指定按鈕的按鍵順序指定按鈕的按鍵順序DISABLED取消按鈕的功能取消按鈕的功能NAME=“”指定按鈕的名稱（限英文），指定按鈕的名稱（限英文），此名稱不會(huì)顯示在網(wǎng)頁(yè)，但可此名稱不會(huì)顯示在網(wǎng)頁(yè)，但可作為后端處理用，供作為后端處理用，供ScriptScript、

8、表單處理程序使用表單處理程序使用TYPE=“SUBMIT，RESET指定按鈕的類型。指定按鈕的類型。SUBMITSUBMIT表示按鈕為表示按鈕為“提提交交”按鈕，當(dāng)瀏覽者按下按鈕，當(dāng)瀏覽者按下“提交提交”按鈕時(shí)，按鈕時(shí)，表單數(shù)據(jù)會(huì)被返回表單數(shù)據(jù)會(huì)被返回WebWeb服務(wù)器；服務(wù)器；RESETRESET表示表示按鈕為按鈕為“重新輸入重新輸入”按鈕，當(dāng)瀏覽者按下按鈕，當(dāng)瀏覽者按下“重新輸入重新輸入”按鈕時(shí)，表單數(shù)據(jù)會(huì)被清除按鈕時(shí)，表單數(shù)據(jù)會(huì)被清除或恢復(fù)至默認(rèn)的狀態(tài)；或恢復(fù)至默認(rèn)的狀態(tài)；BUTTONBUTTON表示為表示為“一一般般”按鈕，無特殊用途，但可另外指定按鈕，無特殊用途，但可另外指定Scri

9、ptScript、AppletApplet等處理程序等處理程序指定按鈕的默認(rèn)值指定按鈕的默認(rèn)值VALUE=“”標(biāo)簽亦含有標(biāo)簽亦含有LANGLANG、DIRDIR、CLASSCLASS、IDID、STYLESTYLE、TITLETITLE、OnClickOnClick、OnDblClickOnDblClick、OnMouseDownOnMouseDown、OnMouseUpOnMouseUp、OnFocusOnFocus、OnMouseMoveOnMouseMove、OnMouseOverOnMouseOver、OnBlurOnBlur、OnMouseOutOnMouseOut、OnKeyPre

10、ssOnKeyPress、OnKeyDownOnKeyDown、OnKeyUpOnKeyUp等屬性。等屬性。圖圖8-23“單行文本框單行文本框”允許使用者輸入允許使用者輸入單行的文字語(yǔ)句，如姓名、綽號(hào)、聯(lián)單行的文字語(yǔ)句，如姓名、綽號(hào)、聯(lián)絡(luò)電話、絡(luò)電話、E-mail、籍貫、國(guó)籍、出生、籍貫、國(guó)籍、出生地等信息。地等信息。“選擇鈕選擇鈕”就像只允許單選的選擇題一就像只允許單選的選擇題一樣，我們通常會(huì)利用這個(gè)組件列出數(shù)個(gè)選樣，我們通常會(huì)利用這個(gè)組件列出數(shù)個(gè)選項(xiàng)，以詢問用戶的性別、年齡、婚姻狀況、項(xiàng)，以詢問用戶的性別、年齡、婚姻狀況、最高學(xué)歷等只有一個(gè)答案的問題。最高學(xué)歷等只有一個(gè)答案的問題?！皬?fù)選框

11、復(fù)選框”就像允許復(fù)選框的選擇題就像允許復(fù)選框的選擇題一樣，它允許使用者同時(shí)選取多個(gè)選項(xiàng)，一樣，它允許使用者同時(shí)選取多個(gè)選項(xiàng)，我們通常會(huì)利用這個(gè)組件詢問使用者喜歡我們通常會(huì)利用這個(gè)組件詢問使用者喜歡閱讀哪幾類的書籍、喜歡從事哪幾類的活閱讀哪幾類的書籍、喜歡從事哪幾類的活動(dòng)等可以復(fù)選的問題。動(dòng)等可以復(fù)選的問題?！岸嘈形谋究蚨嘈形谋究颉痹试S使用者輸入多行的允許使用者輸入多行的文字語(yǔ)句，如個(gè)人意見、自我介紹等信息，文字語(yǔ)句，如個(gè)人意見、自我介紹等信息，我們可以使用我們可以使用標(biāo)記在表標(biāo)記在表單中插入多行文本框。單中插入多行文本框?！跋吕讲藛蜗吕讲藛巍痹试S使用者從下拉式允許使用者從下拉式清單中選擇項(xiàng)

12、目，例如嗜好、興趣、學(xué)歷、清單中選擇項(xiàng)目，例如嗜好、興趣、學(xué)歷、出 生 地 等 ， 我 們 可 以 使 用出 生 地 等 ， 我 們 可 以 使 用標(biāo)記搭配標(biāo)記搭配標(biāo)記來制作下拉式菜單。標(biāo)記來制作下拉式菜單。標(biāo)記的用途是在標(biāo)記的用途是在表單中插入下拉式菜單，這個(gè)標(biāo)記必表單中插入下拉式菜單，這個(gè)標(biāo)記必須搭配須搭配標(biāo)記以指定下拉式菜標(biāo)記以指定下拉式菜單中的選項(xiàng)。單中的選項(xiàng)。此標(biāo)記是放在此標(biāo)記是放在標(biāo)記標(biāo)記之間，用來指定下拉式菜單的選項(xiàng)。之間，用來指定下拉式菜單的選項(xiàng)。DISABLEDDISABLED取消下拉式菜單選項(xiàng)，使之無法存取取消下拉式菜單選項(xiàng)，使之無法存取SELECTEDSELECTED指定

13、預(yù)先選取的選項(xiàng)指定預(yù)先選取的選項(xiàng)指定下拉式菜單選項(xiàng)的值（中英文皆可），指定下拉式菜單選項(xiàng)的值（中英文皆可），當(dāng)瀏覽者按下當(dāng)瀏覽者按下“提交提交”按鈕之后，被選取的按鈕之后，被選取的下拉式菜單選項(xiàng)的值會(huì)被返回表單處理程序，下拉式菜單選項(xiàng)的值會(huì)被返回表單處理程序，若您沒有指定若您沒有指定VALUEVALUE屬性，那么下拉式菜單選屬性，那么下拉式菜單選項(xiàng)的數(shù)據(jù)則會(huì)被返回表單處理程序項(xiàng)的數(shù)據(jù)則會(huì)被返回表單處理程序標(biāo)簽亦含有標(biāo)簽亦含有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等屬