《多媒體技術(shù)與網(wǎng)頁(yè)設(shè)計(jì)》課件第21章

第21章表單21.1表單創(chuàng)建及設(shè)置21.2添加表單對(duì)象表單是在網(wǎng)頁(yè)中讓瀏覽用戶(hù)填寫(xiě)信息的網(wǎng)頁(yè)元素，如用戶(hù)注冊(cè)、用戶(hù)留言及郵箱登錄等。表單通常由單選按

鈕、復(fù)選框、文本框以及按鈕等多種表單對(duì)象組成，如圖21.1所示。通過(guò)表單可以將用戶(hù)填寫(xiě)的內(nèi)容上傳到網(wǎng)頁(yè)服務(wù)器中，網(wǎng)頁(yè)服務(wù)器對(duì)收集的信息進(jìn)行處理，并做出相應(yīng)的反應(yīng)。圖21.1表單頁(yè)面例如，用戶(hù)登錄表單，將用戶(hù)輸入的用戶(hù)名和密碼上傳到網(wǎng)頁(yè)服務(wù)器，網(wǎng)頁(yè)服務(wù)器判斷是否有該用戶(hù)，以及密碼是否正確。如果用戶(hù)和密碼都正確，就讓用戶(hù)跳轉(zhuǎn)到登錄后的頁(yè)面，否則將拒絕登錄并給出錯(cuò)誤信息。

21.1表單創(chuàng)建及設(shè)置

21.1.1創(chuàng)建表單

制作表單頁(yè)面要先創(chuàng)建表單，然后在表單中添加表單對(duì)象。

將插入欄切換到“表單”插入欄，如圖21.2所示，其中最右側(cè)的“表單”按鈕用于在頁(yè)面中載入表單，其它按鈕用于在表單中添加表單對(duì)象。圖21.2“表單”插入欄創(chuàng)建表單的具體步驟如下：

(1)將光標(biāo)移到所需位置。

(2)單擊“表單”插入欄中的“表單”按鈕或選擇“插入”→“表單”→“表單”命令，在編輯窗口中添加表單，如圖21.3所示。圖21.3創(chuàng)建表單21.1.2設(shè)置表單屬性

將光標(biāo)移到表單中，點(diǎn)擊右鍵，彈出其“屬性”面板，在該面板中可以設(shè)置表單屬性，如圖21.4所示。圖21.4表單“屬性”面板表單“屬性”面板中各項(xiàng)參數(shù)的含義如下：

(1)表單名稱(chēng)：設(shè)置表單的名稱(chēng)。

(2)動(dòng)作：用于處理表單的程序或頁(yè)面的URL地址。

(3)方法：選擇傳送表單數(shù)據(jù)的方式。其中，GET表示將表單中的信息以追加到處理程序地址后面的方式進(jìn)行傳送，使用這種方式不能發(fā)送信息量大的表單，其內(nèi)容不能超過(guò)8192個(gè)字符，適用于信息量小的表單；POST表示傳送表單數(shù)據(jù)時(shí)它將表單信息嵌入到請(qǐng)求的處理程序中，理論上這種方式對(duì)表單的信息量不受限制；“默認(rèn)”選項(xiàng)表示采用瀏覽器默認(rèn)的設(shè)置對(duì)表單數(shù)據(jù)進(jìn)行傳送，一般的瀏覽器默認(rèn)以GET方式傳送。

(4)目標(biāo)：打開(kāi)返回信息網(wǎng)頁(yè)的方式。

(5)?MIME類(lèi)型：指定提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)所使用的編碼類(lèi)型。默認(rèn)為application/x-www-form-urlencoded，通常與POST方法協(xié)同使用。

21.2添加表單對(duì)象

表單對(duì)象比較多，包括文本字段、字段集、按鈕、單選按鈕、復(fù)選框、列表/菜單、跳轉(zhuǎn)菜單、隱藏域、文

件域和圖像域等，它們的作用有所不同，下面分別進(jìn)行

介紹。21.2.1添加文本字段

文本字段是最常見(jiàn)的表單對(duì)象之一，可接受文本內(nèi)容的輸入，有單行、多行和密碼三種類(lèi)型，如圖21.5所示。圖21.5文本字段

1.單行文本字段的添加

由于單行文本可接受的文本內(nèi)容比較少，因此通常用于用戶(hù)輸入姓名、地址、郵箱地址等。插入單行文本字段的步驟為：將光標(biāo)移到表單中要添加文本字段的位置，在“表單”插入欄中單擊按鈕，在彈出的“輸入標(biāo)簽輔助功能屬性”對(duì)話(huà)框的“標(biāo)簽文字”文本框中輸入文本字段的標(biāo)簽，如“用戶(hù)名：”(如圖21.6所示)，單擊“確定”按鈕即可在表單域中添加單行文本字段，如圖21.7所示。圖21.6“輸入標(biāo)簽輔助功能屬性”對(duì)話(huà)框圖21.7插入的單行文本字段選擇添加的文本字段，點(diǎn)擊右鍵，彈出其“屬性”面

板，在該面板中將顯示單行文本域的各項(xiàng)參數(shù)，如圖21.8所示。圖21.8選擇文本字段后的“屬性”面板該面板中各項(xiàng)參數(shù)的含義如下：

(1)文本域：輸入文本字段的名稱(chēng)，該名稱(chēng)可以被腳本或程序引用。

(2)字符寬度：設(shè)置文本字段的寬度。

(3)最多字符數(shù)：設(shè)置單行文本字段中所能輸入的最大字符數(shù)。

(4)類(lèi)型：選中不同的單選按鈕可以在單行文本字

段、多行文本字段和密碼字段之間進(jìn)行轉(zhuǎn)換。

(5)初始值：輸入文本字段默認(rèn)的顯示內(nèi)容，如“請(qǐng)輸入用戶(hù)名”，若不輸入內(nèi)容，文本字段默認(rèn)狀態(tài)將顯示為空白。

2.多行文本字段的添加

多行文本字段可接受多行內(nèi)容的文本，通常用做用戶(hù)留言、個(gè)人介紹等。插入多行文本字段的步驟為：將光標(biāo)移到表單中要添加文本字段的位置，在“表單”插入欄中單擊按鈕，在彈出的“輸入標(biāo)簽輔助功能屬性”對(duì)話(huà)框的“標(biāo)簽文字”文本框中輸入文本字段的標(biāo)簽，如“請(qǐng)留言：”，單擊“確定”按鈕即可在表單域中添加多行文本字段，如圖21.9所示。圖21.9插入的多行文本字段選擇添加的多行文本字段，點(diǎn)擊右鍵，彈出其屬性面板，該面板中將顯示多行文本域的參數(shù)，如圖21.10所示。圖21.10選擇多行文本字段后的“屬性”面板該面板中各項(xiàng)參數(shù)的含義如下：

(1)文本域：輸入文本字段的名稱(chēng)，該名稱(chēng)可以被腳本或程序所引用。

(2)字符寬度：設(shè)置文本字段的寬度。

(3)行數(shù)：設(shè)置多行文本字段中的可見(jiàn)行數(shù)。

(4)類(lèi)型：其中包含“單行”、“多行”和“密碼”三個(gè)單選按鈕，選中不同的單選按鈕可以在單行文本字段、多行文本字段和密碼字段之間進(jìn)行轉(zhuǎn)換。

(5)初始值：輸入文本字段默認(rèn)的顯示內(nèi)容。

(6)換行：用于設(shè)置當(dāng)文本字段中的內(nèi)容超過(guò)一行時(shí)的換行方式，有“默認(rèn)”、“關(guān)”、“虛擬”和“實(shí)體”四種方

式。其中，“默認(rèn)”表示使用訪(fǎng)問(wèn)者瀏覽器默認(rèn)的自動(dòng)換行方式；“關(guān)”表示當(dāng)編輯文本超過(guò)了文本域指定的寬度時(shí)，自動(dòng)添加水平滾動(dòng)條；“虛擬”表示當(dāng)編輯文本超過(guò)了文本字段指定的寬度時(shí)，在排滿(mǎn)文本域?qū)挾葧r(shí)自動(dòng)換行；“實(shí)體”表示編輯文本超過(guò)了文本域指定的寬度時(shí)，在排滿(mǎn)文本域?qū)挾葧r(shí)也可自動(dòng)換行，而這里的自動(dòng)換行是帶有回車(chē)符的，即強(qiáng)制換行。21.2.2添加字段集

使用字段集可以在網(wǎng)頁(yè)中顯示圓角矩形方框，并在方框的右上角顯示一個(gè)標(biāo)題文字。這樣就可以將一些相關(guān)的表單對(duì)象放置在一個(gè)字段集內(nèi)，以和其它表單對(duì)象進(jìn)行區(qū)分。添加字段集的具體步驟如下：

(1)單擊“表單”插入欄中的按鈕，在彈出的“字段集”對(duì)話(huà)框的“標(biāo)簽”文本框中輸入字段集的標(biāo)簽，如“上傳文件”，如圖21.11所示。圖21.11“字段集”對(duì)話(huà)框

(2)單擊“確定”按鈕插入字段集，如圖21.12所示。圖21.12插入字段集

(3)在字段集中添加其它表單對(duì)象，如插入一個(gè)文件域和一個(gè)按鈕，如圖21.13所示。按F12鍵預(yù)覽，效果如圖21.14所示。圖21.13插入其它表單對(duì)象

圖21.14插入的字段集效果21.2.3添加按鈕

表單中的按鈕有“提交”、“重置”和編寫(xiě)腳本才能執(zhí)行相應(yīng)操作三種類(lèi)型?！疤峤弧卑粹o用于將表單的內(nèi)容提交到服務(wù)器；“重置”按鈕用于將表單中的內(nèi)容恢復(fù)到初始狀

態(tài)；第三種按鈕是需要用戶(hù)編寫(xiě)腳本才能執(zhí)行相應(yīng)操作，否則單擊無(wú)回應(yīng)。添加按鈕的具體步驟如下：

(1)將光標(biāo)移到表單中要添加按鈕的位置。

(2)單擊“表單”插入欄中的按鈕，在彈出的“輸入標(biāo)簽輔助功能屬性”對(duì)話(huà)框中單擊“確定”按鈕即可在表單中添加按鈕，其中默認(rèn)添加“提交”按鈕，如圖21.15所示。圖21.15添加的按鈕選中添加的按鈕，點(diǎn)擊右鍵，彈出其“屬性”面板，如圖21.16所示。圖21.16選中按鈕后的“屬性”面板該面板中各項(xiàng)參數(shù)的含義如下：

(1)按鈕名稱(chēng)：設(shè)置按鈕的名稱(chēng)。

(2)值：設(shè)置顯示在按鈕上的文本。

(3)動(dòng)作：其中“提交表單”表示單擊該按鈕可提交表

單；“無(wú)”表示需手動(dòng)添加腳本才能執(zhí)行相應(yīng)操作，否則單擊無(wú)回應(yīng)；“重設(shè)表單”表示單擊按鈕可將表單中的內(nèi)容恢復(fù)到默認(rèn)狀態(tài)。21.2.4添加單選按鈕

在同一組單選按鈕中只能選中一個(gè)單選按鈕，當(dāng)選

中其中一個(gè)單選按鈕后，再選中其它單選按鈕時(shí)，則先選中的單選按鈕將會(huì)取消選中。因此，單選按鈕常被用做性別、學(xué)歷等的選擇。添加單選按鈕的具體步驟如下：

(1)將光標(biāo)移到表單中要添加單選按鈕的位置。

(2)單擊“表單”插入欄中的按鈕，在彈出的“輸入標(biāo)簽輔助功能屬性”對(duì)話(huà)框的“標(biāo)簽文字”文本框中輸入單選按鈕的標(biāo)簽，如“男”。

(3)單擊“確定”按鈕在表單中添加一個(gè)單選按鈕，如圖21.17所示。

(4)重復(fù)上面的操作，添加其它單選按鈕，按F12鍵進(jìn)行預(yù)覽，這時(shí)只能選中一個(gè)單選按鈕，如圖21.18所示。圖21.17添加的單選按鈕圖21.18只能選中一個(gè)單選按鈕選中添加的單選按鈕，點(diǎn)擊右鍵，彈出如圖21.19所示的“屬性”面板。圖21.19選中單選按鈕后的“屬性”面板該面板中各項(xiàng)參數(shù)的含義如下：

(1)單選按鈕：輸入單選按鈕的名稱(chēng)。

(2)選定值：輸入選中單選按鈕時(shí)發(fā)送給服務(wù)器

的值。

(3)初始狀態(tài)：設(shè)置在瀏覽器中首次載入表單時(shí)單選按鈕是否處于選中狀態(tài)。21.2.5添加復(fù)選框

復(fù)選框允許在一組選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)。添加復(fù)選框的具體步驟如下：

(1)將光標(biāo)移到表單中要添加復(fù)選框的位置。

(2)單擊“表單”插入欄中的按鈕，在彈出的“輸入標(biāo)簽輔助功能屬性”對(duì)話(huà)框中的“標(biāo)簽文字”文本框中輸入復(fù)選框的標(biāo)簽，如“聽(tīng)音樂(lè)”。

(3)單擊“確定”按鈕，可以在表單中添加一個(gè)復(fù)選框，如圖21.20所示。

(4)重復(fù)上面的操作，添加其它復(fù)選框，按F12鍵進(jìn)行預(yù)覽，用戶(hù)可以同時(shí)選中多個(gè)復(fù)選框，如圖21.21所示。圖21.20添加的復(fù)選框圖21.21多個(gè)復(fù)選框選中添加的復(fù)選框，點(diǎn)擊右鍵，彈出其“屬性”面板，如圖21.22所示。圖21.22選中復(fù)選框后的“屬性”面板該面板中各項(xiàng)參數(shù)的含義如下：

(1)復(fù)選框名稱(chēng)：輸入復(fù)選框名稱(chēng)。

(2)選定值：輸入該復(fù)選框被選中時(shí)發(fā)送給服務(wù)器

的值。

(3)初始狀態(tài)：設(shè)置瀏覽器首次載入表單時(shí)復(fù)選框是否處于選中狀態(tài)。21.2.6添加列表/菜單

列表/菜單以列表框或下拉列表框的形式提供了多個(gè)選項(xiàng)。在列表中可以選擇多個(gè)選項(xiàng)，而菜單只允許選擇一項(xiàng)。添加列表/菜單的具體步驟如下：

(1)將光標(biāo)移到表單中要添加列表或菜單的位置。

(2)單擊“表單”插入欄中的按鈕，在彈出的“輸入標(biāo)簽輔助功能屬性”對(duì)話(huà)框的“標(biāo)簽文字”文本框中輸入列表/菜單的標(biāo)簽，如“軟件分類(lèi)”。

(3)單擊“確定”按鈕在表單中添加一個(gè)菜單，如圖21.23所示。圖21.23添加的菜單

(4)選擇添加的列表或菜單，點(diǎn)擊右鍵，彈出其“屬性”面板，單擊其中的“列表值”按鈕，彈出“列表值”對(duì)話(huà)框，如圖21.24所示。圖21.24“列表值”對(duì)話(huà)框

(5)在該對(duì)話(huà)框中可添加項(xiàng)目標(biāo)簽及相應(yīng)的值。在列表框的“項(xiàng)目標(biāo)簽”欄中輸入項(xiàng)目名稱(chēng)，單擊“+”按鈕添加下一條項(xiàng)目標(biāo)簽。重復(fù)操作直至完成整個(gè)項(xiàng)目標(biāo)簽的設(shè)置，最后單擊“確定”按鈕關(guān)閉對(duì)話(huà)框，完成菜單對(duì)象的添加。

(6)按F12鍵進(jìn)行預(yù)覽，效果如圖21.25所示。圖21.25設(shè)置后的列表選擇插入的列表/菜單，顯示其“屬性”面板，如圖21.26所示。圖21.26選擇列表/菜單后的“屬性”面板該面板中各項(xiàng)參數(shù)的含義如下：

(1)列表/菜單：輸入菜單對(duì)象的名稱(chēng)。

(2)類(lèi)型：用于在列表和菜單之間進(jìn)行轉(zhuǎn)換。

(3)初始化時(shí)選定：用于選擇在菜單對(duì)象中顯示的初始項(xiàng)。

如果在“屬性”面板的“類(lèi)型”欄中選中“列表”單選按

鈕，可以將菜單轉(zhuǎn)換為列表，同時(shí)“屬性”面板中的“高度”文本框和“允許多選”復(fù)選框被激活，如圖21.27所示。圖21.27選中“列表”單選按鈕在“高度”文本框中可設(shè)置在列表中顯示的選項(xiàng)的行

數(shù)；選中“允許多選”復(fù)選框則允許用戶(hù)選擇多個(gè)選項(xiàng)。設(shè)置后的列表如圖21.28所示。圖21.28列表21.2.7添加跳轉(zhuǎn)菜單

跳轉(zhuǎn)菜單是一個(gè)特殊的菜單，每一個(gè)選項(xiàng)都有一個(gè)超級(jí)鏈接與之相對(duì)應(yīng)。使用跳轉(zhuǎn)菜單可以創(chuàng)建Web站點(diǎn)內(nèi)文檔的鏈接、其它Web站點(diǎn)上文檔的鏈接、電子郵件鏈接以及圖形鏈接等。添加跳轉(zhuǎn)菜單的具體步驟如下：

(1)將光標(biāo)移到頁(yè)面中需要添加跳轉(zhuǎn)菜單的位置。

(2)單擊“表單”插入欄中的按鈕，彈出“插入跳轉(zhuǎn)菜單”對(duì)話(huà)框，如圖21.29所示。

(3)在“文本”中輸入菜單項(xiàng)的名稱(chēng)。

(4)在“選擇時(shí)，轉(zhuǎn)到URL”中為跳轉(zhuǎn)菜單添加超級(jí)鏈

接。

(5)在“打開(kāi)URL于”選擇打開(kāi)鏈接的方式，在“菜單名稱(chēng)”文本框中輸入該菜單項(xiàng)的名稱(chēng)。

(6)單擊“+”按鈕添加一個(gè)菜單項(xiàng)，用同樣的方法設(shè)置其它菜單項(xiàng)。

(7)單擊“確定”按鈕關(guān)閉對(duì)話(huà)框，即可在頁(yè)面中添加一個(gè)跳轉(zhuǎn)菜單，按F12鍵進(jìn)行預(yù)覽，效果如圖21.30所示。圖21.29“插入跳轉(zhuǎn)菜單”對(duì)話(huà)框圖21.30跳轉(zhuǎn)菜單21.2.8添加隱藏域

隱藏域用于存儲(chǔ)需要向服務(wù)器提交的信息，但不在頁(yè)面上顯示，如保存一些狀態(tài)信息，當(dāng)用戶(hù)下一次訪(fǎng)問(wèn)該網(wǎng)頁(yè)時(shí)，自動(dòng)對(duì)上一次訪(fǎng)問(wèn)的狀態(tài)進(jìn)行顯示。添加隱藏域的具體步驟如下：

(1)將光標(biāo)移到要添加隱藏域的位置。

(2)單擊“表單”插入欄中的按鈕即可在插入點(diǎn)處添加隱藏域，顯示為圖標(biāo)，如圖21.31所示。圖21.31添加的隱藏域選擇添加的隱藏域圖標(biāo)，點(diǎn)擊右鍵，彈出其“屬性”面板，如圖21.32所示。

該面板中各項(xiàng)參數(shù)的含義如下：

(1)隱藏區(qū)域：輸入隱藏域的名稱(chēng)，該名稱(chēng)可以被腳本或程序所引用。

(2)值：輸入隱藏域的值。圖21.32選擇隱藏域后的“屬性”面板21.2.9添加文件域

文件域可使訪(fǎng)問(wèn)者瀏覽本地電腦上的某個(gè)文件，實(shí)現(xiàn)上傳文件的功能。添加文件域的具體步驟如下：

(1)將光標(biāo)移