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

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

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

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

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

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

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

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

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

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

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

11、記符，語法分別如下：標記符，語法分別如下：（3）按鈕）按鈕 創(chuàng)建提交按鈕、重置按鈕和自定義按鈕的語法分別如下：創(chuàng)建提交按鈕、重置按鈕和自定義按鈕的語法分別如下：（4）多行文本框（文本區(qū)）多行文本框（文本區(qū)） 利用利用HTML創(chuàng)建多行文本框應(yīng)使用創(chuàng)建多行文本框應(yīng)使用TEXTAREA標記符，其使用標記符，其使用格式如下：格式如下：默認多行文本默認多行文本（5）選項菜單）選項菜單 要創(chuàng)建選項菜單應(yīng)使用要創(chuàng)建選項菜單應(yīng)使用SELECT標記符，并將每個可獨立選取標記符，并將每個可獨立選取的項用一個的項用一個OPTION標記符標出來。標記符標出來。 8.2.2 利用利用Dreamweaver 4.0處理表單處理表單 Dreamweaver 4.0提供了大量的表單元素。將提供了大量的表單元素。將“Object”面板切面板切換到換到“Forms”類下，即可看到各種表單元素類下，即可看到各種表單元素 。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ù)選框