靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 第9章 應(yīng)用表單

項(xiàng)目九

應(yīng)用表單注和幾何約束任務(wù)1

創(chuàng)建表單網(wǎng)頁(yè)任務(wù)2處理表單任務(wù)1創(chuàng)建表單網(wǎng)頁(yè)任務(wù)引入小明要為某客戶制作一個(gè)注冊(cè)網(wǎng)站，在這個(gè)網(wǎng)站中需要用戶輸入自己的相關(guān)信息，然后將這些信息提交到服務(wù)器，首先收集用戶信息可以通過創(chuàng)建表單，用戶輸入表單數(shù)據(jù)之后，利用表單及相應(yīng)的表單構(gòu)件就可以將數(shù)據(jù)提交到服務(wù)器，那么常用的表單構(gòu)件有哪些，如何創(chuàng)建表單呢？知識(shí)準(zhǔn)備一個(gè)完整的表單應(yīng)該有兩個(gè)重要組成部分：一是含有表單和表單元素的網(wǎng)頁(yè)文檔，用于收集用戶輸入的信息；另一個(gè)是用于處理用戶輸入信息的服務(wù)器端應(yīng)用程序或客戶端腳本，如CGI、JSP、ASP，等等。提交表單之后，表單內(nèi)容將傳送到服務(wù)器上，并由事先撰寫的腳本程序處理，最后再由服務(wù)器將處理結(jié)果傳回給瀏覽者，即提交表單之后出現(xiàn)的頁(yè)面。表單中包含多種對(duì)象（也稱作表單控件）。例如，用于輸入文字的文本域、用于發(fā)送命令的按鈕、用于選擇的單選框和復(fù)選框、用于設(shè)置信息的列表和菜單，等等。此外，Dreamweaver2021還集成了輕量級(jí)的JavaScript框架jQuery。一、插入表單制作表單網(wǎng)頁(yè)，首先要在文檔中插入表單。插入表單的具體操作如下：（1）新建一個(gè)文檔，將光標(biāo)置于要插入表單的位置。（2）執(zhí)行“插入”/“表單”/“表單”菜單命令；或者在如圖所示的“表單”插入面板上單擊“表單”按鈕，在頁(yè)面中插入表單。（3）執(zhí)行“窗口”/“屬性”命令，打開如圖所示的表單屬性面板，設(shè)置表單參數(shù)。表單面板

表單邊框表單屬性面板域集二、文本字段和文件域“文本字段”即網(wǎng)頁(yè)中供用戶輸入文本的區(qū)域，“文本字段”分為單行文本、文本區(qū)域和密碼三種類型，可以接受任何類型的文本、字母或數(shù)字。文件域與單行文本字段非常相似，不同的是文件域多了一個(gè)“瀏覽”按鈕，用于瀏覽選擇隨表單一起上傳的文件。利用文件域的功能，可以將圖像文件、壓縮文件、可執(zhí)行文件等本地計(jì)算機(jī)上的文件上傳到服務(wù)器上，前提條件是服務(wù)器支持文件匿名上傳功能。案例——在文檔中插入文本字段和文件域下面通過一個(gè)簡(jiǎn)單實(shí)例演示在文檔中插入單行文本域、文本區(qū)域、密碼域和文件域的具體操作。（1）新建一個(gè)HTML文件，并設(shè)置背景。執(zhí)行“插入”/“表單”/“表單”命令，或者單擊“表單”插入面板上的“表單”按鈕，在文檔中插入一個(gè)表單。（2）在表單的屬性面板中，將表單的“Enctype（MIME類型）”設(shè)置為multipart/form-data，“Method（方法）”屬性設(shè)置為POST方式。（3）將光標(biāo)置于表單中，執(zhí)行“插入”/“表單”/“文本”菜單命令，或單擊“表單”面板中的“文本”圖標(biāo)按鈕，即可在表單中添加一個(gè)文本字段，然后將文本字段的標(biāo)簽占位文本“TextField：”修改為“昵稱：”。（4）選中插入的文本字段，在屬性設(shè)置面板左側(cè)的“Name”文本框中鍵入字段的名稱“textfield”；在“Size（字符寬度）”中輸入20，“MaxLength（最大字符數(shù)）”設(shè)置為18；在“Value（初始值）”文本框輸入“行云流水”，屬性面板如圖所示。（5）另起一行，執(zhí)行“插入”/“表單”/“密碼”命令，添加第二個(gè)文本字段，并將標(biāo)簽占位文本“Password：”修改為“密碼：”。（6）另起一行，執(zhí)行“插入”/“表單”/“文本區(qū)域”命令，添加第三個(gè)文本字段，并將標(biāo)簽占位文本“TextArea：”修改為“自我介紹：”。（7）另起一行，執(zhí)行“插入”/“表單”/“文件”命令，添加一個(gè)文件域，并將標(biāo)簽占位文本“File：”修改為“個(gè)人風(fēng)采：”。（8）保存文檔。

文本域的屬性面板添加單行文本

密碼域的屬性面板添加密碼域

文本區(qū)域的屬性設(shè)置面板添加文本區(qū)域文件域的屬性設(shè)置面板添加文件域三、選擇框選擇框能夠以列表的形式提供一系列的預(yù)設(shè)選擇項(xiàng)，這對(duì)于美化版面和空間有限的頁(yè)面來說，是非常不錯(cuò)的選擇。選擇框與文本域不同，在文本域中用戶可以隨心所欲鍵入任何信息，甚至包括無效的數(shù)據(jù)，而選擇框則提供確切的選擇項(xiàng)。在Dreamweaver2021中，可以在表單中插入兩種類型的選擇框：一種是單擊時(shí)“下拉”的菜單；另一種是提供選擇項(xiàng)的可滾動(dòng)項(xiàng)目列表。盡管創(chuàng)建下拉菜單和滾動(dòng)列表的方式是一樣的，但是下拉菜單和滾動(dòng)列表卻提供不同的功能。下拉菜單通過下拉方式顯示多個(gè)可選項(xiàng)，一般只允許選擇一個(gè)可選項(xiàng)；列表通過類似瀏覽器滾動(dòng)條的滾動(dòng)框顯示多個(gè)可選項(xiàng)，并可以自定義滾動(dòng)框的行高，允許瀏覽者選擇一個(gè)或多個(gè)選項(xiàng)。一般而言，當(dāng)可用的頁(yè)面空間非常小的時(shí)候，使用下拉菜單；當(dāng)需要控制顯示的選項(xiàng)數(shù)時(shí)，使用滾動(dòng)列表。案例——在表單中插入選擇框下面通過一個(gè)簡(jiǎn)單例子演示在表單中插入選擇框的方法。（1）執(zhí)行“插入”|“表單”|“表單”命令，或者單擊“表單”插入面板上的“表單”按鈕，添加表單。（2）執(zhí)行“插入”|“表單”|“選擇”命令，或單擊“表單”插入面板的“選擇”圖標(biāo)按鈕，在表單中添加一個(gè)“選擇”表單對(duì)象。（3）在屬性面板上單擊“列表值”按鈕，彈出“列表值”對(duì)話框，如圖所示。（4）單擊“添加項(xiàng)”按鈕添加3個(gè)項(xiàng)目，“項(xiàng)目標(biāo)簽”分別為：西湖、靈隱寺和龍井山。（5）按照上面的方法，在表單中添加第二個(gè)選擇框，單擊屬性面板上的“列表值”按鈕，依照上一步的操作方法添加3個(gè)項(xiàng)目，“項(xiàng)目標(biāo)簽”分別為：杭州、蘇州和揚(yáng)州。然后在“Selected（初始化時(shí)選定）”列表框中單擊“杭州”。（6）向表單添加第三個(gè)選擇框，單擊屬性面板上的“列表值”按鈕，為“選擇框”對(duì)象添加3個(gè)項(xiàng)目標(biāo)簽，分別為：北京、上海和香港，然后在“Selected（初始化時(shí)選定）”列表框單擊“香港”，“Size（高度）”設(shè)置為3。（7）保存文檔。在列表中，按下Shift或Ctrl鍵，即可進(jìn)行多選。如果要查看其他列表項(xiàng)，可以拖動(dòng)列表右側(cè)的滾動(dòng)條。單擊下拉菜單右側(cè)的箭頭，即可查看所有的列表項(xiàng)。四、單選按鈕與復(fù)選框在表單中使用單選按鈕和復(fù)選框可以設(shè)置預(yù)定義的選項(xiàng)。訪問者可以通過點(diǎn)擊單選按鈕或復(fù)選框選擇預(yù)置的選項(xiàng)。單選按鈕和復(fù)選框的區(qū)別在于它們的運(yùn)作方式不同。每個(gè)復(fù)選框都是獨(dú)立的，點(diǎn)擊選中只是在切換單個(gè)選項(xiàng)的選中與否，因此可以選中多個(gè)選項(xiàng)。而單選按鈕所有的待選項(xiàng)是一個(gè)整體，對(duì)于選項(xiàng)的選擇具有獨(dú)占性，也就是說，在單選按鈕的待選項(xiàng)中，只允許有一個(gè)選項(xiàng)處于被選中狀態(tài)?！傲斜碇怠睂?duì)話框

插入選擇框效果案例——在表單中插入選按鈕和復(fù)選框下面通過一個(gè)簡(jiǎn)單例子演示單選按鈕和復(fù)選框的使用方法。（1）繼續(xù)上例。在表單中輸入文本“性別：”，然后單擊“表單”插入面板中的“單選按鈕”圖標(biāo)，添加一個(gè)單選按鈕，將標(biāo)簽占位文本修改為“男”。（2）在屬性面板中將新添加的單選按鈕對(duì)象命名為“gender”，設(shè)置Value（選定值）為“0”，Checked（選中）為“未選中”，如圖所示。（3）按照上面兩步同樣的方法，再添加一個(gè)名為“gender”的單選按鈕，選定值為“1”，然后在單選按鈕右側(cè)鍵入文本“女”。（4）單擊“單選按鈕組”按鈕，打開如圖9-17所示的“單選按鈕組”對(duì)話框。（5）在“名稱”文本框中定義單選按鈕組的名稱。本例使用默認(rèn)設(shè)置。單選按鈕的屬性面板

插入的單選按鈕（6）在“單選按鈕”區(qū)域定義單選按鈕組中單選按鈕的個(gè)數(shù)，以及代表的值。（7）單擊列表框左上角的和按鈕，添加和減少單選按鈕的數(shù)目。（8）單擊列表框右上角的和按鈕，調(diào)整當(dāng)前選中的單選按鈕在單選按鈕組中的位置。（9）在“布局，使用”區(qū)域設(shè)置單選按鈕組中各個(gè)單選按鈕的分隔方式。本例選擇“表格”。此時(shí)的對(duì)話框如圖所示。（10）單擊“確定”按鈕關(guān)閉對(duì)話框，并在頁(yè)面中插入單選按鈕組，如圖所示。（11）選中單選按鈕組，在屬性面板中可以設(shè)置各個(gè)單選按鈕的初始狀態(tài)。（12）執(zhí)行“插入”/“表單”/“復(fù)選框”菜單命令，或單擊“表單”插入面板中的“復(fù)選框”按鈕，即可在表單中添加一個(gè)復(fù)選框，然后修改標(biāo)簽的占位文本為“Photoshop”。（13）重復(fù)步驟12，再插入三個(gè)復(fù)選框。如圖9-20所示。（14）分別選中頁(yè)面上的復(fù)選框，在屬性面板中設(shè)置名稱和初始狀態(tài)。（15）至此，文檔創(chuàng)建完畢，保存文檔?！皢芜x按鈕組”對(duì)話框（1）

“單選按鈕組”對(duì)話框（2）插入的單選按鈕組插入的復(fù)選框效果五、按鈕按鈕對(duì)于HTML表單來說，是必不可少的，表單中的按鈕對(duì)象是用于觸發(fā)服務(wù)器端腳本處理程序的工具。Dreamweaver2021提供三種類型的按鈕：提交、重置、無。其中，“提交”按鈕使用POST方法將表單提交給指定的動(dòng)作進(jìn)一步處理，通常是服務(wù)器端程序的URL或者一個(gè)mailto地址；“重置”按鈕清除表單中所有的域，以便重新輸入表單數(shù)據(jù)。案例——在文檔中插入按鈕下面通過一個(gè)簡(jiǎn)單實(shí)例演示在文檔中插入按鈕的具體操作。（1）執(zhí)行“插入”|“表單”|“表單”命令，或者單擊“表單”插入面板中的“表單”按鈕，添加表單。（2）執(zhí)行“插入”|“表單”|“提交按鈕”，或單擊“表單”插入面板中的“提交”按鈕圖標(biāo)，在表單中添加一個(gè)“提交”按鈕。該類型的按鈕通常用于提交表單，將表單數(shù)據(jù)提交給處理應(yīng)用程序或腳本。（3）單擊“表單”插入面板中的“重置”按鈕圖標(biāo)，在表單中添加一個(gè)“重置”按鈕。該類型的按鈕用于清除表單內(nèi)容，或?qū)⒈韱斡蛑刂脼樵贾怠＃?）單擊“表單”插入面板中的“按鈕”圖標(biāo)，在表單中添加一個(gè)普通按鈕（或稱為無動(dòng)作按鈕）。用戶可以為該按鈕指定要執(zhí)行的動(dòng)作。（5）保存文檔。至此，文檔創(chuàng)建完畢。插入按鈕效六、圖像按鈕在表單中，通常使用“提交”按鈕提交表單。事實(shí)上，“圖像按鈕”可以替代“提交”按鈕將表單數(shù)據(jù)提交給服務(wù)器端程序，而且使用圖像按鈕可以使頁(yè)面更美觀。案例——在網(wǎng)頁(yè)中插入圖像按鈕下面通過一個(gè)簡(jiǎn)單實(shí)例演示在網(wǎng)頁(yè)中插入圖像按鈕的具體操作，以及利用圖標(biāo)代替“提交”按鈕的技術(shù)。（1）新建一個(gè)HTML文檔。執(zhí)行“插入”/“表單”/“表單”菜單命令，或者單擊“表單”面板上的“表單”按鈕，在頁(yè)面中插入一張表單，設(shè)置表單ID為form1。（2）將光標(biāo)定位在表單內(nèi)，執(zhí)行“插入”/“表格”菜單命令插入一個(gè)三行一列的表格，寬為260像素。（3）選中所有單元格，在屬性面板上設(shè)置單元格高度為30；選中第一行和第二行單元格，在屬性面板上設(shè)置單元格內(nèi)容水平“左對(duì)齊”，垂直“居中”對(duì)齊；選中第三行單元格，設(shè)置單元格內(nèi)容水平“居中對(duì)齊”，垂直“居中”對(duì)齊。（4）將光標(biāo)置于第一行單元格中，執(zhí)行“插入”/“表單”/“文本”命令，在第一行插入文本域，并將標(biāo)簽的占位文本修改為“Name：”。（5）將光標(biāo)定位于表格第三行的單元格內(nèi)，執(zhí)行“插入”/“表單”/“圖像按鈕”菜單命令，或單擊“表單”面板上的“圖像按鈕”，在彈出的“選擇圖像源文件”對(duì)話框中選擇一個(gè)需要的圖像文件，然后單擊“確定”按鈕，在屬性面板上設(shè)置關(guān)聯(lián)的表單為form1。（6）保存文檔，按F12鍵預(yù)覽頁(yè)面。（7）單擊文檔窗口上的“拆分”按鈕，切換到“拆分”視圖。在“設(shè)計(jì)”視圖中單擊圖像按鈕，“代碼”視圖中相應(yīng)的代碼將突出顯示。（8）在圖像按鈕代碼末尾加上value屬性，并指定值。（9）在“設(shè)計(jì)”視圖中選中圖像按鈕，在對(duì)應(yīng)的屬性面板上設(shè)置圖像按鈕的屬性。（10）保存文檔。按F12鍵在瀏覽器中預(yù)覽整個(gè)頁(yè)面，如圖所示。七、隱藏域?qū)⑿畔谋韱蝹魉偷椒?wù)器處理時(shí)，編程者常常需要發(fā)送一些不應(yīng)該被訪問者看到的數(shù)據(jù)，例如，服務(wù)器端腳本程序需要的變量。此時(shí)，隱藏域?qū)τ诰幊陶叨詷O其有用?！半[藏域”是一種在瀏覽器上不顯示的表單對(duì)象，利用“隱藏域”可以實(shí)現(xiàn)瀏覽器與服務(wù)器在后臺(tái)隱藏地交換信息?！半[藏域”可以為表單處理程序提供一些有用的參數(shù)，而這些參數(shù)是用戶不關(guān)心的，不必在瀏覽器中顯示。在網(wǎng)頁(yè)中插入“隱藏域”可執(zhí)行以下操作步驟：（1）執(zhí)行“插入”/“表單”/“表單”命令，或者單擊“表單”面板中的“表單”按鈕，添加表單。（2）將光標(biāo)置于表單中，執(zhí)行“插入”/“表單”/“隱藏”菜單命令，或單擊“表單”插入面板上的“隱藏”按鈕插入隱藏域，此時(shí)“設(shè)計(jì)”視圖中顯示隱藏域占位符，如圖所示。（3）在屬性設(shè)置面板中設(shè)置隱藏域的參數(shù)值。任務(wù)2處理表單任務(wù)引入小明已經(jīng)創(chuàng)建了表單網(wǎng)頁(yè)，用戶可以根據(jù)網(wǎng)頁(yè)的提示輸入自己的數(shù)據(jù)信息，但是這些信息是否真實(shí)有效，這就需要利用服務(wù)器應(yīng)用程序或客戶端腳本來處理信息，那么如何來處理表單數(shù)據(jù)呢知識(shí)準(zhǔn)備一個(gè)完整的表單應(yīng)該有兩個(gè)重要組成部分：一是含有表單和表單元素的網(wǎng)頁(yè)文檔，另一個(gè)是用于處理輸入信息的服務(wù)器端應(yīng)用程序或客戶端腳本。因此，若要在網(wǎng)頁(yè)中實(shí)現(xiàn)信息的真正交互，僅在網(wǎng)頁(yè)中創(chuàng)建表單及表單對(duì)象是不夠的，還必須使用腳本或應(yīng)用程序來處理相應(yīng)的信息。通常，這些腳本或應(yīng)用程序由<form>標(biāo)記中的action屬性指定。常用的腳本語(yǔ)言有Java、C、VBScript、Perl和JavaScript等。如果需要完成的操作比較簡(jiǎn)單，可以放在客戶端進(jìn)行。案例——處理表單下面通過一個(gè)“個(gè)人資料填寫”網(wǎng)頁(yè)實(shí)例的制作，介紹表單、各種表單對(duì)象和表格的聯(lián)合應(yīng)用。（1）啟動(dòng)Dreamweaver2021，創(chuàng)建一個(gè)HTML文檔。（2）在頁(yè)面中輸入標(biāo)題“個(gè)人資料填寫”，并新建一個(gè)CSS規(guī)則h2設(shè)置字體、顏色和對(duì)齊等屬性，如圖所示。（3）插入一個(gè)表單。（4）為便于排版，在表單內(nèi)插入一個(gè)7行1列的表格。（5）輸入圖中的文本和各種表單對(duì)象。網(wǎng)頁(yè)中的表單結(jié)構(gòu)h2屬性設(shè)置“列表值”對(duì)話框（6）選中“提交”按鈕，切換到“代