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

STYLEREFbt1a項(xiàng)目九STYLEREFbt1b應(yīng)用表單項(xiàng)目九應(yīng)用表單思政目標(biāo)嚴(yán)謹(jǐn)認(rèn)真，關(guān)注細(xì)小因素造成的影響。培養(yǎng)認(rèn)真細(xì)致的工作作風(fēng)和精益求精的工匠精神技能目標(biāo)學(xué)會(huì)插入表單，在表單中插入文本字段和文件域?qū)W會(huì)插入選擇框、單選按鈕和復(fù)選框?qū)W會(huì)插入圖像按鈕和其他各種按鈕學(xué)會(huì)處理表單項(xiàng)目導(dǎo)讀表單是交互式網(wǎng)站的基礎(chǔ)，在網(wǎng)頁(yè)上的用途很多，包括用戶注冊(cè)、調(diào)查問(wèn)卷、討論區(qū)、電子商務(wù)、客戶訂單，等等。這些功能通常由表單結(jié)合動(dòng)態(tài)數(shù)據(jù)庫(kù)實(shí)現(xiàn)。利用表單及相應(yīng)的表單構(gòu)件，可以將用戶輸入的表單數(shù)據(jù)提交到服務(wù)器，服務(wù)器處理表單數(shù)據(jù)，并反饋相應(yīng)的信息，從而實(shí)現(xiàn)收集用戶信息、提供電子商務(wù)服務(wù)和獲取用戶反饋信息等功能?？梢哉f(shuō)，表單是網(wǎng)站與瀏覽者之間溝通的橋梁。任務(wù)1創(chuàng)建表單網(wǎng)頁(yè)任務(wù)引入小明要為某客戶制作一個(gè)注冊(cè)網(wǎng)站，在這個(gè)網(wǎng)站中需要用戶輸入自己的相關(guān)信息，然后將這些信息提交到服務(wù)器，首先收集用戶信息可以通過(guò)創(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ù)器上，并由事先撰寫(xiě)的腳本程序處理，最后再由服務(wù)器將處理結(jié)果傳回給瀏覽者，即提交表單之后出現(xiàn)的頁(yè)面。表單中包含多種對(duì)象（也稱(chēng)作表單控件）。例如，用于輸入文字的文本域、用于發(fā)送命令的按鈕、用于選擇的單選框和復(fù)選框、用于設(shè)置信息的列表和菜單，等等。所有這些控件與在Windows各種應(yīng)用程序中遇到的非常相似。如果熟悉某種腳本語(yǔ)言，用戶還可以編寫(xiě)腳本或應(yīng)用程序來(lái)驗(yàn)證輸入信息的正確性。例如，可以檢查某個(gè)必須填寫(xiě)的文本域是否包含了一個(gè)特定的值。此外，Dreamweaver2021還集成了輕量級(jí)的JavaScript框架jQuery。利用一系列預(yù)置的表單驗(yàn)證控件，用戶可以更加輕松快捷地以可視化方式設(shè)計(jì)、開(kāi)發(fā)和部署動(dòng)態(tài)用戶界面。一、插入表單制作表單網(wǎng)頁(yè)，首先要在文檔中插入表單。插入表單的具體操作如下：（1）新建一個(gè)文檔，將光標(biāo)置于要插入表單的位置。（2）執(zhí)行“插入”/“表單”/“表單”菜單命令；或者在如圖9-1所示的“表單”插入面板上單擊“表單”按鈕，在頁(yè)面中插入表單。插入后的表單如圖9-2所示。在“設(shè)計(jì)”視圖中，用紅色的虛線輪廓線表示插入的表單。圖9-1表單面板圖9-2表單邊框注意表單標(biāo)記可以嵌套在其他HTML標(biāo)記中，其他HTML標(biāo)記也可以嵌套在表單中。但是，一個(gè)表單不能嵌套在另一個(gè)表單中。（3）執(zhí)行“窗口”/“屬性”命令，打開(kāi)如圖9-3所示的表單屬性面板，設(shè)置表單參數(shù)。圖9-3表單屬性面板屬性面板中的各個(gè)參數(shù)簡(jiǎn)要介紹如下：“ID”：對(duì)表單命名以進(jìn)行識(shí)別。該名稱(chēng)必須唯一。只有為表單命名后表單才能被腳本語(yǔ)言引用或控制。“動(dòng)作（Action）”：指明用于處理表單信息的腳本或動(dòng)態(tài)頁(yè)面路徑，該屬性決定如何處理表單內(nèi)容?？梢灾苯虞斎險(xiǎn)RL，或者單擊右側(cè)的文件夾圖標(biāo)瀏覽選擇URL。通常被指定為運(yùn)行一個(gè)特定的腳本程序或者發(fā)送e-mail的URL。“方法（Method）”：選擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。“POST”方法將在HTTP請(qǐng)求中嵌入表單數(shù)據(jù)，將表單值以消息方式送出，對(duì)傳送的數(shù)據(jù)量沒(méi)有限制?！癎ET”方法將提交的表單值作為請(qǐng)求該頁(yè)面的URL的附加值發(fā)送，傳送的數(shù)據(jù)量有限制。“默認(rèn)”方法使用瀏覽器的默認(rèn)設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器。通常，默認(rèn)方法為GET。注意不要使用GET方法發(fā)送長(zhǎng)表單。URL的長(zhǎng)度限制在8192個(gè)字符以?xún)?nèi)。如果發(fā)送的數(shù)據(jù)量太大，數(shù)據(jù)將被截?cái)啵瑥亩鴮?dǎo)致意外的或失敗的處理結(jié)果。而且，在發(fā)送用戶名和密碼、信用卡號(hào)或其他機(jī)密信息時(shí)，用GET方法傳遞信息不安全?！澳繕?biāo)”：在目標(biāo)窗口中顯示調(diào)用程序返回的數(shù)據(jù)。如果命名的窗口尚未打開(kāi)，則打開(kāi)一個(gè)具有該名稱(chēng)的新窗口?！熬幋a類(lèi)型（Enctype）”：指定對(duì)提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用的編碼類(lèi)型。默認(rèn)設(shè)置application/x-www-form-urlencode通常與POST方法協(xié)同使用。如果要?jiǎng)?chuàng)建文件上傳域，則應(yīng)指定multipart/form-dataMIME類(lèi)型?！癆cceptCharset（字符集）”：可接受的字符集。它標(biāo)示文檔的語(yǔ)言編碼。Dreamweaver2021默認(rèn)使用UTF-8編碼創(chuàng)建Unicode標(biāo)準(zhǔn)化表單?！癗oValidate（不驗(yàn)證）”：提交表單時(shí)不對(duì)form或input域進(jìn)行驗(yàn)證?！癆utoComplete（自動(dòng)完成）”：在表單項(xiàng)中鍵入字符后，將顯示可自動(dòng)完成輸入的候選項(xiàng)列表。在文檔窗口中插入表單之后，選中表單，可以在“代碼”視圖中看到類(lèi)似如下的代碼：<formaction="result.asp"method="post"name="form1"target="_blank"id="firstform"></form>這段代碼表示將名為firstform的表單以post的方式提交給result.asp進(jìn)行處理，且提交結(jié)果在一個(gè)新的頁(yè)面顯示，提交的MIME編碼為默認(rèn)的application/x-www-form-urlencode類(lèi)型。創(chuàng)建表單之后，就可以在表單內(nèi)創(chuàng)建各種表單對(duì)象了。表單的所有元素都應(yīng)包含在表單標(biāo)簽<form>…</form>之中。在Dreamweaver2021中，對(duì)表單對(duì)象的操作命令，主要集中在“插入”/“表單”菜單命令中；或如圖9-1所示的“插入”/“表單”面板中。下面對(duì)這些表單元素進(jìn)行簡(jiǎn)單的介紹。：文本，在表單中插入文本輸入框。：電子郵件，用于輸入e-mail地址，且在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證電子郵件域的值格式是否符合規(guī)范。：密碼，用于輸入密碼或口令，顯示為*號(hào)。：url，用于填寫(xiě)URL地址，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url格式是否正確。：電話，用于填寫(xiě)URL地址。：搜索，顯示為常規(guī)的文本域。：數(shù)字，用于驗(yàn)證輸入數(shù)值，并能指定數(shù)字的范圍、步長(zhǎng)和默認(rèn)值。：范圍，使用滑動(dòng)條指定數(shù)字范圍。：顏色，在頁(yè)面中添加一個(gè)顏色選擇控件。：月，在頁(yè)面中添加一個(gè)日歷控件，用于選取月和年。：周，在頁(yè)面中添加一個(gè)日歷控件，用于選取周和年。：日期，在頁(yè)面中添加一個(gè)日歷控件，用于選取日、月、年。：時(shí)間，在頁(yè)面中添加一個(gè)時(shí)間控件，用于選取小時(shí)和分鐘。：時(shí)間日期，在頁(yè)面中添加一個(gè)時(shí)間控件，用于選取時(shí)間、日、月、年（UTC時(shí)間）。：時(shí)間日期（當(dāng)?shù)兀?，在?yè)面中添加一個(gè)時(shí)間控件，用于選取時(shí)間、日、月、年（本地時(shí)間）。：隱藏，在表單中插入包含隱藏的信息。：文本區(qū)域，在表單中插入可以輸入多行文本的文本域。：?jiǎn)芜x按鈕，用于在提供的多個(gè)選項(xiàng)中做出單個(gè)選擇。：復(fù)選框，用于在提供的多個(gè)選項(xiàng)中做出多個(gè)選擇。：復(fù)選框組，用于創(chuàng)建多個(gè)復(fù)選框，并使這些復(fù)選框成為一組。：?jiǎn)芜x按鈕組，用于創(chuàng)建多個(gè)單選按鈕，并使這些單選按鈕成為一組。：選擇，在網(wǎng)頁(yè)中以列表的形式為用戶提供一系列的預(yù)設(shè)選擇項(xiàng)。：圖像按鈕，用圖形對(duì)象替換表單中的標(biāo)準(zhǔn)按鈕對(duì)象。：文件，在網(wǎng)頁(yè)中插入一個(gè)文件地址的輸入選擇欄。：按鈕，用于觸發(fā)服務(wù)器端腳本處理程序的表單對(duì)象。：“提交”按鈕，提交表單，用于觸發(fā)服務(wù)器端腳本處理程序。：“重置”按鈕，將表單中的輸入項(xiàng)置為初始狀態(tài)。：標(biāo)簽。在表單中插入該對(duì)象時(shí)，將拆分文檔窗口，并排顯示代碼視圖和設(shè)計(jì)視圖，并在代碼視圖中添加<label>標(biāo)簽和</label>標(biāo)簽，在這兩個(gè)標(biāo)簽之間用戶可以輸入相應(yīng)的文本或代碼。：域集，用于將它所包圍的元素用線框襯托起來(lái)。在表單中插入該對(duì)象時(shí)，將彈出一個(gè)“域集”對(duì)話框。在對(duì)話框的“標(biāo)簽”文本框中可以輸入內(nèi)容，系統(tǒng)自動(dòng)將類(lèi)似如下的標(biāo)簽和代碼加入到表單源代碼中。效果如圖9-4所示。圖9-4域集<fieldset>圖9-4域集<legend>域集</legend>HappyNewYear!</fieldset>二、文本字段和文件域“文本字段”即網(wǎng)頁(yè)中供用戶輸入文本的區(qū)域，“文本字段”分為單行文本、文本區(qū)域和密碼三種類(lèi)型，可以接受任何類(lèi)型的文本、字母或數(shù)字。文件域與單行文本字段非常相似，不同的是文件域多了一個(gè)“瀏覽”按鈕，用于瀏覽選擇隨表單一起上傳的文件。利用文件域的功能，可以將圖像文件、壓縮文件、可執(zhí)行文件等本地計(jì)算機(jī)上的文件上傳到服務(wù)器上，前提條件是服務(wù)器支持文件匿名上傳功能。案例——在文檔中插入文本字段和文件域下面通過(guò)一個(gè)簡(jiǎn)單實(shí)例演示在文檔中插入單行文本域、文本區(qū)域、密碼域和文件域的具體操作。（1）新建一個(gè)HTML文件，并設(shè)置背景。執(zhí)行“插入”/“表單”/“表單”命令，或者單擊“表單”插入面板上的“表單”按鈕，在文檔中插入一個(gè)表單。（2）在表單的屬性面板中，將表單的“Enctype（MIME類(lèi)型）”設(shè)置為multipart/form-data，“Method（方法）”屬性設(shè)置為POST方式。這一步的設(shè)置主要用于上傳文件。（3）將光標(biāo)置于表單中，執(zhí)行“插入”/“表單”/“文本”菜單命令，或單擊“表單”面板中的“文本”圖標(biāo)按鈕，即可在表單中添加一個(gè)文本字段，然后將文本字段的標(biāo)簽占位文本“TextField：”修改為“昵稱(chēng)：”。（4）選中插入的文本字段，在屬性設(shè)置面板左側(cè)的“Name”文本框中鍵入字段的名稱(chēng)“textfield”；在“Size（字符寬度）”中輸入20，“MaxLength（最大字符數(shù)）”設(shè)置為18；在“Value（初始值）”文本框輸入“行云流水”，屬性面板如圖9-5所示。圖9-5文本域的屬性面板需要注意，“字符寬度”用于設(shè)置文本字段的字符寬度；而“最大字符數(shù)”用于設(shè)置最多可輸入的字符數(shù)。不要把這兩者弄混淆。此時(shí)的頁(yè)面效果如圖9-6所示。圖9-6添加單行文本（5）另起一行，執(zhí)行“插入”/“表單”/“密碼”命令，添加第二個(gè)文本字段，并將標(biāo)簽占位文本“Password：”修改為“密碼：”。然后在屬性面板中設(shè)置“Name（名稱(chēng)）”為“pwd”；“Size（字符寬度）”為14，“MaxLength（最大字符數(shù)）”為12；“Value（初始值）”為“Vivian”，屬性面板如圖9-7所示。圖9-7密碼域的屬性面板此時(shí)的頁(yè)面效果如圖9-8所示。圖9-8添加密碼域如果希望保護(hù)輸入信息不被他人看到，可以使用密碼域，例如，在ATM上輸入時(shí)，PIN號(hào)碼是隱藏的。輸入密碼域中的信息不會(huì)以任何方式被加密，并且當(dāng)發(fā)送到Web管理者手中時(shí)，它會(huì)以常規(guī)文本的形式顯示。（6）另起一行，執(zhí)行“插入”/“表單”/“文本區(qū)域”命令，添加第三個(gè)文本字段，并將標(biāo)簽占位文本“TextArea：”修改為“自我介紹：”。在屬性面板中設(shè)置其N(xiāo)ame（名稱(chēng)）為“info”；“Cols（字符寬度）”為30，“Rows（行數(shù)）”為5，即最多能輸入的文本行數(shù)為5行；“Value（初始值）”為“個(gè)人資料說(shuō)明”，屬性面板如圖9-9所示。圖9-9文本區(qū)域的屬性設(shè)置面板此時(shí)的頁(yè)面效果如圖9-10所示。（7）另起一行，執(zhí)行“插入”/“表單”/“文件”命令，添加一個(gè)文件域，并將標(biāo)簽占位文本“File：”修改為“個(gè)人風(fēng)采：”。在屬性面板中設(shè)置“Name（名稱(chēng)）”為“photo”，屬性面板如圖9-11所示。圖9-10添加文本區(qū)域圖9-11文件域的屬性設(shè)置面板此時(shí)的頁(yè)面效果如圖9-12所示。圖9-12添加文件域有時(shí)候，需要訪問(wèn)者提供的信息過(guò)于復(fù)雜，無(wú)法在文本域中達(dá)成，如：經(jīng)過(guò)排版的簡(jiǎn)歷、圖形文件或其它文件。這種情況下就可以通過(guò)在網(wǎng)頁(yè)中加入文件域?qū)崿F(xiàn)。（8）保存文檔。按F12鍵在瀏覽器中預(yù)覽整個(gè)頁(yè)面。三、選擇框選擇框能夠以列表的形式提供一系列的預(yù)設(shè)選擇項(xiàng)，這對(duì)于美化版面和空間有限的頁(yè)面來(lái)說(shuō)，是非常不錯(cuò)的選擇。選擇框與文本域不同，在文本域中用戶可以隨心所欲鍵入任何信息，甚至包括無(wú)效的數(shù)據(jù)，而選擇框則提供確切的選擇項(xiàng)。在Dreamweaver2021中，可以在表單中插入兩種類(lèi)型的選擇框：一種是單擊時(shí)“下拉”的菜單；另一種是提供選擇項(xiàng)的可滾動(dòng)項(xiàng)目列表。盡管創(chuàng)建下拉菜單和滾動(dòng)列表的方式是一樣的，但是下拉菜單和滾動(dòng)列表卻提供不同的功能。下拉菜單通過(guò)下拉方式顯示多個(gè)可選項(xiàng)，一般只允許選擇一個(gè)可選項(xiàng)；列表通過(guò)類(lèi)似瀏覽器滾動(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)列表。案例——在表單中插入選擇框下面通過(guò)一個(gè)簡(jiǎn)單例子演示在表單中插入選擇框的方法。（1）執(zhí)行“插入”|“表單”|“表單”命令，或者單擊“表單”插入面板上的“表單”按鈕，添加表單。（2）執(zhí)行“插入”|“表單”|“選擇”命令，或單擊“表單”插入面板的“選擇”圖標(biāo)按鈕，在表單中添加一個(gè)“選擇”表單對(duì)象。（3）在屬性面板上單擊“列表值”按鈕，彈出“列表值”對(duì)話框，如圖9-13所示。（4）單擊“添加項(xiàng)”按鈕添加3個(gè)項(xiàng)目，“項(xiàng)目標(biāo)簽”分別為：西湖、靈隱寺和龍井山。單擊“確定”按鈕返回到列表的屬性面板，在“Selected（初始化時(shí)選定）”列表框中選擇“西湖”?！癝ize（高度）”：用于設(shè)置列表顯示的行數(shù)?！傲斜碇怠保河糜谠O(shè)置列表內(nèi)容。在這個(gè)對(duì)話框中可以添加或修改“列表/菜單”的項(xiàng)目?！癈lass（類(lèi)）”：用于設(shè)置應(yīng)用于“選擇框”的CSS樣式。“Selected（初始化時(shí)選定）”：用于設(shè)置“選擇框”的默認(rèn)選項(xiàng)。（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）保存文檔。至此，文檔創(chuàng)建完畢，在瀏覽器中測(cè)試選擇框的效果。如圖9-14所示。圖9-13“列表值”對(duì)話框圖9-14插入選擇框效果在列表中，按下Shift或Ctrl鍵，即可進(jìn)行多選。如果要查看其他列表項(xiàng)，可以拖動(dòng)列表右側(cè)的滾動(dòng)條。單擊下拉菜單右側(cè)的箭頭，即可查看所有的列表項(xiàng)。四、單選按鈕與復(fù)選框在表單中使用單選按鈕和復(fù)選框可以設(shè)置預(yù)定義的選項(xiàng)。訪問(wèn)者可以通過(guò)點(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ú)占性，也就是說(shuō)，在單選按鈕的待選項(xiàng)中，只允許有一個(gè)選項(xiàng)處于被選中狀態(tài)。案例——在表單中插入選按鈕和復(fù)選框下面通過(guò)一個(gè)簡(jiǎn)單例子演示單選按鈕和復(fù)選框的使用方法。（1）繼續(xù)上例。在表單中輸入文本“性別：”，然后單擊“表單”插入面板中的“單選按鈕”圖標(biāo)，添加一個(gè)單選按鈕，將標(biāo)簽占位文本修改為“男”。（2）在屬性面板中將新添加的單選按鈕對(duì)象命名為“gender”，設(shè)置Value（選定值）為“0”，Checked（選中）為“未選中”，如圖9-15所示。圖9-15單選按鈕的屬性面板“Name（名稱(chēng)）”：用于設(shè)置單選按鈕的名稱(chēng)。該名稱(chēng)可以被腳本或程序所引用。“Value（選定值）”：該單選按鈕被選中時(shí)的值，這個(gè)值將會(huì)隨表單一起提交。“Checked（選中）”：用于設(shè)置單選按鈕的初始狀態(tài)。同一組單選按鈕中只能有一個(gè)按鈕的初始狀態(tài)是選中的。圖9-16插入的單選按鈕“Class（類(lèi)）圖9-16插入的單選按鈕（3）按照上面兩步同樣的方法，再添加一個(gè)名為“gender”的單選按鈕，選定值為“1”，然后在單選按鈕右側(cè)鍵入文本“女”。此時(shí)結(jié)果如圖9-16所示。注意由于單選按鈕是以組為單位的，因此所有的單選按鈕都必須擁有同一個(gè)名稱(chēng)，并且值均不能相同。如果頁(yè)面中某個(gè)選項(xiàng)需要添加的單選按鈕很多，一個(gè)一個(gè)地添加單選按鈕，然后再一個(gè)一個(gè)地改名，實(shí)現(xiàn)起來(lái)特別繁瑣。使用“單選按鈕組”則可以一次建立一組單選按鈕。（4）單擊“單選按鈕組”按鈕，打開(kāi)如圖9-17所示的“單選按鈕組”對(duì)話框。（5）在“名稱(chēng)”文本框中定義單選按鈕組的名稱(chēng)。本例使用默認(rèn)設(shè)置。（6）在“單選按鈕”區(qū)域定義單選按鈕組中單選按鈕的個(gè)數(shù)，以及代表的值。單擊“標(biāo)簽”列下的“單選”，該文本框即變?yōu)榭删庉嫚顟B(tài)，輸入要在頁(yè)面上顯示的單選按鈕的標(biāo)簽；單擊“值”下面的“單選”，然后設(shè)置該單選按鈕被選中時(shí)的值。（7）單擊列表框左上角的和按鈕，添加和減少單選按鈕的數(shù)目。（8）單擊列表框右上角的和按鈕，調(diào)整當(dāng)前選中的單選按鈕在單選按鈕組中的位置。（9）在“布局，使用”區(qū)域設(shè)置單選按鈕組中各個(gè)單選按鈕的分隔方式。本例選擇“表格”。此時(shí)的對(duì)話框如圖9-18所示。圖9-17“單選按鈕組”對(duì)話框（1）圖9-18“單選按鈕組”對(duì)話框（2）插入的單選按鈕組的各個(gè)單選按鈕是上下排列的，用戶可以通過(guò)<br>標(biāo)簽分開(kāi)，也可以選擇通過(guò)表格的單元格來(lái)界定。（10）單擊“確定”按鈕關(guān)閉對(duì)話框，并在頁(yè)面中插入單選按鈕組，如圖9-19所示。（11）選中單選按鈕組，在屬性面板中可以設(shè)置各個(gè)單選按鈕的初始狀態(tài)。（12）執(zhí)行“插入”/“表單”/“復(fù)選框”菜單命令，或單擊“表單”插入面板中的“復(fù)選框”按鈕，即可在表單中添加一個(gè)復(fù)選框，然后修改標(biāo)簽的占位文本為“Photoshop”。（13）重復(fù)步驟12，再插入三個(gè)復(fù)選框。如圖9-20所示。圖9-19插入的單選按鈕組圖9-20插入的復(fù)選框效果（14）分別選中頁(yè)面上的復(fù)選框，在屬性面板中設(shè)置名稱(chēng)和初始狀態(tài)。“Name（名稱(chēng)）”：用于設(shè)置復(fù)選框的名稱(chēng)。該名稱(chēng)可以被腳本或程序所引用。（15）至此，文檔創(chuàng)建完畢，保存文檔。按下快捷鍵F12即可在瀏覽器中預(yù)覽頁(yè)面的效果。五、按鈕按鈕對(duì)于HTML表單來(lái)說(shuō)，是必不可少的，表單中的按鈕對(duì)象是用于觸發(fā)服務(wù)器端腳本處理程序的工具。Dreamweaver2021提供三種類(lèi)型的按鈕：提交、重置、無(wú)。其中，“提交”按鈕使用POST方法將表單提交給指定的動(dòng)作進(jìn)一步處理，通常是服務(wù)器端程序的URL或者一個(gè)mailto地址；“重置”按鈕清除表單中所有的域，以便重新輸入表單數(shù)據(jù)。案例——在文檔中插入按鈕下面通過(guò)一個(gè)簡(jiǎn)單實(shí)例演示在文檔中插入按鈕的具體操作。（1）執(zhí)行“插入”|“表單”|“表單”命令，或者單擊“表單”插入面板中的“表單”按鈕，添加表單。（2）執(zhí)行“插入”|“表單”|“提交按鈕”，或單擊“表單”插入面板中的“提交”按鈕圖標(biāo)，在表單中添加一個(gè)“提交”按鈕。該類(lèi)型的按鈕通常用于提交表單，將表單數(shù)據(jù)提交給處理應(yīng)用程序或腳本。（3）單擊“表單”插入面板中的“重置”按鈕圖標(biāo)，在表單中添加一個(gè)“重置”按鈕。該類(lèi)型的按鈕用于清除表單內(nèi)容，或?qū)⒈韱斡蛑刂脼樵贾?。圖9-21插入按鈕效果（4）單擊“表單”插入面板中的“按鈕”圖標(biāo)，在表單中添加一個(gè)普通按鈕（或稱(chēng)為無(wú)動(dòng)作按鈕）。用戶可以為該按鈕指定要執(zhí)行的動(dòng)作圖9-21插入按鈕效果該按鈕的“值”屬性默認(rèn)為“提交”，在屬性面板上將“值”屬性修改為“按鈕”。（5）保存文檔。至此，文檔創(chuàng)建完畢。可以按F12鍵在瀏覽器中預(yù)覽整個(gè)頁(yè)面，最終的創(chuàng)建效果如圖9-21所示。六、圖像按鈕在表單中，通常使用“提交”按鈕提交表單。事實(shí)上，“圖像按鈕”可以替代“提交”按鈕將表單數(shù)據(jù)提交給服務(wù)器端程序，而且使用圖像按鈕可以使頁(yè)面更美觀。案例——在網(wǎng)頁(yè)中插入圖像按鈕下面通過(guò)一個(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像素。然后在屬性面板上將表格對(duì)齊方式設(shè)置為“居中”對(duì)齊。（3）選中所有單元格，在屬性面板上設(shè)置單元格高度為30；選中第一行和第二行單元格，在屬性面板上設(shè)置單元格內(nèi)容水平“左對(duì)齊”，垂直“居中”對(duì)齊；選中第三行單元格，設(shè)置單元格內(nèi)容水平“居中對(duì)齊”，垂直“居中”對(duì)齊。（4）將光標(biāo)置于第一行單元格中，執(zhí)行“插入”/“表單”/“文本”命令，在第一行插入文本域，并將標(biāo)簽的占位文本修改為“Name：”。同樣的方法，在表格的第二行插入文本域，并修改標(biāo)簽占位文本為“Tel：”。（5）將光標(biāo)定位于表格第三行的單元格內(nèi)，執(zhí)行“插入”/“表單”/“圖像按鈕”菜單命令，或單擊“表單”面板上的“圖像按鈕”，在彈出的“選擇圖像源文件”對(duì)話框中選擇一個(gè)需要的圖像文件，然后單擊“確定”按鈕，在屬性面板上設(shè)置關(guān)聯(lián)的表單為form1。（6）保存文檔，按F12鍵預(yù)覽頁(yè)面。用戶將發(fā)現(xiàn)單擊圖像后頁(yè)面沒(méi)有變化，并沒(méi)有提交表格。繼續(xù)下面的步驟。（7）單擊文檔窗口上的“拆分”按鈕，切換到“拆分”視圖。在“設(shè)計(jì)”視圖中單擊圖像按鈕，“代碼”視圖中相應(yīng)的代碼將突出顯示。（8）在圖像按鈕代碼末尾加上value屬性，并指定值。這時(shí)圖像按鈕代碼如下：<inputtype="image"name="imageField"id="imageField"src="../images/email.jpg"value="submit">。（9）在“設(shè)計(jì)”視圖中選中圖像按鈕，在對(duì)應(yīng)的屬性面板上設(shè)置圖像按鈕的屬性?！癗ame（名稱(chēng)）”：用于設(shè)置圖像按鈕的名稱(chēng)。該名稱(chēng)可以被腳本或程序引用?！癝rc（源文件）”：用于設(shè)置圖像的URL地址?！癋ormAction（動(dòng)作）”：用于指定圖像按鈕的動(dòng)作腳本?！癆lt（替換）”：用于設(shè)置圖像的替換文字，當(dāng)瀏覽器不顯示圖像時(shí)，會(huì)用輸入的文字替換圖像。圖9-22實(shí)例效果“編輯圖像”：?jiǎn)?dòng)默認(rèn)的圖9-22實(shí)例效果設(shè)置屬性后的圖像域代碼如下：<inputname="submit"type="image"id="submit"form="form1"formenctype="multipart/form-data"value="submit"src="../images/email.jpg"alt="提交">（10）保存文檔。按F12鍵在瀏覽器中預(yù)覽整個(gè)頁(yè)面，如圖9-22所示。七、隱藏域?qū)⑿畔谋韱蝹魉偷椒?wù)器處理時(shí)，編程者常常需要發(fā)送一些不應(yīng)該被訪問(wèn)者看到的數(shù)據(jù)，例如，服務(wù)器端腳本程序需要的變量。此時(shí)，隱藏域?qū)τ诰幊陶叨詷O其有用。圖9-23插入隱藏域的效果“隱藏域”是一種在瀏覽器上不顯示的表單對(duì)象，利用“隱藏域”可以實(shí)現(xiàn)瀏覽器與服務(wù)器在后臺(tái)隱藏地交換信息?！半[藏域圖9-23插入隱藏域的效果在網(wǎng)頁(yè)中插入“隱藏域”可執(zhí)行以下操作步驟：（1）執(zhí)行“插入”/“表單”/“表單”命令，或者單擊“表單”面板中的“表單”按鈕，添加表單。（2）將光標(biāo)置于表單中，執(zhí)行“插入”/“表單”/“隱藏”菜單命令，或單擊“表單”插入面板上的“隱藏”按鈕插入隱藏域，此時(shí)“設(shè)計(jì)”視圖中顯示隱藏域占位符，如圖9-23所示。（3）在屬性設(shè)置面板中設(shè)置隱藏域的參數(shù)值?！癗ame（名稱(chēng)）”：用于設(shè)置隱藏域的名稱(chēng)。該名稱(chēng)可以被腳本或程序所引用?！癡alue（值）”：用于設(shè)置隱藏域的參數(shù)值。該值將在提交表單時(shí)傳遞給服務(wù)器?！癋orm（表單）”：用于指定隱藏域關(guān)聯(lián)的表單ID。。。任務(wù)2處理表單任務(wù)引入小明已經(jīng)創(chuàng)建了表單網(wǎng)頁(yè)，用戶可以根據(jù)網(wǎng)頁(yè)的提示輸入自己的數(shù)據(jù)信息，但是這些信息是否真實(shí)有效，這就需要利用服務(wù)器應(yīng)用程序或客戶端腳本來(lái)處理信息，那么如何來(lái)處理表單數(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)用程序來(lái)處理相應(yīng)的信息。通常，這些腳本或應(yīng)用程序由<form>標(biāo)記中的action屬性指定。常用的腳本語(yǔ)言有Java、C、VBScript、Perl和JavaScript等。如果需要完成的操作比較簡(jiǎn)單，可以放在客戶端進(jìn)行。案例——處理表單下面通過(guò)一個(gè)“個(gè)人資料填寫(xiě)”網(wǎng)頁(yè)實(shí)例的制作，介紹表單、各種表單對(duì)象和表格的聯(lián)合應(yīng)用。為簡(jiǎn)單起見(jiàn)，表單的處理采用將內(nèi)容發(fā)送到制作者郵箱的方法；采用JavaScript腳本語(yǔ)言檢查表單數(shù)據(jù)的有效性。實(shí)例中的表單結(jié)構(gòu)如圖9-24所示。圖9-24網(wǎng)頁(yè)中的表單結(jié)構(gòu)（1）啟動(dòng)Dreamweaver2021，創(chuàng)建一個(gè)HTML文檔。（2）在頁(yè)面中輸入標(biāo)題“個(gè)人資料填寫(xiě)”，并新建一個(gè)CSS規(guī)則h2設(shè)置字體、顏色和對(duì)齊等屬性，如圖9-25所示。（3）插入一個(gè)表單。在屬性面板上設(shè)置表單ID為form1，Action（動(dòng)作）為mailto:webmaster@，Method（方法）為POST。（4）為便于排版，在表單內(nèi)插入一個(gè)7行1列的表格。在屬性面板上設(shè)置表格的“邊框”值為0，單元格間距為0，“對(duì)齊”方式為“居中對(duì)齊”，“背景顏色”為“#66CC99”。（5）輸入圖9-25中的文本和各種表單對(duì)象。各對(duì)象的參數(shù)設(shè)置如下（以等號(hào)表示相應(yīng)的設(shè)置值，未給出的參數(shù)采用默認(rèn)值）?！靶彰蔽谋居颍?Name"="name"；"Size(字符寬度)"="20"；"MaxLength(最多字符數(shù))"="20"?！澳小眴芜x按鈕："Name"="sex"；勾選“Checked”復(fù)選框?！芭眴芜x按鈕："Name"="sex"；不勾選“Checked”復(fù)選框?！懊艽a”文本框："Name"="password"；"size(字符寬度)"="20"；"MaxLength(最多字符數(shù))"="20"?！皩W(xué)歷”列表框："Name"="edu"；"Size"="1"；“列表值”設(shè)置如圖9-24所示；"Selected（初始化選中）"="本科"?！耙魳?lè)”復(fù)選框："Name"="music"；勾選“Checked”復(fù)選框。“電影”復(fù)選框："Name"="movie"；不勾選“Checked”復(fù)選框?！皞渥ⅰ蔽谋緟^(qū)域："Name"="note"；"Cols"="50"；"Rows"="3"。“提交”按鈕："Name"="submit"；"Value"="提交"?！扒蹇铡卑粹o："Name"="reset"；"Value"="清空"。圖9-24h2屬性設(shè)置圖9-25“列表值”對(duì)話框至此，頁(yè)面制作基本完成，可以保存文檔并在瀏覽器中進(jìn)行測(cè)試。單擊網(wǎng)頁(yè)中的提交按鈕時(shí)，會(huì)彈出一個(gè)提示框。單擊“確定”按鈕繼續(xù)發(fā)送郵件，單擊“取消”按鈕則不發(fā)送郵件。通過(guò)測(cè)試會(huì)發(fā)現(xiàn)，在表單中不填任何數(shù)據(jù)，或填的數(shù)據(jù)無(wú)效，單擊“提交”按鈕仍然會(huì)發(fā)送郵件，這是網(wǎng)頁(yè)設(shè)計(jì)者不愿看到的。為了解決這個(gè)問(wèn)題，可以用JavaScript腳本語(yǔ)言對(duì)各個(gè)表單元素的值進(jìn)行有效性檢查。以下的步驟實(shí)現(xiàn)這個(gè)功能。（6）選中“提交”按鈕，切換到“代碼”視圖，在選中的代碼后輸入以下J