網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)表單的處理

1、 表單是用于實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽者與服務(wù)表單是用于實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽者與服務(wù)器之間信息交互的一種頁(yè)面元素，被廣器之間信息交互的一種頁(yè)面元素，被廣泛用于各種信息的搜集和反饋。通過(guò)本泛用于各種信息的搜集和反饋。通過(guò)本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容：章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容： 認(rèn)識(shí)網(wǎng)頁(yè)表單認(rèn)識(shí)網(wǎng)頁(yè)表單 創(chuàng)建表單的方法創(chuàng)建表單的方法 編輯表單編輯表單 設(shè)置表單確認(rèn)頁(yè)面設(shè)置表單確認(rèn)頁(yè)面 第第8章章 網(wǎng)頁(yè)表單的處理網(wǎng)頁(yè)表單的處理 山東新華電腦學(xué)院山東新華電腦學(xué)院8.1 利用利用FrontPage 2002處理表單處理表單 8.1.1 創(chuàng)建表單創(chuàng)建表單 1 . 表單概述表單概述 表單是用來(lái)收集瀏覽者的用戶名、密碼、表單是用來(lái)收

2、集瀏覽者的用戶名、密碼、E-mail地址、個(gè)人愛(ài)地址、個(gè)人愛(ài)好和聯(lián)系地址等用戶信息的輸入?yún)^(qū)域集合。好和聯(lián)系地址等用戶信息的輸入?yún)^(qū)域集合。 FrontPage提供了文本框、文本區(qū)、單選按鈕、復(fù)選框、下拉框、提供了文本框、文本區(qū)、單選按鈕、復(fù)選框、下拉框、提交按鈕和重置按鈕等豐富的表單域。提交按鈕和重置按鈕等豐富的表單域。（1）文本框）文本框：文本框用來(lái)輸入比較簡(jiǎn)單的信息文本框用來(lái)輸入比較簡(jiǎn)單的信息 。 （2）文本區(qū)）文本區(qū)：如果需要輸入建議、需求等大段文字，使用文本框就如果需要輸入建議、需求等大段文字，使用文本框就顯得力不從心了，這時(shí)通常使用帶有滾動(dòng)條的文本區(qū)。顯得力不從心了，這時(shí)通常使用帶有滾

3、動(dòng)條的文本區(qū)。 （3）單選按鈕）單選按鈕：?jiǎn)芜x按鈕常用于表示唯一的選擇結(jié)果。單選按鈕常用于表示唯一的選擇結(jié)果。 （4）復(fù)選框）復(fù)選框：復(fù)選框常用來(lái)表示許多項(xiàng)可以同時(shí)選中的事物，比如復(fù)選框常用來(lái)表示許多項(xiàng)可以同時(shí)選中的事物，比如個(gè)人愛(ài)好、所學(xué)科目和選購(gòu)的產(chǎn)品種類(lèi)等。個(gè)人愛(ài)好、所學(xué)科目和選購(gòu)的產(chǎn)品種類(lèi)等。 （5）下拉列表框）下拉列表框：當(dāng)需要選擇職業(yè)、文化程度等事項(xiàng)時(shí)，除了文本當(dāng)需要選擇職業(yè)、文化程度等事項(xiàng)時(shí)，除了文本區(qū)以外，還可以考慮使用下拉列表框。區(qū)以外，還可以考慮使用下拉列表框。 （6）提交按鈕和重置按鈕）提交按鈕和重置按鈕：當(dāng)用戶完成了表單的填寫(xiě)后，如果需要當(dāng)用戶完成了表單的填寫(xiě)后，如果需

4、要提交數(shù)據(jù)，則可以單擊表單中的提交按鈕。如果希望恢復(fù)表單為提交數(shù)據(jù)，則可以單擊表單中的提交按鈕。如果希望恢復(fù)表單為填寫(xiě)前的狀態(tài)，以便重新填寫(xiě)，則可以單擊重置按鈕。填寫(xiě)前的狀態(tài)，以便重新填寫(xiě)，則可以單擊重置按鈕。2創(chuàng)建表單創(chuàng)建表單 在在FrontPage 2002中可以通過(guò)應(yīng)用向?qū)?chuàng)建表單，也可以自中可以通過(guò)應(yīng)用向?qū)?chuàng)建表單，也可以自己手動(dòng)創(chuàng)建表單。己手動(dòng)創(chuàng)建表單。 8.1.2 編輯表單編輯表單1修改表單修改表單（1）刪除不必要的域）刪除不必要的域 如果是手動(dòng)創(chuàng)建的表單，刪除不必要的域的方法很簡(jiǎn)單，只需如果是手動(dòng)創(chuàng)建的表單，刪除不必要的域的方法很簡(jiǎn)單，只需將選中需要?jiǎng)h除的域，單擊將選中需要?jiǎng)h除的

5、域，單擊Delete鍵即可。如果是用表單向?qū)?chuàng)建鍵即可。如果是用表單向?qū)?chuàng)建的表單，將鼠標(biāo)指針移至要?jiǎng)h除的行的左側(cè)，當(dāng)鼠標(biāo)變成指向箭的表單，將鼠標(biāo)指針移至要?jiǎng)h除的行的左側(cè)，當(dāng)鼠標(biāo)變成指向箭頭頭時(shí)，選擇要?jiǎng)h除的域，然后單擊鼠標(biāo)右鍵，從彈出的快捷菜時(shí)，選擇要?jiǎng)h除的域，然后單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇單中選擇“刪除單元格刪除單元格”命令即可。命令即可。（2）修改文本框的寬度）修改文本框的寬度 在在FrontPage 2002中修改文本框的寬度有以下兩種方法：中修改文本框的寬度有以下兩種方法： 鼠標(biāo)拖動(dòng)法鼠標(biāo)拖動(dòng)法 用鼠標(biāo)選中要修改文本框，選中狀態(tài)下的文本框被用鼠標(biāo)選中要修改文本框，選中狀態(tài)下

6、的文本框被6個(gè)小方框包個(gè)小方框包圍起來(lái)，拖動(dòng)其中的小方框就可以改變文本框的寬度。圍起來(lái)，拖動(dòng)其中的小方框就可以改變文本框的寬度。 精確設(shè)置法精確設(shè)置法 用鼠標(biāo)選中要修改文本框，然后單擊右鍵，從彈出的快捷菜單用鼠標(biāo)選中要修改文本框，然后單擊右鍵，從彈出的快捷菜單中選擇中選擇“表單域?qū)傩员韱斡驅(qū)傩浴泵?，彈出命令，彈出“文本框?qū)傩晕谋究驅(qū)傩浴睂?duì)話框，在對(duì)話框，在“寬度寬度”文本框中輸入精確數(shù)值，然后單擊文本框中輸入精確數(shù)值，然后單擊“確定確定”按鈕。按鈕。（3）修改域標(biāo)題）修改域標(biāo)題 在表單中修改域標(biāo)題也很容易，只要用鼠標(biāo)選中要更改的域標(biāo)在表單中修改域標(biāo)題也很容易，只要用鼠標(biāo)選中要更改的域標(biāo)題，然

7、后直接輸入所需的域標(biāo)題即可。題，然后直接輸入所需的域標(biāo)題即可。2設(shè)置表單的背景顏色設(shè)置表單的背景顏色3設(shè)置光標(biāo)順序設(shè)置光標(biāo)順序 在填寫(xiě)表單時(shí)，使用鍵盤(pán)上的在填寫(xiě)表單時(shí)，使用鍵盤(pán)上的“Tab”鍵，就可以在各項(xiàng)之間進(jìn)鍵，就可以在各項(xiàng)之間進(jìn)行切換。行切換。 “Tab”鍵順序是在各屬性對(duì)話框中設(shè)置的。鍵順序是在各屬性對(duì)話框中設(shè)置的。 4設(shè)置密碼域?qū)傩栽O(shè)置密碼域?qū)傩?在填寫(xiě)表單時(shí)，填寫(xiě)的某些內(nèi)容會(huì)以在填寫(xiě)表單時(shí)，填寫(xiě)的某些內(nèi)容會(huì)以“*”表示，這是為了防止表示，這是為了防止輸入的某些重要內(nèi)容被其他人偷看。要想為標(biāo)單加上此功能，只輸入的某些重要內(nèi)容被其他人偷看。要想為標(biāo)單加上此功能，只要在要在“文本框?qū)傩晕?/p>

8、本框?qū)傩浴睂?duì)話框里的對(duì)話框里的“密碼域密碼域”選項(xiàng)組中選擇選項(xiàng)組中選擇“是是”按鈕即可。按鈕即可。8.1.3保存表單結(jié)果保存表單結(jié)果 訪問(wèn)者填寫(xiě)完表單內(nèi)容后發(fā)送出去，發(fā)送后的表單結(jié)果要存放在訪問(wèn)者填寫(xiě)完表單內(nèi)容后發(fā)送出去，發(fā)送后的表單結(jié)果要存放在某一位置。表單結(jié)果存放的位置是由表單屬性指定的某一位置。表單結(jié)果存放的位置是由表單屬性指定的 。8.1.4設(shè)置表單確認(rèn)頁(yè)面設(shè)置表單確認(rèn)頁(yè)面 在測(cè)試表單時(shí)，單擊在測(cè)試表單時(shí)，單擊“注冊(cè)注冊(cè)”按鈕后，瀏覽器會(huì)自動(dòng)調(diào)出一個(gè)按鈕后，瀏覽器會(huì)自動(dòng)調(diào)出一個(gè)確認(rèn)表單頁(yè)面，其提示信息均為英文。表單的確認(rèn)頁(yè)面也可以自確認(rèn)表單頁(yè)面，其提示信息均為英文。表單的確認(rèn)頁(yè)面也可以

9、自己設(shè)置，在瀏覽時(shí)讓瀏覽器將自設(shè)的確認(rèn)頁(yè)面調(diào)出。己設(shè)置，在瀏覽時(shí)讓瀏覽器將自設(shè)的確認(rèn)頁(yè)面調(diào)出。1制作確認(rèn)表單制作確認(rèn)表單2鏈接確認(rèn)表單與表單頁(yè)面鏈接確認(rèn)表單與表單頁(yè)面8.2 處理網(wǎng)頁(yè)表單的其他方法處理網(wǎng)頁(yè)表單的其他方法8.2.1 利用利用HTML處理表單處理表單 利用利用HTML也可以創(chuàng)建表單，這樣創(chuàng)建的表單通常由兩類(lèi)元素構(gòu)也可以創(chuàng)建表單，這樣創(chuàng)建的表單通常由兩類(lèi)元素構(gòu)成，一是普通的頁(yè)面元素，例如表格、圖像、文字等，二是用于接成，一是普通的頁(yè)面元素，例如表格、圖像、文字等，二是用于接收信息的特定頁(yè)面元素，也就是所謂的表單控件。收信息的特定頁(yè)面元素，也就是所謂的表單控件。 1表單標(biāo)記符表單標(biāo)記符

10、 HTML中表單標(biāo)記符為中表單標(biāo)記符為FORM，其主要作用是設(shè)定表單的起止位，其主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的置，并指定處理表單數(shù)據(jù)程序的URL地址。地址。 2表單輸入標(biāo)記符表單輸入標(biāo)記符 INPUT是表單輸入標(biāo)記符，在表單創(chuàng)建中使用頻繁，大部分表單是表單輸入標(biāo)記符，在表單創(chuàng)建中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記符。內(nèi)容需要用到此標(biāo)記符。 3控件定義方法控件定義方法（1）文本框和口令框）文本框和口令框 創(chuàng)建單行文本框的基本語(yǔ)法如下：創(chuàng)建單行文本框的基本語(yǔ)法如下：（2）復(fù)選框與單選按鈕）復(fù)選框與單選按鈕 創(chuàng)建復(fù)選框和單選框也是使用創(chuàng)建復(fù)選框和單選框也是使用INPUT標(biāo)

11、記符，語(yǔ)法分別如下：標(biāo)記符，語(yǔ)法分別如下：（3）按鈕）按鈕 創(chuàng)建提交按鈕、重置按鈕和自定義按鈕的語(yǔ)法分別如下：創(chuàng)建提交按鈕、重置按鈕和自定義按鈕的語(yǔ)法分別如下：（4）多行文本框（文本區(qū)）多行文本框（文本區(qū)） 利用利用HTML創(chuàng)建多行文本框應(yīng)使用創(chuàng)建多行文本框應(yīng)使用TEXTAREA標(biāo)記符，其使用標(biāo)記符，其使用格式如下：格式如下：默認(rèn)多行文本默認(rèn)多行文本（5）選項(xiàng)菜單）選項(xiàng)菜單 要?jiǎng)?chuàng)建選項(xiàng)菜單應(yīng)使用要?jiǎng)?chuàng)建選項(xiàng)菜單應(yīng)使用SELECT標(biāo)記符，并將每個(gè)可獨(dú)立選取標(biāo)記符，并將每個(gè)可獨(dú)立選取的項(xiàng)用一個(gè)的項(xiàng)用一個(gè)OPTION標(biāo)記符標(biāo)出來(lái)。標(biāo)記符標(biāo)出來(lái)。 8.2.2 利用利用Dreamweaver 4.0處理表單處理表單 Dreamweaver 4.0提供了大量的表單元素。將提供了大量的表單元素。將“Object”面板切面板切換到換到“Forms”類(lèi)下，即可看到各種表單元素類(lèi)下，即可看到各種表單元素 。1插入文本框插入文本框（1）創(chuàng)建空白表單）創(chuàng)建空白表單（2）插入文本框）插入文本框 插入單行文本框插入單行文本框 插入多行文本框插入多行文本框 插入密碼文本框插入密碼文本框2設(shè)置文本框?qū)傩栽O(shè)置文本框?qū)傩?插入單選按鈕插入單選按鈕（1）插入單選按鈕）插入單選按鈕（2）設(shè)置單選按鈕的屬性）設(shè)置單選按鈕的屬性4插入復(fù)選框插入復(fù)選框（1）插入復(fù)選框）插入復(fù)選框（2）設(shè)置復(fù)選框