《網(wǎng)頁設計與制作》網(wǎng)頁表單的應用

?網(wǎng)頁設計與制作?第11章網(wǎng)頁表單的應用11.1網(wǎng)頁中的表單知識 大家平時注冊時所看到的頁面中注冊項就我們所說的“表單〞。如圖11-1所示。

圖11-1注冊126郵箱表單1/12/20232用DreamweaverCS5可以為網(wǎng)頁插入表單，方法如下?！?〕在DreamweaverCS5翻開一個網(wǎng)頁，最好能先將此網(wǎng)頁文檔保存?！?〕在選擇菜單“插入〞→“表單〞命令，或在“插入〞面板中選擇“表單〞按鈕。為網(wǎng)頁添加一個表單。在“設計〞視圖中，可以看到表單以紅色虛線為標記。如果看不到紅色虛線框，可選擇“查看〞→“可視化助理〞→“不可見元素〞命令?！?〕在“表單ID〞文本框中輸入一個唯一的名稱來標識表單。1/12/20235〔4〕在“動作〞文本框中指定將要處理表單信息的腳本或者應用程序所在的URL路徑?？梢灾苯虞斎?，也可以點擊文本框旁邊的“文件夾〞圖標來獲得?！?〕在“目標〞下拉菜單中選擇返回數(shù)據(jù)的窗口的翻開方式。值_blank：表示在一個新窗口中翻開鏈接文檔。值_new：表示在一個新窗口中翻開鏈接文檔。值_parent：表示在包含這個鏈接的父框架窗口中翻開鏈接文檔。值_self：表示在包含這個鏈接的框架窗口中翻開鏈接文檔。值_top：表示在整個瀏覽器窗口中翻開鏈接文檔。1/12/20236〔6〕在“方法〞下拉菜單中選擇要處理表單數(shù)據(jù)的方式。POST：將表單值封裝在消息主體中發(fā)送。GET：將提交的表單值追加在URL后面發(fā)送給效勞器。這也是瀏覽器的默認設置傳遞表單數(shù)據(jù)的方式?！?〕在“編碼類型〞下拉菜單中選擇表單數(shù)據(jù)在被發(fā)送到效勞器之前應該如何加密編碼。Application/x-www-form-urlencoded：普通URL方式處理表單內容。Multipart/form-data：處理文件上傳域時采用的編碼方式。1/12/20237〔8〕類：定義表單及其中各種表單對象的樣式。如果用戶設置表單的方式為“默認〞或“get〞，那么該編碼類型的設置是無效的。如果設置表單的方法是“post〞，那么可以通過編碼類型確定數(shù)據(jù)是上傳到效勞器數(shù)據(jù)庫中，還是同時存儲到效勞器的磁盤中。1/12/2023811.2插入文本域文本域是最根本的表單對象，在文本域中，網(wǎng)頁程序可以獲得用戶輸入的各種文本信息，同時將將這些信息傳送給效勞器。文本域可分為文本字段和文本區(qū)域。1/12/2023911.2.1文本字段文本字段是單行的文本域表單對象，也就是說這些文本信息不會發(fā)生換行。插入文本字段的具體操作如下。1/12/202310〔1〕點擊鼠標，將光標定位在表單虛線框線內，點擊“插入〞菜單，選擇“表單〞項，在彈出的子菜單中選擇“文本域〞命令。或者在“插入〞面板中選擇“表單〞項，點擊“文本字段〞圖標，那么翻開“輸入標簽輔助功能屬性〞對話框，如圖11-5所示。圖11-5設置文本字段屬性1/12/202311〔2〕在“輸入標簽輔助功能屬性〞對話框中，可為文本字段的表單對象添加標簽文本，同時可設置標簽文本的位置?！?〕在“輸入標簽輔助功能屬性〞對話框中，各項的解釋及應用方法如下：ID：用于提供腳本的引用。指定了<input>元素的名稱和ID號。名稱和ID號是一致的。標簽：文本字段的提示文本。即表單控件的提示信息。樣式：說明“標簽〞內容的使用方式。分為三種情況：第一情況：使用“for〞屬性附加標簽標記。第二情況：選擇“用標簽標記環(huán)繞〞選項。第三情況：選擇“無標簽標記〞選項。1/12/202312位置：說明“標簽〞內容所處的位置。分為兩種情況：

第一種情況：選擇“在表單項前〞選項。上面的提示信息都是在表單項前。如圖11-6所示。圖11-6插入文本字段

第二種情況：選擇“在表單項后〞選項。如圖11-7所示。

圖11-7插入文本字段在“代碼〞視圖中可以查看源代碼：訪問鍵：訪問該文本字段的快捷鍵。Tab鍵索引：在當前網(wǎng)頁中的Tab鍵訪問順序。1/12/202313〔4〕經(jīng)過上面設置后，其瀏覽效果，如圖11-8所示。圖11-8文本字段瀏覽效果〔5〕設置或修改單行文本域的屬性：文本域：指定了<input>元素的名稱和ID號。字符寬度：指定文本域的長度，默認值為24個字符左右。最多字符數(shù)：允許用戶輸入的最大字符數(shù)目。初始值：為默認狀態(tài)下填寫在單行文本框中的文字。禁用：文本框顯示為灰色，不可以提交文本內容，而且其中的文本不可修改，值為disable。只讀：文本框顯示為正常顏色，可以白提交文本內容，而且其中的文本不可修改，值為readonly。單行：默認項，文本表單對象。多行：將文本字段轉化為文本區(qū)域。密碼：設置文本字段中文本為密碼類型〔顯示為星號“*〞〕。1/12/20231411.2.2創(chuàng)立文本區(qū)域1.創(chuàng)立文本區(qū)域有兩種方法：方法一：先為表單插入一個文本字段的對象。然后在“屬性〞面板中設置“類型〞為“多行〞。方法二：單擊浮動面板“插入〞中的“文本區(qū)域〞〔不是“文本字段〞〕按鈕，在彈出的“輸入標簽輔助功能〞對話框中進行各種屬性的設置。

1/12/2023152.網(wǎng)頁中設置文本區(qū)域屬性：Overflow用來設置內容溢出〔設置被設定對象是否顯示滾動條〕overflow-x用來設置水平方向內容溢出overflow-y用來設置垂直方向內容溢出上述的三個屬性設置的值分別為visible(默認值)、scroll、hidden、auto。scrollbar-3d-light-color用來設置立體滾動條亮邊的顏色〔設置滾動條的顏色〕scrollbar-arrow-color用來設置上下按鈕上三角箭頭的顏色scrollbar-base-color用來設置滾動條的根本顏色scrollbar-dark-shadow-color用來設置立體滾動條強陰影的顏色scrollbar-face-color用來設置立體滾動條凸出局部的顏色scrollbar-highlight-color用來設置滾動條空白局部的顏色scrollbar-shadow-color用來設置立體滾動條陰影的顏色1/12/202316設置瀏覽器滾動方式：〔1〕設置瀏覽器窗口永遠都不出現(xiàn)滾動條無水平滾動條<bodystyle="overflow-x:hidden">〔2〕無垂直滾動條<bodystyle="overflow-y:hidden">無滾動條<bodystyle="overflow-x:hidden;overflow-y:hidden">或<bodystyle="overflow:hidden">〔3〕設置多行文本框的滾動條無水平滾動條<textareastyle="overflow-x:hidden"></textarea>1/12/202317〔1〕點擊鼠標，將光標定位在表單框線內，點擊菜單“插入〞→“表單〞→“單項選擇按鈕〞命令?；蛘咴凇安迦毹暶姘逯羞x擇“表單〞項，點擊“單項選擇按鈕〞圖標。在彈出的對話框如圖11-11所示中，進行設置?！?〕單擊“確定〞按鈕后，單項選擇按鈕出現(xiàn)在文檔中。如圖11-12所示。圖11-11單項選擇按鈕設置圖11-12單項選擇按鈕創(chuàng)立效果1/12/202318〔3〕在文檔中點擊“單項選擇按鈕〞表單控件，如圖11-12中已經(jīng)選中，那么出現(xiàn)其對應“屬性〞面板?！皩傩渊暶姘逯兄饕獙傩哉f明如下所示：選定值：用來設置在在該單項選擇按鈕被選中時發(fā)送給效勞器的值。例如，在性別的“選定值〞文本框中選擇男，這時就表示用戶選擇的性別是男。初始狀態(tài)：用來表示在瀏覽器中加載表單時，該單項選擇按鈕是否處于選中狀態(tài)。如果插入的單項選擇按鈕比較多，那么這時也可以用菜單命令“插入→表單→單項選擇按鈕組〞，此時就可以在彈出的“單項選擇按鈕組〞對話框中對單項選擇按鈕進行設置。1/12/20231911.3.2插入單項選擇按鈕組1.點擊鼠標，將光標定位在表單框線內，點擊“插入〞→“表單〞→“單項選擇按鈕組〞命令?；蛘咴凇安迦毹暶姘逯羞x擇“表單〞項，點擊“單項選擇按鈕組〞圖標，如以下圖11-13所示。圖11-13單項選擇按鈕組設置1/12/202320〔2〕單擊“單項選擇按鈕組〞對話框中的“確定〞，得到如圖11-14所示的結果。圖11-14單項選擇按鈕組創(chuàng)立效果1/12/20232111.4插入復選框和復選框組復選框又稱選擇框，它和單項選擇按鈕不同，單項選擇按鈕只能在多數(shù)的選項中選擇其中的一項，但是復選框卻可以在一組選項中選擇多個選項，而且每個復選框之間都是相互獨立的，因此每一個復選框都必須要有一個唯一的名稱。復選框的狀態(tài)：如果翻開復選框，那么復選框中就會出現(xiàn)一個“√〞，這就表示用戶選擇了這個復選框；如果在單擊一下復選框，此時那個對號就會消失，這就代表關閉了復選框，此時復選框中就沒有任何標志了。1/12/202322〔1〕點擊鼠標，將光標定位在表單框線內，點擊“插入〞→“表單〞→“復選框〞命令?！?〕在“輸入標簽輔助功能屬性〞對話框單擊“確定〞后，出現(xiàn)如圖11-15所示。圖11-15復選框創(chuàng)立效果〔3〕“屬性〞面板中相關屬性設置選定值：它是用來設置在該復選框被選中時發(fā)送給效勞器的值。初始狀態(tài)：用來確定在瀏覽器中加載表單時，這個復選框是否處于選中狀態(tài)。1/12/20232311.4.2插入復選框組〔1〕點擊鼠標，將光標定位在表單框線內，點擊“插入〞菜單，選擇“表單〞項，在彈出的子菜單中選擇“復選框組〞命令?！?〕單擊“復選框組〞對話框中的“確定〞，得到如圖11-18所示的結果。圖11-18復選框組創(chuàng)立效果1/12/20232411.5插入列表和菜單列表/菜單，用來在一個滾動列表中顯示選項值，用戶此時就可以從該滾動列表中選擇多個選項?！傲斜悫曔x項通常在一個菜單中顯示選項值，而且用戶只能從中選擇單個選項。但是可以在以下情況下使用菜單：在頁面只有有限的空間但是還必須要顯示多個內容項時，或者想要控制返回給效勞器的值時都可以使用菜單。其實菜單和文本域不相同，在文本域中用戶可以隨心所欲輸入自己的任何信息，甚至可以輸入無效的數(shù)據(jù)。但是對于菜單而言，用戶就只能具體設置某個菜單返回確實切值。1/12/20232511.5.1菜單表單〔1〕點擊鼠標，將光標放在表單框線內，點擊“插入〞→“表單〞→“選擇〔列表/菜單〕〞命令。〔2〕單擊“輸入標簽輔助功能屬性〞對話框中的“確定〞按鈕?！?〕在文檔中點擊“選擇〔列表/菜單〕〞表單控件?！?〕“選擇〞項：輸入名稱?！?〕“類型〞項：選擇菜單。〔6〕“列表值〞按鈕：單擊“列表值〞按鈕添加菜單項選擇項，出現(xiàn)“列表值〞對話框。在“列表值〞對話框中，按添加按鈕，那么可添加工程標簽和值。單擊向上向下按鈕可以調整工程標簽的順序?！?〕添加工程結束時，單擊“確定〞按鈕關閉“列表值〞對話框。1/12/20232611.5.2列表表單列表表單的功能與菜單表單類似，其區(qū)別主要在于，列表表單可以設置默認顯示的內容數(shù)量，而無需用戶單擊彈出。如果列表菜單的工程數(shù)量超出列表的高度，那么可以滾動條進行調節(jié)。1/12/20232711.5.3跳轉菜單跳轉菜單是網(wǎng)頁文檔內的彈出菜單，跳轉菜單對站點瀏覽者都可見，并且可以列出鏈接到文檔或者文件的選項。跳轉菜單不僅可以創(chuàng)立到整個Web站點內文檔的鏈接到其它Web站點上文檔的鏈接、電子郵件鏈接、圖形的鏈接，而且也可以創(chuàng)立到可在瀏覽器中翻開的任何文件類型的鏈接。1/12/202328通常跳轉菜單包含的三個根本局部如下所示：〔可選〕菜單項選擇擇提示：例如菜單項的類別說明，或者說是一些提示信息等?！脖匦琛乘溄硬藛雾椀牧斜恚罕硎居脩暨x擇某個選項，那么鏈接到的文檔或者文件就會被翻開。〔可選〕“前往〞按鈕。1/12/202329創(chuàng)立跳轉菜單的具體步驟如下所示：〔1〕先在網(wǎng)頁中插入一表單域，方法如前所講?！?〕選擇表單域。單擊菜單中的“插入〞→“表單對象〞→“跳轉菜單〞命令，或單擊“插入〞面板單擊“表單〞中的“跳轉菜單〞圖標，都可以調出“插入跳轉菜單〞設置窗口來創(chuàng)立跳轉菜單。如圖11-26所示。圖11-26跳轉菜單對話框1/12/202330〔3〕接下來可以在文本欄里輸入想要的網(wǎng)站，并且輸入網(wǎng)站的名稱，然后可以選擇轉到相應的網(wǎng)站連接中，并且輸入網(wǎng)站的IP地址，同時也要輸入菜單的名稱，效果如圖11-27所示。所有都完成了以后，菜單項的一欄中就會又多了一個選項，而這個選項就應該對應一個網(wǎng)的鏈接地址。圖11-27輸入信息1/12/202331〔4〕接下來在“文本〞一欄中輸入“請選擇相關網(wǎng)站〞字樣，然后用鼠標點擊窗口上的“+〞按鈕，那么此時插入的菜單就都會顯示在菜單欄中，效果如圖11-28所示。圖11-28菜單項1/12/202332〔5〕在設置窗口的“菜單之后插入前往按鈕〞一項首先不要進行選擇。〔6〕用鼠標點擊“確定〞，此時將跳轉菜單插入到頁面中，效果如圖11-29所示。圖11-29跳轉菜單效果圖1/12/202333〔7〕其實跳轉菜單在本質上也是一個表單，因此是先插入了表單〔紅色虛線區(qū)域〕，然后在表單中再次插入了下拉菜單?！?〕可以在“屬性〞面板中選擇跳轉菜單，這樣就可以設置菜單的名稱、類型等?！?〕如果選中跳轉菜單，那么行為窗口中也出現(xiàn)行為，鼠標雙擊該行為，此時就會進入設置窗口，這樣就可以在設置窗口中重新對其進行設置。1/12/202334〔10〕鼠標單擊“屬性〞面板中的“列表值〞按鈕，就會彈出“列表值〞對話框。〔11〕如果想要修改選項，那么可以選中頁面上的下拉菜單，此時鼠標單擊屬性面板中的“列表值〞，就可以對各項內容進行修改了。〔12〕保存網(wǎng)頁文檔，按F12進入網(wǎng)頁瀏覽網(wǎng)頁，在跳轉菜單項選擇擇一個網(wǎng)站。〔13〕然后單擊“前往〞按鈕，那么可翻開該網(wǎng)站的首頁。1/12/20233511.6插入按鈕和文件域通常命令按鈕控件是在應用程序中起控制作用的，命令按鈕控件是被用來進行某一操作，它的代碼一般被放置在命令按鈕的Click事件中，通過代碼對命令按鈕進行控制。命令按鈕的常用屬性如下表所示。屬性說明Cancel當該項為T時，回車就好比執(zhí)行“Esc”Caption用來在按鈕上顯示標題Default當該項為.T.時，回車就好比執(zhí)行“Click”DisablePicture當按鈕失效時，表示顯示的BMP圖片DownPicture當按鈕按下時，表示顯示的BMP圖片Enabled表示能否選擇這個按鈕Picture表示顯示在按鈕上的BMP圖片表11-2常用命令按鈕屬性1/12/202336命令按鈕最主要的事件如下表所示。事件說明Click表示在按鈕上按下并松開主鼠標鍵時產(chǎn)生此事件MiddleClick表示在按鈕上按下并松開鼠標的中間鍵時產(chǎn)生此事件MouseDown表示在按鈕上按下主鼠標鍵時產(chǎn)生此事件MouseUp表示在按鈕松開主鼠標鍵時產(chǎn)生此事件RightClick表示在按鈕上按下并松開輔鼠標鍵時產(chǎn)生此事件表11-3常用命令按鈕事件1/12/20233711.6.1按鈕表單通常按鈕是網(wǎng)頁中最常見的表單對象，一般用按鈕來控制表單動作，而且表單按鈕可以將輸入表單的數(shù)據(jù)提交到效勞器，或者選擇重新輸入該表單中的數(shù)據(jù)。1/12/202338插入按鈕的具體操作步驟如下所示?！?〕點擊鼠標，將光標定位在表單框線內，點擊“插入〞→“表單〞→“按鈕〞命令?；蛘咴凇安迦毹暶姘逯羞x擇“表單〞項，點擊“按鈕〞圖標?！?〕在彈出的“輸入標簽輔助功能屬性〞對話框，進行設置。〔3〕單擊“確定〞按鈕，表單按鈕出現(xiàn)在文檔中?！?〕在文檔中點擊“按鈕〞表單控件，在按鈕的“屬性〞面板中主要的參數(shù)如下所示。1/12/20233911.6.2插入文件域文件域是一種特殊的表單。如果需要將整個文件傳送到效勞器上，那么可以在表單中建立文件域來完成這個任務。假設要使用文件域，表單的方式必須設置為POST。訪問者可以將文件上載到你在表單的action屬性中所指定的URL地址。在文本域，用戶可以調用本地操作系統(tǒng)的“選擇要加載的文件〞對話框，選擇本地的文件，并將該文件的URL路徑添加到表單中。這樣，在提交表單時，就可以將該URL路徑傳輸給效勞器，并將相應的文件也一起上傳。1/12/202340具體操作如下：〔1〕按照面所講的操作，在文檔中插入一個表單。并作“屬性〞的設置。在表單“屬性〞面板中將“方法〞項選擇為POST。在“編碼類型〞下拉列表中選擇multipart/form-data?！?〕將光標定位在表單框線內，點擊“插入〞→“表單〞項，在彈出的子菜單中選擇“文件域〞命令?；蛘咴凇安迦毹暶姘逯羞x擇“表單〞項，點擊“文件域〞圖標命令。彈出“輸入標簽輔助功能屬性〞對話框，進行設置。1/12/202341〔3〕單擊“輸入標簽輔助功能屬性〞對話框的“確定〞按鈕，文件域出現(xiàn)在文檔中?！?〕點擊“文件域〞，在“文件域〞屬性面板進行設置。文件域名稱：為該文件域對象輸入一個名稱。字符寬度：輸入一個數(shù)值。最多字符數(shù)：輸入一個數(shù)值?！?〕保存文檔。F12鍵，進行瀏覽?！?〕單擊“瀏覽〞按鈕，那么可翻開“選擇要加載的文件〞對話框，選擇要傳遞的文件。1/12/20234211.7驗證表單內容在DreamweaverCS5中將表單插入網(wǎng)頁后，還可以對表單作進一步的處理，檢測表單中的內容，并根據(jù)這些內容反響信息，幫助用戶正確地完成表單。如果作到這些，就要用到Spry表單驗證技術。1/12/20234311.7.1Spry表單驗證技術以前在動態(tài)網(wǎng)頁中，一般是通過ASP、ASP.NET、PHP以及JSP等技術實現(xiàn)表單與用戶的后臺交互，用戶先在前臺輸入內容，通過按鈕表單提交內容，比方在注冊一個新郵箱后，最后要按“提交〞就是這個意思。將數(shù)據(jù)傳遞給后臺程序。這這種提交表單內容的缺點在于，用戶必須完成全部表單內容的填寫后，才能提交數(shù)據(jù)。如果有些內容出現(xiàn)了填寫的錯誤，那么用戶就必須返回表單頁面重新填寫。由于動態(tài)網(wǎng)頁的特殊平安設置，這種方式容易造成網(wǎng)頁過期，影響用戶的操作。1/12/20234411.7.1Spry表單驗證技術Spry表單驗證技術是一種基于JavaaScrip、JavaaScripSpry框架的快速交互應用技術。它的特點是通過JavaaScrip腳本語言動態(tài)地判斷用戶輸入的各種信息，并在不刷新網(wǎng)頁的情況下快速將