網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目9：使用表單Project9項(xiàng)目9職場(chǎng)情境根據(jù)之前學(xué)習(xí)的內(nèi)容，小艾已經(jīng)可以制作一個(gè)屬于自己的網(wǎng)頁(yè)了，內(nèi)容雖然很豐富，但是始終感覺(jué)像少了點(diǎn)什么，沒(méi)錯(cuò)！就是少了一些關(guān)于網(wǎng)頁(yè)中的交互內(nèi)容，有就是表單，正在犯愁如何能夠添加時(shí)，凱程站在后面突然說(shuō)，小艾！你是不是想要在網(wǎng)頁(yè)中添加可用于交互的一些內(nèi)容呀？，小艾說(shuō)，對(duì)呀！你是怎么知道的呢？凱程說(shuō)，看你做的網(wǎng)頁(yè)，好像就缺這個(gè)部分的內(nèi)容了，哈哈！讓我來(lái)告訴你如何了解和添加你需要的內(nèi)容吧。這個(gè)內(nèi)容就是表單，在網(wǎng)站中，表單是實(shí)現(xiàn)網(wǎng)頁(yè)上數(shù)據(jù)傳輸?shù)幕A(chǔ)，其作用就是實(shí)現(xiàn)訪問(wèn)者與網(wǎng)站之間的交互功能。利用表單，可以根據(jù)訪問(wèn)者輸入的信息，自動(dòng)生成頁(yè)面反饋給訪問(wèn)者，還可以為網(wǎng)站收集訪問(wèn)者輸入的信息。表單可以包含允許進(jìn)行交互的各種對(duì)象，包括文本域、列表框、復(fù)選框、單選按鈕、圖像域、按鈕以及其他表單對(duì)象，操作起來(lái)也非常的簡(jiǎn)單。好了，下面我們就一起來(lái)進(jìn)行學(xué)習(xí)和進(jìn)步吧！。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握在網(wǎng)頁(yè)中表單創(chuàng)建的方法。掌握表單對(duì)象添加的方法。〓技能目標(biāo)〓學(xué)會(huì)創(chuàng)建表單。學(xué)會(huì)插入表單對(duì)象?！刭|(zhì)目標(biāo)〓了解網(wǎng)頁(yè)設(shè)計(jì)的行業(yè)規(guī)范，在制作網(wǎng)頁(yè)時(shí)能規(guī)避違規(guī)的行為，形成良好的行為規(guī)范。懂得團(tuán)隊(duì)協(xié)作的重要性，不要凸顯個(gè)人主義。CONTENTS任務(wù)1了解表單的創(chuàng)建目錄任務(wù)2掌握表單對(duì)象的添加綜合實(shí)戰(zhàn)—會(huì)員登記表課后習(xí)題任務(wù)1了解表單的創(chuàng)建Dreamweaver作為一種可視化的網(wǎng)頁(yè)設(shè)計(jì)軟件，現(xiàn)在我們學(xué)習(xí)它的表單，只需學(xué)習(xí)到表單在頁(yè)面中的界面設(shè)計(jì)這部分即可，至于后續(xù)的程序處理部分，還要交給專門的程序設(shè)計(jì)師。?；顒?dòng)1了解表單一個(gè)完整的表單設(shè)計(jì)應(yīng)該很明確地分為兩個(gè)部分：表單對(duì)象部分和應(yīng)用程序部分，它們分別由網(wǎng)頁(yè)設(shè)計(jì)師和程序設(shè)計(jì)師來(lái)設(shè)計(jì)完成。其過(guò)程是這樣的，首先由網(wǎng)頁(yè)設(shè)計(jì)師制作出一個(gè)可以讓瀏覽者輸入各項(xiàng)資料的表單頁(yè)面，這部分屬于在顯示器上可以看到的內(nèi)容，此時(shí)的表單只是一個(gè)外殼而已，不具有真正工作的能力，需要后臺(tái)程序的支持。接著由程序設(shè)計(jì)師通過(guò)

ASP或者

CGI程序，來(lái)編寫(xiě)處理各項(xiàng)表單資料和反饋信息等操作所需的程序，這部分瀏覽者雖然看不見(jiàn)，但卻是表單處理的核心。表單用<form></form>標(biāo)記來(lái)創(chuàng)建，在<form></form>標(biāo)記之間的部分都屬于表單的內(nèi)容。<form>標(biāo)記具有

action、method和

target屬性。action的值是處理程序的程序名，如<formaction="URL">，如果這個(gè)屬性是空值（""），則當(dāng)前文檔的

URL將被使用，當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行這個(gè)程序。method屬性用來(lái)定義處理程序從表單中獲得信息的方式，可取

GET或

POST中的一個(gè)。GET方式是處理程序從當(dāng)前html文檔中獲取數(shù)據(jù)，這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在

1KB以下。POST方式傳送的數(shù)據(jù)比較大，它使當(dāng)前的

html文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用

GET方式傳送大得多。target屬性用來(lái)指定目標(biāo)窗口或目標(biāo)幀?？蛇x當(dāng)前窗口_self、父級(jí)窗口_parent、頂層窗口_top和空白窗口_blank。任務(wù)1了解表單的創(chuàng)建活動(dòng)2了解創(chuàng)建表單使用表單必須具備的條件有兩個(gè)：一個(gè)是含有表單元素的網(wǎng)頁(yè)文檔，另一個(gè)是具備服務(wù)器端的表單處理應(yīng)用程序或客戶端腳本程序，它能夠處理用戶輸入到表單中的信息。下面創(chuàng)建一個(gè)基本的表單，新建一個(gè)空白文檔并插入一個(gè)1行1列的表格，將“寬”為800、“高”為400，如圖9-1所示。將光標(biāo)置于文檔中要插入表單的位置，執(zhí)行“插入/表單/表單”命令，執(zhí)行命令后，頁(yè)面中就會(huì)出現(xiàn)紅色的虛線，這些虛線就是表單,如圖所示。實(shí)踐經(jīng)驗(yàn)：執(zhí)行命令后，如果看不到紅色虛線表單，執(zhí)行菜單欄中的“查看/設(shè)計(jì)視圖選項(xiàng)/可視化助理/不可見(jiàn)元素”命令，可以看到插入的表單。任務(wù)1了解表單的創(chuàng)建活動(dòng)3了解表單屬性的設(shè)置選中表單，在“屬性”面板中，設(shè)置表單的屬性，如圖所示。在表單的“屬性”面板中可以設(shè)置以下參數(shù)。ID：輸入標(biāo)識(shí)該表單的唯一名稱。Action：指定處理該表單的動(dòng)態(tài)頁(yè)或腳本的路徑?？梢栽凇癆ction”文本框中輸入完整的路徑，也可以單擊文件夾圖標(biāo)瀏覽應(yīng)用程序。如果讀者并沒(méi)有相關(guān)程序支持的話，也可以使用“E-Mail”的方式來(lái)傳輸表單信息，這種方式需要在“Action”文本框中鍵入“mailto:電子郵件地址”的內(nèi)容，比如“mailto:jsxson@”，表示提交的信息將會(huì)發(fā)送到作者的郵箱中。Method：在“Method”下拉列表中，選擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的傳送方式，包括

3個(gè)選項(xiàng)。讀者可以選擇速度快但攜帶數(shù)據(jù)量小的“GET”方法，或者數(shù)據(jù)量大的POST方法。一般情況下應(yīng)該使用“POST”方法，這在數(shù)據(jù)保密方面也有好處。任務(wù)1了解表單的創(chuàng)建POST：使用“HTTPpost”方法發(fā)送數(shù)據(jù)；此方法將單個(gè)消息中的數(shù)據(jù)發(fā)送給服務(wù)器。GET：使用“HTTPget”方法發(fā)送數(shù)據(jù)，此方法將表單域內(nèi)容放置在“URL”查詢字符串中。“默認(rèn)”：用瀏覽器默認(rèn)的方式，一般默認(rèn)為“GET”。Enctype：用來(lái)設(shè)置發(fā)送數(shù)據(jù)的

MIME編碼類型，一般情況下應(yīng)選擇“application/x-www-form-urlencoded”。Target：使用“目標(biāo)”下拉列表指定一個(gè)窗口，這個(gè)窗口中顯示應(yīng)用程序或者腳本程序，將表單處理完成后所顯示的結(jié)果。_blank：反饋網(wǎng)頁(yè)將在新開(kāi)窗口里打開(kāi)。_parent：反饋網(wǎng)頁(yè)將在副窗口里打開(kāi)。_self：反饋網(wǎng)頁(yè)將在原窗口里打開(kāi)。_top：反饋網(wǎng)頁(yè)將在頂層窗口里打開(kāi)。AcceptCharset：客戶端通過(guò)發(fā)送該協(xié)商建議服務(wù)端使用該字符集來(lái)發(fā)送響應(yīng)結(jié)果?！癠TF-8”是沒(méi)有國(guó)家的編碼,也就是獨(dú)立于任何一種語(yǔ)言,任何語(yǔ)言都可以使用。Class：在“Class”下拉列表中選擇要定義的表單樣式。素養(yǎng)小課堂人與人之間是需要相互溝通的，的無(wú)論是學(xué)習(xí)還是工作，必要的溝通是不可少的，好的溝通能讓彼此少走很多的彎路，一項(xiàng)任務(wù)的實(shí)施如果沒(méi)有必要的溝通，得到的結(jié)果是非?？膳碌摹＞拖褚粋€(gè)網(wǎng)頁(yè)如果沒(méi)有交互功能的存在，是沒(méi)有辦法收錄相關(guān)內(nèi)容信息的，所以說(shuō)工作或?qū)W習(xí)時(shí)要多和任務(wù)方進(jìn)行有效的溝通，以此來(lái)讓自己的工作更加的順利、更加的圓滿。任務(wù)2掌握表單對(duì)象的添加創(chuàng)建表單后，就可以向表單中添加各種表單對(duì)象了，下面將分別介紹各種表單對(duì)象的添加。課堂實(shí)操—通過(guò)文本命令添加文本域文本域接受任何類型的輸入內(nèi)容。文本域可以是單行或多行顯示，也可以是密碼域的方式顯示，在這種情況下，輸入文本將被替換為星號(hào)或項(xiàng)目符號(hào)，以避免旁觀者看到。單行文本域主要用于單行信息的輸入，創(chuàng)建單行文本域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)單選按鈕命令添加單選按鈕單選按鈕只允許從多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)。單選按鈕通常成組地使用，在同一個(gè)組中的所有單選按鈕必須具有相同的名稱。插入單選按鈕的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)復(fù)選框命令添加復(fù)選框復(fù)選框允許用戶在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，每個(gè)復(fù)選框都是獨(dú)立的，所以必須有一個(gè)唯一的名稱。插入復(fù)選框的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)復(fù)選框命令添加復(fù)選框拓展知識(shí)表單中除了可以文本域和單選按鈕以外，還可以添加復(fù)選擇域、文件域、日期域、圖像按鈕域、Tel域、電子郵件域、文本區(qū)域和按鈕等操作。復(fù)選框允許用戶在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，每個(gè)復(fù)選框都是獨(dú)立的，所以必須有一個(gè)唯一的名稱。插入復(fù)選框的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)選擇命令添加選擇域選擇域使訪問(wèn)者可以從列表中選擇一個(gè)或多個(gè)項(xiàng)目。當(dāng)空間有限，但需要顯示許多項(xiàng)目時(shí)，選擇域非常有用。如果想要對(duì)返回給服務(wù)器的值予以控制，也可以使用選擇域。選擇域與文本域不同，在文本域中用戶可以隨心所欲地鍵入任何信息，甚至包括無(wú)效的數(shù)據(jù)，而使用選擇域則可以設(shè)置某個(gè)菜單返回的確切值?？梢栽诒韱沃胁迦雰煞N類型的選擇域：一種是用戶單擊時(shí)下拉的菜單；另一種是顯示可供用戶從中選擇的可滾動(dòng)項(xiàng)目列表的菜單。添加選擇域的具體操作步驟如下。。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)文件命令添加文件域可以創(chuàng)建文件域，文件域使瀏覽者可以選擇其計(jì)算機(jī)上的文件，如字處理文檔或圖像文件，并將該文件上傳到服務(wù)器。文件域的外觀與文本域類似，只是文件域還包含一個(gè)“瀏覽”按鈕。瀏覽者可以手動(dòng)輸入要上傳的文件的路徑，也可以使用“瀏覽”按鈕選擇文件。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)日期命令和圖像按鈕命令添加日期域和圖像按鈕域在

Dreamweaver中，可以使用指定的圖像作為按鈕。如果使用圖像來(lái)執(zhí)行任務(wù)而不是提交數(shù)據(jù)，則需要將某種行為附加到表單對(duì)象上。創(chuàng)建圖像域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)Tel命令添加Tel域Tel是一種全球最新的頂級(jí)域名，通過(guò)

DNS能夠讓你直接在互聯(lián)網(wǎng)上存儲(chǔ)、更新和發(fā)布聯(lián)系信息、網(wǎng)絡(luò)鏈接、住宅電話、辦公電話、手機(jī)、電子郵件、即時(shí)通信軟件等，同時(shí)完全擁有你發(fā)布的信息，保護(hù)私人數(shù)據(jù)，僅限授權(quán)人查看。插入

Tel域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)電子郵件命令添加電子郵件域電子郵件域可以在網(wǎng)頁(yè)中添加電子郵件文本區(qū)，插入電子郵件域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)文本區(qū)域命令添加文本區(qū)域?qū)τ谛枰顚?xiě)大量的文本信息，諸如：個(gè)人意見(jiàn)或是討論文本…等，就可以選擇文本區(qū)域來(lái)操作。插入文本區(qū)域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)提交或重置按鈕命令添加按鈕按鈕控制表單操作，使用表單按鈕，可以將輸入表單的數(shù)據(jù)提交到服務(wù)器，或者重置該表單。對(duì)表單而言，按鈕是非常重要的，它能夠控制對(duì)表單內(nèi)容的操作，如“提交”或“重置”按鈕。要將表單內(nèi)容發(fā)送到遠(yuǎn)端服務(wù)器上，使用“提交”按鈕；要清除現(xiàn)有的表單內(nèi)容，使用“重置”按鈕。插入按鈕的具體操作步驟如下。綜合實(shí)戰(zhàn)—會(huì)員登記表實(shí)戰(zhàn)訓(xùn)練要求處理圖像制作表頭新建文檔進(jìn)行保存創(chuàng)建表格插入嵌入表格設(shè)置大小插入圖片插入表單插入表單組件實(shí)戰(zhàn)素材素材文件（素材/項(xiàng)目9/001）如圖所示。任務(wù)單項(xiàng)目編號(hào)9項(xiàng)目名稱綜合實(shí)戰(zhàn)—會(huì)員登記表

時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)中通過(guò)插入表單及表單組件制作網(wǎng)頁(yè)會(huì)員登記表的一般流程課堂實(shí)踐：設(shè)計(jì)主題，處理圖像制作表頭、新建保存、插入表格、插入表單，嵌套表格、設(shè)置文本大小顏色，插入表單組件并進(jìn)行設(shè)置。完成一個(gè)會(huì)員登記的制作?？己藰?biāo)準(zhǔn)：處理表頭圖像。10分新建文檔插入表格。10分嵌套表格10分插入表單10分插入并設(shè)置表單組件10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—會(huì)員登記表實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目9/zhsz-djb，如圖所示。課后習(xí)題一．判斷題1.()所有表單組件都要在表單域內(nèi)加入與設(shè)置。2.()在設(shè)置單選按鈕時(shí)，每一組選項(xiàng)按鈕中的名稱(Name)都要相同。3.()表單信息必須通過(guò)服務(wù)器主機(jī)的程序及數(shù)據(jù)庫(kù)軟件，才能變成可處理的信息內(nèi)容。4.()可以使用圖像作為表單信息的傳送按鈕。5.()在表單創(chuàng)建的過(guò)程中，可以運(yùn)用表格來(lái)加強(qiáng)排版效果。

二．選擇題1.()具有單選功能的表單組件是？(A)文本(B)復(fù)選框

(C)