電子商務(wù)網(wǎng)頁制作項目表單應(yīng)用培訓(xùn)課程課件

DW項目七電子商務(wù)網(wǎng)頁制作表單應(yīng)用DW項目七電子商務(wù)表單應(yīng)用 理解表單和表單域的概念 認(rèn)識表單是如何工作的 了解表單的設(shè)計原則 學(xué)習(xí)創(chuàng)建表單 了解驗證和提交表單的方法項目目標(biāo) 理解表單和表單域的概念項目目標(biāo)表單概述衡量電子商務(wù)網(wǎng)頁的一個重要標(biāo)準(zhǔn)就是網(wǎng)頁的交互性。對電子商務(wù)網(wǎng)站來說，每一個瀏覽者都是公司的客戶或潛在客戶，了解他們的意見和建議、收集他們的私人信息、獲取訂單、設(shè)立留言簿、提供商品檢索等，都是極其重要的。表單是實現(xiàn)網(wǎng)頁交互性的重要手段之一，通過表單，可以從瀏覽者那里收集信息，經(jīng)過服務(wù)器處理后，把結(jié)果反饋給瀏覽者。

設(shè)計一個高效、友好的表單，對瀏覽者和電子商務(wù)網(wǎng)站都是十分有利的：瀏覽者可以發(fā)現(xiàn)更多的關(guān)于產(chǎn)品和服務(wù)的信息，而網(wǎng)站可以了解更多的有關(guān)瀏覽者的信息，甚至還可以使用表單進(jìn)行網(wǎng)上調(diào)查和競賽，激勵更多的瀏覽者加入進(jìn)來。請你仔細(xì)觀察電子商務(wù)網(wǎng)站中的表單出現(xiàn)在什么位置、不同作用的表單是否選擇了不同的呈現(xiàn)方式。表單概述衡量電子商務(wù)網(wǎng)頁的一個重要標(biāo)準(zhǔn)就是網(wǎng)頁的交互性。試一試——無所不在的表單

第一步：打開IE瀏覽器，在地址欄中輸入，將打開下圖所示的頁面。在頁面的頂部，可以看到搜索產(chǎn)品用的表單，頁面右上角可以看到會員注冊與登錄的按鈕與鏈接。試一試——無所不在的表單第一步：打開IE瀏覽器，在地址欄試一試——無所不在的表單

第二步：點擊右上角“免費注冊”進(jìn)入到注冊頁面。電子商務(wù)網(wǎng)站在要求瀏覽者進(jìn)行注冊時，通常會為此單獨建立一個獨立的表單網(wǎng)頁，因為注冊時可能會觸及到瀏覽者個人隱私，單獨的表單網(wǎng)頁容易使瀏覽者產(chǎn)生被保護(hù)的安全感。

此頁面的注冊表單并沒有要求用戶留下真實姓名和郵政地址，但電子郵件地址和手機(jī)號被列為必選項，這樣既可以取得和瀏覽者的聯(lián)系，又能使瀏覽者不至于感到被侵犯。這個注冊表單的設(shè)計十分精心，使用盡可能少的表單域，獲取了盡可能多的有用信息，瀏覽者不必花費太多的時間就能完成表單填寫。試一試——無所不在的表單第二步：點擊右上角“免費注冊”進(jìn)試一試——無所不在的表單

第三步：選擇一項商品，點擊進(jìn)入商品詳情頁面：試一試——無所不在的表單第三步：選擇一項商品，點擊進(jìn)入商試一試——無所不在的表單

第四步：瀏覽商品詳情頁面，了解商品信息，點擊“立即購買”按鈕進(jìn)入購物車頁面：試一試——無所不在的表單第四步：瀏覽商品詳情頁面，了解商試一試——無所不在的表單

第五步：點擊“立即結(jié)算”按鈕進(jìn)入訂單信息頁面，如圖7-5所示。該表單頁用于提交在線訂單。試一試——無所不在的表單第五步：點擊“立即結(jié)算”按鈕進(jìn)入試一試——無所不在的表單表單設(shè)計至關(guān)重要，然而并不是所有的瀏覽者都愿意填寫表單，一個糟糕的表單甚至?xí)樑転g覽者。首先要明確使用表單的目的，即為什么要設(shè)計這個表單。在設(shè)計表單前，可以盡量多地瀏覽相關(guān)的網(wǎng)頁，看一看別的網(wǎng)站是怎么做的，同時要把網(wǎng)絡(luò)營銷知識運用到設(shè)計中去，要記住一點：為瀏覽者考慮得越多，能收到的填寫好的表單就越多。表單網(wǎng)頁要和其他網(wǎng)頁保持一致的顏色和風(fēng)格，每一個表單域尺寸要適當(dāng)，既能滿足要求，又要保證網(wǎng)頁的美感?；顒有〗Y(jié)試一試——無所不在的表單表單設(shè)計至關(guān)重要，然而并不是所有表單的概念表單可以實現(xiàn)瀏覽者與Web服務(wù)器之間信息的交互傳送，它是網(wǎng)絡(luò)信息收集處理的一種重要方式，一個能正常工作的表單必須包含以下兩個部分：（1）含有表單的網(wǎng)頁。（2）用于處理瀏覽者提交信息的表單處理程序，如CGI或ASP程序等服務(wù)器端應(yīng)用程序或客戶端腳本。瀏覽者在表單中填寫相關(guān)信息，然后單擊“提交”按鈕，將表單內(nèi)容上傳到服務(wù)器，服務(wù)器用事先編好的表單處理程序來處理這些信息，再將處理結(jié)果反饋給瀏覽者的瀏覽器，可見表單的使用必須依賴于服務(wù)器端腳本才能真正發(fā)揮其功能。表單工作流程圖表單的概念表單可以實現(xiàn)瀏覽者與Web服務(wù)器之間信息的交互表單的概念除去表單處理程序以外，所有表單一般都由以下幾個部分組成：（1）表單域：又稱表單元素，是組成表單的最小單位。（2）表單域的說明文字：用于提示瀏覽者如何填寫表單域，以及在表單域中填寫何種內(nèi)容的有關(guān)說明文字。（3）“提交”和“重置”按鈕：瀏覽者用它們來提交自己填寫的信息或重新修改剛剛填寫的信息。表單的概念除去表單處理程序以外，所有表單一般都由以下幾個常用表單域在使用DreamweaverCS5編輯網(wǎng)頁時，表單是一個用紅色虛線標(biāo)記的方形區(qū)域。一個表單包含若干種類型的表單域，同時也可以包含其他網(wǎng)頁元素。每個表單都有自己的名稱，該表單中的每個表單域也有自己的名稱，同一個表單中的表單域不允許同名。表單域還附有相應(yīng)的說明文字，用于提示瀏覽者在表單域中輸入什么樣的內(nèi)容。表單域的名稱是由DreamweaverCS5在創(chuàng)建表單域時自動生成的，我們也可以自己修改表單域的名稱；而表單域的值則為瀏覽者所填寫或選擇的內(nèi)容。在瀏覽者按下“提交”按鈕之后，表單域的名稱和值將被發(fā)送到Web服務(wù)器的表單處理程序進(jìn)行處理。常用表單域在使用DreamweaverCS5編輯網(wǎng)頁時常用表單域DreamweaverCS5提供了以下幾種表單域，不同的表單域用來收集不同的信息。打開“插入”菜單中的“表單”子菜單，如圖所示可以看到DreamweaverCS5提供的不同種類的表單域。常用表單域DreamweaverCS5提供了以下幾種表常用表單域也可以在插入欄中選擇“表單”類別，直接選擇相應(yīng)的按鈕創(chuàng)建表單域：1．文本字段和文本區(qū)域

文本字段和文本區(qū)域用于接收瀏覽者的文本輸入內(nèi)容。文本字段和文本區(qū)域可以顯示單行或多行文本，還能以密碼域的方式顯示，其中密碼域顯示時，輸入文本將被替換成星號，以免其他人看到密碼常用表單域也可以在插入欄中選擇“表單”類別，直接選擇相應(yīng)的按常用表單域2．按鈕在單擊時執(zhí)行某種操作，例如重置表單操作和提交表單操作。3．單選按鈕由兩個或兩上以上的一組按鈕組成，瀏覽者只能選擇其中的一個選項：4．復(fù)選框由一組按鈕組成，瀏覽者可以選擇其中的任意多個合適的項：常用表單域2．按鈕常用表單域5．選擇（列表/菜單）選擇有兩種類型：一種是瀏覽者單擊對象對的下拉菜單，另一種是一列有項目的可滾動的列表。6．其他表單對象除了以上幾種常見的表單域外，還有隱藏域、文件域、圖像域、跳轉(zhuǎn)菜單等。并不是所有類型的表單域都同樣的受歡迎，畢竟大多數(shù)人喜歡做選擇題而不是論述題。因此，在構(gòu)思表單時，應(yīng)盡可能把要提的問題做成瀏覽者更容易接受的題型。小貼士常用表單域5．選擇（列表/菜單）并不是所有類型的表單域都創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以在對話框右端看到該框架集的預(yù)覽效果和相關(guān)描述。（3）單擊“創(chuàng)建”按鈕，在文檔窗口可以看到新創(chuàng)建的框架集，同時DreamweaverCS5會打開一個“框架標(biāo)簽輔助功能屬性”對話框。（4）為每個框架輸入恰當(dāng)?shù)臉?biāo)題名稱，然后點擊“確定”即可成功創(chuàng)建框架頁。

框架的標(biāo)題即框架的名稱，它用于識別不同的框架，在指定打開鏈接目標(biāo)的目標(biāo)框架或腳本在引用該框架時，框架名稱就派上用場了。一般情況下使用系統(tǒng)提供的默認(rèn)值，如mainFrame，topFrame，leftFrame等，這些名稱都是約定俗成的。當(dāng)然，你也可以使用自己定義的名稱。小貼士創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以選擇框架和框架集對框架和框架集進(jìn)行操作，首先必須選中它。我們可以在文檔窗口中選擇框架或框架集，也可以通過“框架”面板進(jìn)行選擇。1．在文檔窗口中選擇框架或框架集（1）選擇框架在“設(shè)計”視圖中，按住Alt鍵的同時單擊某個框架內(nèi)部，即可選中該框架，此時該框架的邊框被虛線環(huán)繞。（2）選擇框架集單擊框架集的某一內(nèi)部框架邊框即可選中該框架集，此時該框架集的所有邊框被虛線環(huán)繞。

要執(zhí)行這一操作，框架邊框必須是可見的。如果看不到框架邊框，你可以通過打開“查看”菜單，選擇“可視化助理”子菜單中的“框架邊框”使框架邊框可見。小貼士選擇框架和框架集對框架和框架集進(jìn)行操作，首先必須選中它。創(chuàng)建表單創(chuàng)建表單的一般步驟如下：1．將光標(biāo)定位在要插入表單的位置，打開“插入”菜單，選擇“表單”子菜單中的“表單”命令，或選擇插入欄上的“表單”類別，然后單擊“表單”按鈕，將插入一個空的表單，在設(shè)計圖像中可以看到，紅色的虛輪廓線指示表單：創(chuàng)建表單創(chuàng)建表單的一般步驟如下：創(chuàng)建表單創(chuàng)建表單的一般步驟如下：1．將光標(biāo)定位在要插入表單的位置，打開“插入”菜單，選擇“表單”子菜單中的“表單”命令，或選擇插入欄上的“表單”類別，然后單擊“表單”按鈕，將插入一個空的表單，在設(shè)計圖像中可以看到，紅色的虛輪廓線指示表單：2．在屬性面板中指定將表單數(shù)據(jù)傳輸?shù)椒?wù)器所使用的方法。其中GET方法將值附加到請求該頁面的URL中，POST方法將在HTTP請求中嵌入表單數(shù)據(jù)。3．插入表單域。將插入點放置在希望表單域在表單中出現(xiàn)的位置，然后在“插入”菜單的“表單”子菜單中，或者在插入欄的“表單”類別中選擇相應(yīng)的表單域命令，將表單域插入頁面后可以設(shè)置其屬性。創(chuàng)建表單創(chuàng)建表單的一般步驟如下：2．在屬性面板中指定將表單數(shù)添加文本域?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“文本域”，或者單擊插入欄“表單”類別中的“文本字段”按鈕，即可插入一個文本域。可根據(jù)需要在屬性面板中設(shè)置文字域的屬性：文本域：為該文本域指定一個名稱。字符寬度：最多可顯示的字符數(shù)。例如，如果“字符寬度”設(shè)置為20，而瀏覽者輸入了30個字符，則在該文本域中只能看到前20個字符。請注意，雖然無法看到其余的字符，但文本域可以識別它們，而且它們會被發(fā)送到服務(wù)器進(jìn)行處理。最多字符數(shù)：設(shè)置文本域中最多可輸入的字符數(shù)。例如，可以使用“最多字符數(shù)”將郵政編碼限制為6位數(shù)，瀏覽者在輸入時就無法輸入6位以上的數(shù)字了。如果“最多字符數(shù)”設(shè)為空白，則瀏覽者可以輸入任意數(shù)量的文本而不受限制。類型：可以設(shè)置文本域為單行、多行和密碼。當(dāng)設(shè)置為密碼時，瀏覽者輸入的內(nèi)容顯示為星號，以免被其他人看到。初始值：指定在首次載入表單時文本域中顯示的值。例如，通過說明或示例值，可以提示瀏覽者在文本域中輸入正確的信息。類：將CSS規(guī)則應(yīng)用于對象。禁用：勾選此項用于禁用文本框。只讀：勾選此項用于設(shè)置文本框為只讀屬性。添加文本域?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插入”菜單添加復(fù)選框

將插入點定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“復(fù)選框”，或者單擊插入欄“表單”類別中的“復(fù)選框”按鈕，即可插入一個復(fù)選框。可根據(jù)需要在屬性面板中設(shè)置復(fù)選框的屬性：復(fù)選框名稱：為該復(fù)選框指定一個名稱。每個復(fù)選框都必須有一個唯一名稱，所用名稱必須在表單內(nèi)唯一標(biāo)識該復(fù)選框。選定值：設(shè)置在該復(fù)選框被選中時發(fā)送給服務(wù)器的值。初始狀態(tài)：確定在瀏覽器中載入表單時該復(fù)選框是否被選中。類：將CSS規(guī)則應(yīng)用于對象。一般需要在復(fù)選框前添加說明性文字作為復(fù)選框的標(biāo)簽，然后繼續(xù)添加復(fù)選框直至所有復(fù)選框添加完成。添加復(fù)選框?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插入”菜單添加單選按鈕

單選按鈕一般以組為單位出現(xiàn)，在一組單選按鈕中只能選擇一個選項，因此叫單選按鈕。將插入點定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“單選按鈕”，或者單擊插入欄“表單”類別中的“單選按鈕”按鈕，即可插入一個單選按鈕。可根據(jù)需要在屬性面板中設(shè)置單選按鈕的屬性：單選按鈕：為該單選按鈕指定一個名稱。由于單選按鈕一般是以組出現(xiàn)，單選按鈕組內(nèi)的每個單選按鈕的名稱必須都一樣，否則不能實現(xiàn)單選的效果。選定值：設(shè)置在該單選按鈕被選中時發(fā)送給服務(wù)器的值。初始狀態(tài)：確定在瀏覽器中載入表單時該單選按鈕是否被選中。類：將CSS規(guī)則應(yīng)用于對象。一般需要在單選按鈕前添加說明性文字作為單選按鈕的標(biāo)簽，然后繼續(xù)添加單選按鈕直至所有單選按鈕添加完成。添加單選按鈕單選按鈕一般以組為單位出現(xiàn)，在一組單選按鈕中添加選擇（列表/菜單）如果提供的選項很多，比如要設(shè)計籍貫選項，使用復(fù)選框或單選按鈕就會占用太多的網(wǎng)頁，菜單能有效地解決這個問題，所有的選項縮成只顯示一行信息的小框，其他的選項則隱藏起來，當(dāng)瀏覽者用鼠標(biāo)單擊菜單將其展開時，才會顯示所有的選項供瀏覽者選擇?？筛鶕?jù)需要在屬性面板中設(shè)置選擇（列表/菜單）的屬性：選擇：為該選擇指定一個名稱。每個選擇都必須有一個唯一名稱，所用名稱必須在表單內(nèi)唯一標(biāo)識該選擇。類型：設(shè)置該選擇的類型為菜單或者列表。列表值：設(shè)置列表或菜單里的選項標(biāo)簽和值。初始化時選定：確定在瀏覽器中載入表單時該列表或菜單選定的值。類：將CSS規(guī)則應(yīng)用于對象。單擊列表值，將彈出“列表值”對話框，點擊加號可添加項目標(biāo)簽和值，點擊三角箭頭可調(diào)整選項的上下順序。添加選擇（列表/菜單）如果提供的選項很多，比如要設(shè)計籍貫添加按鈕按鈕常用于控制表單的操作，使用按鈕可將表單數(shù)據(jù)提交到服務(wù)器，或者重置該表單。標(biāo)準(zhǔn)表單按鈕通常帶有“提交”、“重置”標(biāo)簽。使用按鈕還可以執(zhí)行相關(guān)事件，如單擊事件、提交表單事件等。將插入點定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“按鈕”，或者單擊插入欄“表單”類別中的“按鈕”按鈕，即可插入一個按鈕?？筛鶕?jù)需要在屬性面板中設(shè)置按鈕的屬性：按鈕名稱：為該按鈕指定一個名稱。值：設(shè)置按鈕上顯示的文本。動作：確定單擊按鈕時發(fā)生的操作。如果選中了“提交表單”選項，當(dāng)單擊該按鈕時，將提交表單數(shù)據(jù)進(jìn)行處理。如果選中了“重置”選項，當(dāng)單擊該按鈕時，將清除該表單的內(nèi)容。選擇“無”選項，指定單擊該按鈕時要執(zhí)行的操作，例如，可以添加一個JavaScript腳本，當(dāng)瀏覽者單擊該按鈕時打開另一個頁面。類：將CSS規(guī)則應(yīng)用于對象。添加按鈕按鈕常用于控制表單的操作，使用按鈕可將表單數(shù)據(jù)提表單的驗證有時，需要對瀏覽者輸入的信息進(jìn)行一些限制，如限制輸入信息的類型和長度等。如電話號碼要求7位以上，如果瀏覽者輸入的信息不符限制條件，則彈出一個對話框表明輸入不符合要求，讓瀏覽者重新輸入。這種方式稱為驗證輸入的有效性。表單的驗證有時，需要對瀏覽者輸入的信息進(jìn)行一些限制，如限spry驗證文本域spry驗證文本域是DreamweaverCS5提供的一種包含驗證功能的文本域。將插入點定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“spry驗證文本域”，或者單擊插入欄“表單”類別中的“spry驗證文本域”按鈕，插入一個spry驗證文本域，當(dāng)鼠標(biāo)靠近spry文本域時會出現(xiàn)藍(lán)色提示：spry驗證文本域spry驗證文本域是Dreamweavspry驗證文本域鼠標(biāo)單擊藍(lán)色提示，可以在屬性面板設(shè)置spry文本域的屬性：spry文本域：為spry文本域指定一個名稱。類型：設(shè)置spry文本域的驗證數(shù)據(jù)類型。例如整數(shù)、日期、貨幣、電子郵件地址等，設(shè)置成功后，若輸入數(shù)據(jù)數(shù)型與設(shè)置的不一致，則提示“格式無效”：spry驗證文本域鼠標(biāo)單擊藍(lán)色提示，可以在屬性面板設(shè)置sprspry驗證文本域預(yù)覽狀態(tài)：設(shè)置spry文本域預(yù)覽時的狀態(tài)。驗證于：設(shè)置驗證的觸發(fā)事件，默認(rèn)為提交表單時驗證。提示：設(shè)置spry文本域的提示信息。最小字符數(shù)/最大字符數(shù)：設(shè)置spry文本域允許輸入的字符數(shù)的范圍，若超出范圍則提示“不符合最小字符數(shù)要求”或“已超過最大字符數(shù)”：spry驗證文本域預(yù)覽狀態(tài)：設(shè)置spry文本域預(yù)覽時的狀態(tài)。spry驗證文本域必須的：勾選此項設(shè)置spry文本域為必填，若不填則提示“需要提供一個值”：最小值/最大值：當(dāng)“類型”屬性為可比較大小的數(shù)據(jù)類型時，可以設(shè)置spry文本域允許輸入的數(shù)值范圍，若超出范圍則提示“輸入值小于所需的最小值”或“輸入值大于所允許的最大值”：spry驗證文本域必須的：勾選此項設(shè)置spry文本域為必填，spry驗證復(fù)選框?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“spry驗證復(fù)選框”，或者單擊插入欄“表單”類別中的“spry驗證復(fù)選框”按鈕，插入一個spry驗證復(fù)選框，當(dāng)鼠標(biāo)靠近spry復(fù)選框時會出現(xiàn)藍(lán)色提示：spry驗證復(fù)選框?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插spry驗證復(fù)選框鼠標(biāo)單擊藍(lán)色提示，可以在屬性面板設(shè)置spry復(fù)選框的屬性：spry復(fù)選框：為spry復(fù)選框指定一個名稱。必需：設(shè)置spry復(fù)選框必須選擇至少一項，否則提示“請進(jìn)行選擇”：spry驗證復(fù)選框鼠標(biāo)單擊藍(lán)色提示，可以在屬性面板設(shè)置sprspry驗證復(fù)選框?qū)嵤┓秶涸O(shè)置spry復(fù)選框必須選擇多項，在下面的最小選擇數(shù)和最大選擇數(shù)中設(shè)置選擇的數(shù)量，若未選擇設(shè)置的數(shù)量則提示“不符合最小選擇數(shù)要求”或“已超過最大選擇數(shù)”：spry驗證復(fù)選框?qū)嵤┓秶涸O(shè)置spry復(fù)選框必須選擇多項，項目總結(jié)本項目主要介紹了表單的概念、表單的工作原理、表單及表單域的創(chuàng)建以及表單的驗證等知識和技能。表單是實現(xiàn)網(wǎng)頁交互性的一個主要途徑，使用表單可以進(jìn)行客戶的注冊、收集各種信息等等。表單的設(shè)計要從多用戶的角度去考慮，設(shè)計出簡潔、實用的表單可以提高表單的使用效果。DreamweaverCS5提供了spry表單驗證工具，可以對表單及表單域進(jìn)行驗證，從而確保表單填寫的完整性和規(guī)范性。項目總結(jié)本項目主要介紹了表單的概念、表單的工作原理、表單推薦資源推薦資源謝謝觀賞！謝謝觀賞！DW項目七電子商務(wù)網(wǎng)頁制作表單應(yīng)用DW項目七電子商務(wù)表單應(yīng)用 理解表單和表單域的概念 認(rèn)識表單是如何工作的 了解表單的設(shè)計原則 學(xué)習(xí)創(chuàng)建表單 了解驗證和提交表單的方法項目目標(biāo) 理解表單和表單域的概念項目目標(biāo)表單概述衡量電子商務(wù)網(wǎng)頁的一個重要標(biāo)準(zhǔn)就是網(wǎng)頁的交互性。對電子商務(wù)網(wǎng)站來說，每一個瀏覽者都是公司的客戶或潛在客戶，了解他們的意見和建議、收集他們的私人信息、獲取訂單、設(shè)立留言簿、提供商品檢索等，都是極其重要的。表單是實現(xiàn)網(wǎng)頁交互性的重要手段之一，通過表單，可以從瀏覽者那里收集信息，經(jīng)過服務(wù)器處理后，把結(jié)果反饋給瀏覽者。

設(shè)計一個高效、友好的表單，對瀏覽者和電子商務(wù)網(wǎng)站都是十分有利的：瀏覽者可以發(fā)現(xiàn)更多的關(guān)于產(chǎn)品和服務(wù)的信息，而網(wǎng)站可以了解更多的有關(guān)瀏覽者的信息，甚至還可以使用表單進(jìn)行網(wǎng)上調(diào)查和競賽，激勵更多的瀏覽者加入進(jìn)來。請你仔細(xì)觀察電子商務(wù)網(wǎng)站中的表單出現(xiàn)在什么位置、不同作用的表單是否選擇了不同的呈現(xiàn)方式。表單概述衡量電子商務(wù)網(wǎng)頁的一個重要標(biāo)準(zhǔn)就是網(wǎng)頁的交互性。試一試——無所不在的表單

第一步：打開IE瀏覽器，在地址欄中輸入，將打開下圖所示的頁面。在頁面的頂部，可以看到搜索產(chǎn)品用的表單，頁面右上角可以看到會員注冊與登錄的按鈕與鏈接。試一試——無所不在的表單第一步：打開IE瀏覽器，在地址欄試一試——無所不在的表單

第二步：點擊右上角“免費注冊”進(jìn)入到注冊頁面。電子商務(wù)網(wǎng)站在要求瀏覽者進(jìn)行注冊時，通常會為此單獨建立一個獨立的表單網(wǎng)頁，因為注冊時可能會觸及到瀏覽者個人隱私，單獨的表單網(wǎng)頁容易使瀏覽者產(chǎn)生被保護(hù)的安全感。

此頁面的注冊表單并沒有要求用戶留下真實姓名和郵政地址，但電子郵件地址和手機(jī)號被列為必選項，這樣既可以取得和瀏覽者的聯(lián)系，又能使瀏覽者不至于感到被侵犯。這個注冊表單的設(shè)計十分精心，使用盡可能少的表單域，獲取了盡可能多的有用信息，瀏覽者不必花費太多的時間就能完成表單填寫。試一試——無所不在的表單第二步：點擊右上角“免費注冊”進(jìn)試一試——無所不在的表單

第三步：選擇一項商品，點擊進(jìn)入商品詳情頁面：試一試——無所不在的表單第三步：選擇一項商品，點擊進(jìn)入商試一試——無所不在的表單

第四步：瀏覽商品詳情頁面，了解商品信息，點擊“立即購買”按鈕進(jìn)入購物車頁面：試一試——無所不在的表單第四步：瀏覽商品詳情頁面，了解商試一試——無所不在的表單

第五步：點擊“立即結(jié)算”按鈕進(jìn)入訂單信息頁面，如圖7-5所示。該表單頁用于提交在線訂單。試一試——無所不在的表單第五步：點擊“立即結(jié)算”按鈕進(jìn)入試一試——無所不在的表單表單設(shè)計至關(guān)重要，然而并不是所有的瀏覽者都愿意填寫表單，一個糟糕的表單甚至?xí)樑転g覽者。首先要明確使用表單的目的，即為什么要設(shè)計這個表單。在設(shè)計表單前，可以盡量多地瀏覽相關(guān)的網(wǎng)頁，看一看別的網(wǎng)站是怎么做的，同時要把網(wǎng)絡(luò)營銷知識運用到設(shè)計中去，要記住一點：為瀏覽者考慮得越多，能收到的填寫好的表單就越多。表單網(wǎng)頁要和其他網(wǎng)頁保持一致的顏色和風(fēng)格，每一個表單域尺寸要適當(dāng)，既能滿足要求，又要保證網(wǎng)頁的美感。活動小結(jié)試一試——無所不在的表單表單設(shè)計至關(guān)重要，然而并不是所有表單的概念表單可以實現(xiàn)瀏覽者與Web服務(wù)器之間信息的交互傳送，它是網(wǎng)絡(luò)信息收集處理的一種重要方式，一個能正常工作的表單必須包含以下兩個部分：（1）含有表單的網(wǎng)頁。（2）用于處理瀏覽者提交信息的表單處理程序，如CGI或ASP程序等服務(wù)器端應(yīng)用程序或客戶端腳本。瀏覽者在表單中填寫相關(guān)信息，然后單擊“提交”按鈕，將表單內(nèi)容上傳到服務(wù)器，服務(wù)器用事先編好的表單處理程序來處理這些信息，再將處理結(jié)果反饋給瀏覽者的瀏覽器，可見表單的使用必須依賴于服務(wù)器端腳本才能真正發(fā)揮其功能。表單工作流程圖表單的概念表單可以實現(xiàn)瀏覽者與Web服務(wù)器之間信息的交互表單的概念除去表單處理程序以外，所有表單一般都由以下幾個部分組成：（1）表單域：又稱表單元素，是組成表單的最小單位。（2）表單域的說明文字：用于提示瀏覽者如何填寫表單域，以及在表單域中填寫何種內(nèi)容的有關(guān)說明文字。（3）“提交”和“重置”按鈕：瀏覽者用它們來提交自己填寫的信息或重新修改剛剛填寫的信息。表單的概念除去表單處理程序以外，所有表單一般都由以下幾個常用表單域在使用DreamweaverCS5編輯網(wǎng)頁時，表單是一個用紅色虛線標(biāo)記的方形區(qū)域。一個表單包含若干種類型的表單域，同時也可以包含其他網(wǎng)頁元素。每個表單都有自己的名稱，該表單中的每個表單域也有自己的名稱，同一個表單中的表單域不允許同名。表單域還附有相應(yīng)的說明文字，用于提示瀏覽者在表單域中輸入什么樣的內(nèi)容。表單域的名稱是由DreamweaverCS5在創(chuàng)建表單域時自動生成的，我們也可以自己修改表單域的名稱；而表單域的值則為瀏覽者所填寫或選擇的內(nèi)容。在瀏覽者按下“提交”按鈕之后，表單域的名稱和值將被發(fā)送到Web服務(wù)器的表單處理程序進(jìn)行處理。常用表單域在使用DreamweaverCS5編輯網(wǎng)頁時常用表單域DreamweaverCS5提供了以下幾種表單域，不同的表單域用來收集不同的信息。打開“插入”菜單中的“表單”子菜單，如圖所示可以看到DreamweaverCS5提供的不同種類的表單域。常用表單域DreamweaverCS5提供了以下幾種表常用表單域也可以在插入欄中選擇“表單”類別，直接選擇相應(yīng)的按鈕創(chuàng)建表單域：1．文本字段和文本區(qū)域

文本字段和文本區(qū)域用于接收瀏覽者的文本輸入內(nèi)容。文本字段和文本區(qū)域可以顯示單行或多行文本，還能以密碼域的方式顯示，其中密碼域顯示時，輸入文本將被替換成星號，以免其他人看到密碼常用表單域也可以在插入欄中選擇“表單”類別，直接選擇相應(yīng)的按常用表單域2．按鈕在單擊時執(zhí)行某種操作，例如重置表單操作和提交表單操作。3．單選按鈕由兩個或兩上以上的一組按鈕組成，瀏覽者只能選擇其中的一個選項：4．復(fù)選框由一組按鈕組成，瀏覽者可以選擇其中的任意多個合適的項：常用表單域2．按鈕常用表單域5．選擇（列表/菜單）選擇有兩種類型：一種是瀏覽者單擊對象對的下拉菜單，另一種是一列有項目的可滾動的列表。6．其他表單對象除了以上幾種常見的表單域外，還有隱藏域、文件域、圖像域、跳轉(zhuǎn)菜單等。并不是所有類型的表單域都同樣的受歡迎，畢竟大多數(shù)人喜歡做選擇題而不是論述題。因此，在構(gòu)思表單時，應(yīng)盡可能把要提的問題做成瀏覽者更容易接受的題型。小貼士常用表單域5．選擇（列表/菜單）并不是所有類型的表單域都創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以在對話框右端看到該框架集的預(yù)覽效果和相關(guān)描述。（3）單擊“創(chuàng)建”按鈕，在文檔窗口可以看到新創(chuàng)建的框架集，同時DreamweaverCS5會打開一個“框架標(biāo)簽輔助功能屬性”對話框。（4）為每個框架輸入恰當(dāng)?shù)臉?biāo)題名稱，然后點擊“確定”即可成功創(chuàng)建框架頁。

框架的標(biāo)題即框架的名稱，它用于識別不同的框架，在指定打開鏈接目標(biāo)的目標(biāo)框架或腳本在引用該框架時，框架名稱就派上用場了。一般情況下使用系統(tǒng)提供的默認(rèn)值，如mainFrame，topFrame，leftFrame等，這些名稱都是約定俗成的。當(dāng)然，你也可以使用自己定義的名稱。小貼士創(chuàng)建框架和框架集（2）在“示例頁”列表中選擇框架集類型，可以選擇框架和框架集對框架和框架集進(jìn)行操作，首先必須選中它。我們可以在文檔窗口中選擇框架或框架集，也可以通過“框架”面板進(jìn)行選擇。1．在文檔窗口中選擇框架或框架集（1）選擇框架在“設(shè)計”視圖中，按住Alt鍵的同時單擊某個框架內(nèi)部，即可選中該框架，此時該框架的邊框被虛線環(huán)繞。（2）選擇框架集單擊框架集的某一內(nèi)部框架邊框即可選中該框架集，此時該框架集的所有邊框被虛線環(huán)繞。

要執(zhí)行這一操作，框架邊框必須是可見的。如果看不到框架邊框，你可以通過打開“查看”菜單，選擇“可視化助理”子菜單中的“框架邊框”使框架邊框可見。小貼士選擇框架和框架集對框架和框架集進(jìn)行操作，首先必須選中它。創(chuàng)建表單創(chuàng)建表單的一般步驟如下：1．將光標(biāo)定位在要插入表單的位置，打開“插入”菜單，選擇“表單”子菜單中的“表單”命令，或選擇插入欄上的“表單”類別，然后單擊“表單”按鈕，將插入一個空的表單，在設(shè)計圖像中可以看到，紅色的虛輪廓線指示表單：創(chuàng)建表單創(chuàng)建表單的一般步驟如下：創(chuàng)建表單創(chuàng)建表單的一般步驟如下：1．將光標(biāo)定位在要插入表單的位置，打開“插入”菜單，選擇“表單”子菜單中的“表單”命令，或選擇插入欄上的“表單”類別，然后單擊“表單”按鈕，將插入一個空的表單，在設(shè)計圖像中可以看到，紅色的虛輪廓線指示表單：2．在屬性面板中指定將表單數(shù)據(jù)傳輸?shù)椒?wù)器所使用的方法。其中GET方法將值附加到請求該頁面的URL中，POST方法將在HTTP請求中嵌入表單數(shù)據(jù)。3．插入表單域。將插入點放置在希望表單域在表單中出現(xiàn)的位置，然后在“插入”菜單的“表單”子菜單中，或者在插入欄的“表單”類別中選擇相應(yīng)的表單域命令，將表單域插入頁面后可以設(shè)置其屬性。創(chuàng)建表單創(chuàng)建表單的一般步驟如下：2．在屬性面板中指定將表單數(shù)添加文本域?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“文本域”，或者單擊插入欄“表單”類別中的“文本字段”按鈕，即可插入一個文本域。可根據(jù)需要在屬性面板中設(shè)置文字域的屬性：文本域：為該文本域指定一個名稱。字符寬度：最多可顯示的字符數(shù)。例如，如果“字符寬度”設(shè)置為20，而瀏覽者輸入了30個字符，則在該文本域中只能看到前20個字符。請注意，雖然無法看到其余的字符，但文本域可以識別它們，而且它們會被發(fā)送到服務(wù)器進(jìn)行處理。最多字符數(shù)：設(shè)置文本域中最多可輸入的字符數(shù)。例如，可以使用“最多字符數(shù)”將郵政編碼限制為6位數(shù)，瀏覽者在輸入時就無法輸入6位以上的數(shù)字了。如果“最多字符數(shù)”設(shè)為空白，則瀏覽者可以輸入任意數(shù)量的文本而不受限制。類型：可以設(shè)置文本域為單行、多行和密碼。當(dāng)設(shè)置為密碼時，瀏覽者輸入的內(nèi)容顯示為星號，以免被其他人看到。初始值：指定在首次載入表單時文本域中顯示的值。例如，通過說明或示例值，可以提示瀏覽者在文本域中輸入正確的信息。類：將CSS規(guī)則應(yīng)用于對象。禁用：勾選此項用于禁用文本框。只讀：勾選此項用于設(shè)置文本框為只讀屬性。添加文本域?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插入”菜單添加復(fù)選框

將插入點定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“復(fù)選框”，或者單擊插入欄“表單”類別中的“復(fù)選框”按鈕，即可插入一個復(fù)選框?？筛鶕?jù)需要在屬性面板中設(shè)置復(fù)選框的屬性：復(fù)選框名稱：為該復(fù)選框指定一個名稱。每個復(fù)選框都必須有一個唯一名稱，所用名稱必須在表單內(nèi)唯一標(biāo)識該復(fù)選框。選定值：設(shè)置在該復(fù)選框被選中時發(fā)送給服務(wù)器的值。初始狀態(tài)：確定在瀏覽器中載入表單時該復(fù)選框是否被選中。類：將CSS規(guī)則應(yīng)用于對象。一般需要在復(fù)選框前添加說明性文字作為復(fù)選框的標(biāo)簽，然后繼續(xù)添加復(fù)選框直至所有復(fù)選框添加完成。添加復(fù)選框?qū)⒉迦朦c定位到表單中相應(yīng)位置，打開“插入”菜單添加單選按鈕

單選按鈕一般以組為單位出現(xiàn)，在一組單選按鈕中只能選擇一個選項，因此叫單選按鈕。將插入點定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“單選按鈕”，或者單擊插入欄“表單”類別中的“單選按鈕”按鈕，即可插入一個單選按鈕?？筛鶕?jù)需要在屬性面板中設(shè)置單選按鈕的屬性：單選按鈕：為該單選按鈕指定一個名稱。由于單選按鈕一般是以組出現(xiàn)，單選按鈕組內(nèi)的每個單選按鈕的名稱必須都一樣，否則不能實現(xiàn)單選的效果。選定值：設(shè)置在該單選按鈕被選中時發(fā)送給服務(wù)器的值。初始狀態(tài)：確定在瀏覽器中載入表單時該單選按鈕是否被選中。類：將CSS規(guī)則應(yīng)用于對象。一般需要在單選按鈕前添加說明性文字作為單選按鈕的標(biāo)簽，然后繼續(xù)添加單選按鈕直至所有單選按鈕添加完成。添加單選按鈕單選按鈕一般以組為單位出現(xiàn)，在一組單選按鈕中添加選擇（列表/菜單）如果提供的選項很多，比如要設(shè)計籍貫選項，使用復(fù)選框或單選按鈕就會占用太多的網(wǎng)頁，菜單能有效地解決這個問題，所有的選項縮成只顯示一行信息的小框，其他的選項則隱藏起來，當(dāng)瀏覽者用鼠標(biāo)單擊菜單將其展開時，才會顯示所有的選項供瀏覽者選擇。可根據(jù)需要在屬性面板中設(shè)置選擇（列表/菜單）的屬性：選擇：為該選擇指定一個名稱。每個選擇都必須有一個唯一名稱，所用名稱必須在表單內(nèi)唯一標(biāo)識該選擇。類型：設(shè)置該選擇的類型為菜單或者列表。列表值：設(shè)置列表或菜單里的選項標(biāo)簽和值。初始化時選定：確定在瀏覽器中載入表單時該列表或菜單選定的值。類：將CSS規(guī)則應(yīng)用于對象。單擊列表值，將彈出“列表值”對話框，點擊加號可添加項目標(biāo)簽和值，點擊三角箭頭可調(diào)整選項的上下順序。添加選擇（列表/菜單）如果提供的選項很多，比如要設(shè)計籍貫添加按鈕按鈕常用于控制表單的操作，使用按鈕可將表單數(shù)據(jù)提交到服務(wù)器，或者重置該表單。標(biāo)準(zhǔn)表單按鈕通常帶有“提交”、“重置”標(biāo)簽。使用按鈕還可以執(zhí)行相關(guān)事件，如單擊事件、提交表單事件等。將插入點定位到表單中相應(yīng)位置，打開“插入”菜單，選擇“表單”子菜單中的“按鈕”，或者單擊插入欄“表單”類別中的“按鈕”按鈕，即可插入一個按鈕?？筛鶕?jù)需要在屬性面板中設(shè)置按鈕的屬性：按鈕名稱：為該按鈕指定一個名稱。值：設(shè)置按鈕上顯示的文本。動作：確定單擊按鈕時發(fā)生的操作。如果選中了“提交表單”選項，當(dāng)單擊該按鈕時，將提交表單數(shù)據(jù)進(jìn)行處理。如果選中了“重置”選項，當(dāng)單擊該按鈕時，將清除該表單的內(nèi)容。選擇“無”選項，指定單擊該按鈕時要執(zhí)行的操作，例如，可以添加一個JavaScript腳本，當(dāng)瀏覽者單擊該按鈕時打開另一個頁面。類：將CSS規(guī)則應(yīng)用于對象。添加按鈕按鈕常用于控制表單的操作，使用按鈕可將表單數(shù)據(jù)提表單的驗證有時，需要對瀏覽者輸入的信息進(jìn)行一些限制，如限制輸入信息的類型和長度等。如電話號碼