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

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