商務(wù)網(wǎng)頁實例項目09課件

1、 內(nèi)容提要在Internet上使用表單主要是為了實現(xiàn)瀏覽者同Internet服務(wù)器之間的交互。通過表單，可以將瀏覽者的信息發(fā)送到Internet服務(wù)器上，以供處理。表單也可以使用戶與站點的瀏覽者交互。例如，用戶可以詢問瀏覽者的用戶名稱和電子郵件地址，或者對瀏覽者做一個調(diào)查，在訪客簿上簽名，或者提供關(guān)于用戶的站點信息反饋。通過本項目的學(xué)習(xí)，你能夠掌握創(chuàng)建和設(shè)置表單的方法。1有關(guān)表單的概念表單是網(wǎng)頁設(shè)計者與網(wǎng)頁的瀏覽者進行交流的工具，其作用就是從訪問Web站點的瀏覽者那里獲得信息。表單在網(wǎng)頁中的作用不可小視，主要負責(zé)數(shù)據(jù)采集的功能，比如你可以采集瀏覽者的名字和E-mail地址、調(diào)查表、留言簿等。一

2、個表單有3個基本組成部分：表單標(biāo)簽，包含了處理表單數(shù)據(jù)所用程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。表單域，包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。表單按鈕，包括提交按鈕、復(fù)位按鈕和一般按鈕，用于將數(shù)據(jù)傳送到服務(wù)器上的腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作?；顒? 學(xué)習(xí)表單相關(guān)知識 2常用表單域（1）表單域當(dāng)瀏覽者在網(wǎng)頁的表單對象內(nèi)輸入信息后，這些信息將被程序處理，或者發(fā)送到規(guī)定的郵箱里，于是需要給出網(wǎng)頁一個范圍。只有在該范圍內(nèi)的表單對象中的信息才會被發(fā)送，這個范圍就叫做表單域。表單域標(biāo)簽功能：用于申明表單，定義采集數(shù)據(jù)的

3、范圍，也就是和里面包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件里。語法：.屬性解釋見表9-1。 表9-1 表單域標(biāo)簽屬性屬 性解 釋action=url指定一個處理提交表單的格式，它可以是一個URL地址（提交給程式）或一個電子郵件地址method=get或post指明提交表單的HTTP方法，可能的值如下。post：POST方法在表單的主干包含名稱/值對并且無需包含于action特性的URL中g(shù)et：不贊成。GET方法把名稱/值對加在action的URL后面并且把新的URL送至服務(wù)器。這是往前兼容的默認值，這個值由于國際化的原因不贊成使用enctype=cdata指明用來把表單提交給服務(wù)器時（當(dāng)met

4、hod值為post）的互聯(lián)網(wǎng)媒體形式。這個特性的默認值是application/x-www-form-urlencodedTARGET=.指定提交的結(jié)果文檔顯示的位置。_blank ：在一個新的、無名瀏覽器窗口調(diào)入指定的文檔_self ：在指向這個目標(biāo)的元素的相同的框架中調(diào)入文檔_parent ：把文檔調(diào)入當(dāng)前框的直接的父框中；這個值在當(dāng)前框沒有父框時等價于_self_top ：把文檔調(diào)入原來的最頂部的瀏覽器窗口中（因此取消所有其他框架）；這個值等價于當(dāng)前框沒有框時的_self 例如：.表示表單將向/ ceishi.asp以post的方式提交，提交的結(jié)果在新的頁面顯示，數(shù)據(jù)提交的媒體方式是默認

5、的application/x-www-form-urlencoded方式。通過表單收集到的用戶反饋信息，通常是一些用分隔符（如逗號、分號等）分隔的文字資料。這些資料可以導(dǎo)入到數(shù)據(jù)庫或電子表格中進行統(tǒng)計、分析，成為具有重要參考價值的信息。使用Dreamweaver可以創(chuàng)建表單，可以在表單中添加對象，還可以通過使用行為來驗證用戶輸入信息的正確性。表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選按鈕和下拉選擇框等，用于采集用戶的輸入或選擇的數(shù)據(jù)。 （2）文本框文本框是一種讓瀏覽者自己輸入內(nèi)容的表單對象，通常被用來填寫單個字或者簡短的回答，如姓名、地址等。代碼格式： ，見表9-2。 （3）

6、多行文本框多行文本框也是一種讓瀏覽者自己輸入內(nèi)容的表單對象，只不過能讓瀏覽者填寫較長的內(nèi)容。代碼格式： 屬性解釋見表9-3。 （4）密碼框密碼框是一種特殊的文本域，用于輸入密碼。當(dāng)瀏覽者輸入文字時，文字會被星號或其他符號代替，而輸入的文字會被隱藏。代碼格式：屬性解釋見表9-4。 （5）隱藏域隱藏域是用來收集或發(fā)送信息的不可見元素，對于網(wǎng)頁的瀏覽者來說，隱藏域是看不見的。當(dāng)表單被提交時，隱藏域就會將信息用設(shè)置時定義的名稱和值發(fā)送到服務(wù)器上。代碼格式：屬性解釋見表9-5。表9-5 隱藏域?qū)傩?（6）復(fù)選框復(fù)選框允許在待選項中選中一項以上的選項。每個復(fù)選框都是一個獨立的元素，都必須有一個唯一的名稱。

7、代碼格式：屬性解釋見表9-6。 （7）單選按鈕當(dāng)需要訪問者在待選項中選擇唯一的答案時，就需要用到單選按鈕了。代碼格式：屬性解釋見表9-7。 （8）文件域有時候，需要瀏覽者上傳自己的文件，文件域看上去和其他文本域差不多，只是它還包含了一個“瀏覽”按鈕。瀏覽者可以輸入需要上傳的文件的路徑或者單擊“瀏覽”按鈕選擇需要上傳的文件。注意：在使用文件域以前，請先確定服務(wù)器是否允許匿名上傳文件。表單標(biāo)簽中必須設(shè)置ENCTYPE=multipart/form-data來確保文件被正確編碼；另外，表單的傳送方式必須設(shè)置成POST。代碼格式：屬性解釋見表9-8。 （9）下拉選擇框下拉選擇框允許你在一個有限的空間設(shè)

8、置多種選項。代碼格式： . . 屬性解釋見表9-9。 （10）表單按鈕表單按鈕控制表單的運作。1）提交按鈕。提交按鈕用來將輸入的信息提交到服務(wù)器。代碼格式：屬性解釋見表9-10。2）復(fù)位按鈕。復(fù)位按鈕用來重置表單。代碼格式：屬性解釋見表9-11。 3）一般按鈕。一般按鈕用來控制其他定義了處理腳本的處理工作。代碼格式：屬性解釋見表9-12。1活動分析注冊表單是網(wǎng)頁和瀏覽者進行交互的一個重要窗口，通過表單可以將瀏覽者反應(yīng)的信息提交到服務(wù)器。2知識要點 表單的使用。 掌握文本域、密碼框、單選按鈕、復(fù)選框等的使用。3動手操作步驟1 添加文本域1）打開“register.html”文件。鼠標(biāo)單擊要插入表

9、單的位置。2）選擇“插入”“表單”“表單”命令，或單擊“插入”面板上的“表單”選項卡中的“表單”按鈕，此時在編輯區(qū)里可看到一個紅色虛線的矩形區(qū)域，如圖9-1所示?；顒? 完成網(wǎng)上商城注冊頁面 3）在“插入”面板中單擊“布局”中的表格，創(chuàng)建一個寬600像素的5行2列的表格，如圖9-2所示。4）在第一行第一個單元格內(nèi)輸入“用戶名：”，調(diào)整這一列的寬度為200像素，對齊方式為水平右對齊 ，如圖9-3所示。 5）選擇第一行第二個單元格，設(shè)置對齊方式為水平左對齊。在“插入”面板上單擊“表單”中的“文本域”按鈕。在彈出的“輸入標(biāo)簽輔助功能”對話框中選擇“無標(biāo)簽標(biāo)記”單選按鈕，單擊“確定”按鈕，文本域就添加

10、完成。用戶還可以利用“屬性”面板對文本域進行設(shè)置。打開“屬性”面板，選取文本域，如圖9-4所示。 其中各項屬性如下?！拔谋居颉保涸O(shè)置當(dāng)前文本域的名字。“字符寬度”：設(shè)置文本域在網(wǎng)頁中的長度。注意，不是以像素而是以字?jǐn)?shù)來定義的?！邦愋汀保浩渲械娜齻€單選按鈕用于設(shè)置文本域的類型，分別是單行、多行、密碼，默認為多行。單行方式適用于輸入姓名、證件號碼等信息，多行方式常用于輸入留言，而密碼方式多用于輸入密碼。如果用戶選擇了“密碼”單選按鈕，那么這個文本域的內(nèi)容就成為密碼類型，它將以“*”形式顯示。預(yù)覽效果如圖9-5所示。 步驟2 添加密碼框1）選擇第二行第一個單元格，在單元格內(nèi)輸入“密碼：”，調(diào)整這一列

11、的寬度為200像素，對齊方式為水平右對齊。2）選擇第二行第二個單元格，設(shè)置單元格左對齊。插入一個文本域。3）將屬性面板上的“類型”選擇為“密碼”單選按鈕，字符寬度為：22。4）復(fù)制第二行單元格內(nèi)容，全部粘貼到第三行，并將文字改為“確認密碼”。預(yù)覽效果如圖9-6所示。 步驟3 添加單選按鈕對于只能允許瀏覽者在多個選擇中選取一個選項時，設(shè)計者應(yīng)該使用單選按鈕。這種按鈕只允許瀏覽者在一組選項中做出唯一的選擇，如在通常的問卷調(diào)查中，性別選項中的“男”或“女”；在確認選項中的“是”或“否”等。如果選擇之后需作調(diào)整，可選擇另外一個而取消前面的選擇。插入單選按鈕的方法如下：1）選擇第四行第一個單元格，輸入文

12、本“性別”。2）在“插入”面板的“表單”選項卡上單擊“單選按鈕”按鈕，也可選擇“插入”“表單”“單選按鈕”命令，光標(biāo)所在位置將出現(xiàn)一個單選按鈕元素 。在后面輸入“男”。用同樣的方法再插入一個單選按鈕，然后輸入“女”。3）如需修改單選按鈕屬性，選取單選按鈕，打開“屬性”面板，如圖9-7所示。 其中的各項屬性如下。“單選按鈕”：設(shè)置單選按鈕組的名字?！斑x定值”：設(shè)置選中單選按鈕時的值?！俺跏紶顟B(tài)”：設(shè)置單選按鈕的初始狀態(tài)。最終效果如圖9-8所示。 步驟4 添加復(fù)選框插入復(fù)選框的方法與插入單選按鈕的方法相似：選擇“插入”“表單”“復(fù)選框”命令，或者在“插入”面板的“表單”組上單擊“復(fù)選框”按鈕，光標(biāo)

13、所在位置出現(xiàn)一個復(fù)選框元素 。在“屬性”面板中可以設(shè)置復(fù)選框的屬性，如圖9-9所示。插入復(fù)選框后，在它的旁邊添加一些解釋是非常必要的，最終效果如圖9-10所示。 步驟5 添加列表與菜單1）選擇“插入”“表單”“選擇（列表/菜單）”命令，或單擊“插入”面板“表單”選項卡中的“列表/菜單”按鈕 。成功創(chuàng)建后，在光標(biāo)所在位置就會出現(xiàn)一個列表/菜單元素。2）列表/菜單的大小按照設(shè)計者給定的選項的長短而變化，因此不需要修改它的長度。選擇一個列表/菜單，其“屬性”面板如圖9-11所示。3）在“列表/菜單”的“選擇”文本框中輸入“diqu”，作為菜單的名稱。4）在“類型”選項組中選取“菜單”單選按鈕。 5）

14、單擊“列表值”按鈕，彈出“列表值”對話框，如圖9-12所示。6）在“項目標(biāo)簽”欄中輸入項目名稱，在“值”欄中輸入項目的值，按鍵可以方便地在名稱和值之間切換。輸入項目的“列表值”對話框如圖9-13所示。7）可以在菜單中設(shè)置默認值。如果用戶沒有在菜單中做出選擇而直接提交表單，瀏覽器將發(fā)送默認值。打開“屬性”面板的擴展欄，在“初始化時選定”列表區(qū)中選擇一個項目，將其作為默認值。本例中，選中了“所在地區(qū)”選項，如圖9-14所示。 創(chuàng)建列表與創(chuàng)建菜單十分類似，只不過在“類型”選項區(qū)中選取“列表”單選按鈕，同時在“高度”文本框中設(shè)置控制列表的顯示行數(shù)，在“選定范圍”選項組中選中“允許多選”復(fù)選框，設(shè)置是否

15、允許訪問者作多項選擇。圖9-15上部分為插入了“地區(qū)”列表后的頁面，下部分為“屬性”面板上顯示了此列表的屬性。 最后預(yù)覽效果如圖9-16、圖9-17所示。步驟6 添加自我介紹文本域1）多行文本域的添加和單行文本域的添加方法基本相同。選擇第七行第二個單元格。2）在“插入”面板上單擊“表單”中的“文本區(qū)域”按鈕 。3）利用“屬性”面板對文本域進行設(shè)置。打開“屬性”面板，選取文本域，如圖9-18所示。 其中的各項屬性如下。“文本域”：設(shè)置當(dāng)前文本域的名字?！白址麑挾取保涸O(shè)置文本域在網(wǎng)頁中的長度。注意，不是以像素而是以字?jǐn)?shù)來定義的?！靶袛?shù)”：設(shè)置允許用戶輸入的行數(shù)?！邦愋汀保浩渲械娜齻€單選按鈕用于設(shè)置

16、文本域的類型，分別是單行、多行、密碼，默認為多行。單行方式適用于輸入姓名、證件號碼等信息，多行方式常用于輸入留言，而密碼方式多用于輸入密碼。預(yù)覽效果如圖9-19所示。 步驟7 添加按鈕 1）選擇第八行，合并單元格。設(shè)置居中對齊。2）在“插入”面板上單擊“表單”組中的“按鈕”按鈕 ，或選擇“插入”“表單”“按鈕”命令，即在表單域內(nèi)插入提交按鈕 ，并打開“屬性”面板，如圖9-20所示。 3）在“按鈕名稱”文本框內(nèi)輸入按鈕的名稱。4）在“動作”選項區(qū)選擇按鈕類型，即設(shè)置按鈕觸發(fā)的動作。系統(tǒng)默認選定“提交表單”動作類型。5）再次插入一個按鈕，設(shè)置其“動作”為“重設(shè)表單”。表示當(dāng)對表單中填寫的內(nèi)容不滿意

17、時，重新填寫表單。這樣就完成了一般按鈕的創(chuàng)建和設(shè)置工作。最后效果如圖9-21所示。 1活動分析網(wǎng)頁驗證是網(wǎng)頁信息交互前必須要做的工作，通常情況下需要編寫JavaScript代碼來檢測用戶輸入信息的正確性。在Dreamweaver CS5中提供了方便的Spry驗證。不需要用戶編寫JavaScript代碼就可以實現(xiàn)頁面的檢測。Spry驗證文本域構(gòu)件是一個文本域，該域用于在站點訪問者輸入文本時顯示文本的狀態(tài)（有效或無效）。例如，您可以向訪問者電子郵件地址的表單中添加驗證文本域構(gòu)件。如果訪問者無法在電子郵件地址中輸入“”符號和句點，驗證文本域構(gòu)件會返回一條消息，聲明用戶輸入的信息無效。2知識要點 表單

18、的基本操作。 Spry驗證的使用?；顒? 實現(xiàn)網(wǎng)上商城注冊頁面表單的驗證與提交 3動手操作步驟1 插入驗證文本域構(gòu)件1）在“文檔”窗口的“設(shè)計”視圖中，選擇用戶文本框。2）單擊“插入”“Spry”“Spry驗證文本域”，或單擊“插入”欄上的“表單”類別，選擇“Spry驗證文本域”，如圖9-22所示。3）在彈出的“輸入標(biāo)簽輔助功能屬性”對話框中單擊“確定”按鈕，如圖9-23所示。4）Dreamweaver自動完成的效果，如圖9-24圖9-27所示。 最終效果如圖9-28所示。 步驟2 驗證文本域構(gòu)件的屬性在“文檔”窗口中選擇一個驗證文本域構(gòu)件，單擊“窗口” “屬性”，將打開“屬性檢查器”，如圖9

19、-29所示。其中各項屬性如下?！癝pry文本域”：設(shè)置Spry文本域的名稱?！邦愋汀保簽轵炞C文本域構(gòu)件指定不同的驗證類型。包括“整數(shù)”“電子郵件”“日期”等?！膀炞C于”：用來設(shè)置驗證發(fā)生的時間，包括站點訪問者在文本域構(gòu)件外部單擊時、輸入內(nèi)容時或嘗試提交表單時。 onBlur（模糊）：當(dāng)用戶在文本域的外部單擊時驗證。onChange（更改）：當(dāng)用戶更改文本域中的文本時驗證。onSubmit（提交）：當(dāng)用戶嘗試提交表單時驗證?！白钚∽址麛?shù)”：設(shè)置驗證文本域中允許的最小字符數(shù)。此選項僅適用于“無”“整數(shù)”“電子郵件”和“URL”驗證類型。例如，如果在“最小字符數(shù)”框中輸入數(shù)字3，那么，只有當(dāng)用戶輸入

20、三個或更多個字符時，該構(gòu)件才通過驗證?！白畲笞址麛?shù)”：設(shè)置驗證文本域中允許的最大字符數(shù)。此選項僅適用于“無”“整數(shù)”“電子郵件”和“URL”驗證類型?！白钚≈怠保涸O(shè)置驗證文本域中允許的最小值。此選項僅適用于“整數(shù)”“時間”“貨幣”和“實數(shù)/科學(xué)記數(shù)法”驗證類型。例如，如果您在“最小值”框中輸入3，那么，只有當(dāng)用戶在文本域中輸入3或者更大的值時，該構(gòu)件才通過驗證。“最大值”：設(shè)置驗證文本域中允許的最大值。此選項僅適用于“整數(shù)”“時間”“貨幣”和“實數(shù)/科學(xué)記數(shù)法”驗證類型。 “預(yù)覽狀態(tài)”：選擇要查看驗證文本域的狀態(tài)。包括“初始”“必填”“有效”3個選項?！氨匦璧摹保耗J情況下，用Dreamwea

21、ver插入的所有驗證文本域構(gòu)件都要求用戶在將構(gòu)件發(fā)布到Web頁之前輸入內(nèi)容。但是，您可以將填寫文本域設(shè)置為對于用戶是可選的?！疤崾尽保涸O(shè)置驗證文本域的提示信息。例如，驗證類型設(shè)置為“電話號碼”的文本域?qū)⒅唤邮埽?00）000-0000形式的電話號碼?？梢暂斎脒@些示例號碼作為提示，以便用戶在瀏覽器中加載頁面時，文本域中將顯示正確的格式。“強制模式”：設(shè)置是否禁止用戶在驗證文本域構(gòu)件中輸入無效字符。例如，如果對具有“整數(shù)”驗證類型的構(gòu)件集選擇此選項，那么，當(dāng)用戶嘗試輸入字母時，文本域中將不顯示任何內(nèi)容。步驟3 驗證密碼域構(gòu)件1）選擇密碼文本框，并改名為“pwa1”。2）選擇“插入”“表單”“Spr

22、y驗證密碼” 。 3）設(shè)置Spry密碼驗證屬性為：必填、最小字符數(shù)6、驗證時間onBlur，如圖9-30所示。驗證密碼域構(gòu)件預(yù)覽效果如圖9-31所示。 步驟4 驗證確認構(gòu)件1）選擇確認密碼框，并命名為“pwa2”。2）選擇“插入”“表單”“Spry確認” 。3）設(shè)置Spry確認驗證屬性為：必填、驗證時間onBlur。驗證參照對象為“pwa1”在表單“form1”，如圖9-32所示。驗證確認構(gòu)件預(yù)覽效果如圖9-33所示。 步驟5 Spry驗證單選按鈕組1）刪除原有“性別“單選按鈕。2）選擇“插入”“表單”“Spry驗證單選按鈕組” 。3）設(shè)置Spry驗證單選按鈕組屬性，如圖9-34所示。步驟6 Spry驗證復(fù)選框構(gòu)件Spry驗證復(fù)選框構(gòu)件是HTML表單中的一個或一組復(fù)選框，該復(fù)選框在用戶選擇（或沒有選擇）復(fù)選框時會顯示構(gòu)件的狀態(tài)（有效或無效）。例如，向表單中添加一個驗證復(fù)選框構(gòu)件，并要求用戶進行三項選擇。如果用戶沒有進行三項選擇，該構(gòu)件會返回一條消息，聲明不符合最小選擇數(shù)要求。 1）插入驗證復(fù)選框構(gòu)件。插入方法與插入驗證文本域構(gòu)件相同。2）驗證復(fù)選框構(gòu)件的屬性。在“文檔”窗口中選擇一個驗證復(fù)選框構(gòu)件，單擊“窗口”“屬性”，將打開“屬性檢查器”，如圖9-35所