表單資料的編碼方式-ENCTYPE屬性課件

第10章透過(guò)表單互動(dòng)的網(wǎng)頁(yè)本章提要表單初步豐富表單的各種輸入欄位表單的處理一般常見(jiàn)的表單形式表單初步表單中的輸入欄位應(yīng)用實(shí)例表單初步所有的表單內(nèi)容都必須放在<FORM>…</FORM>標(biāo)籤中,包括表單中的說(shuō)明文字、供使用者輸入的欄位等等。文件中可設(shè)定多個(gè)表單,但不能做巢狀的表單,也就是說(shuō)<FORM>中不能加入第二個(gè)<FORM>。建立表單時(shí)必須用ACTION、METHOD兩個(gè)屬性來(lái)設(shè)定如何處理使用者所輸入的資料。表單中的輸入欄位在一般表單中所看到的輸入欄位,幾乎都是用<INPUT>標(biāo)籤來(lái)設(shè)定,只要修改其中的屬性,就會(huì)出現(xiàn)不同的輸入欄位：表單中的輸入欄位其中TYPE屬性是用來(lái)設(shè)定要使用的輸入欄位種類(lèi),例如一般的文字輸入欄(TEXT)、單選鈕(RADIO)、多選鈕(CHECKBOX)、或是按下會(huì)送出表單資料的按鈕(BUTTON)等等。VALUE屬性所設(shè)的初始值,則是一開(kāi)始就出現(xiàn)在該輸入欄位中的資料。表單中常用的輸入欄位文字欄—TEXT密碼欄—PASSWORD送出鈕—SUBMIT重設(shè)鈕--RESET文字欄—TEXT文字欄—TEXT若想調(diào)整方框的長(zhǎng)度,可加上SIZE屬性；亦可用MAXLENGTH限制輸入的資料長(zhǎng)度：密碼欄—PASSWORD送出鈕—SUBMIT重設(shè)鈕--RESET應(yīng)用實(shí)例應(yīng)用實(shí)例豐富表單的各種輸入欄位單選鈕—RADIO多選鈕—CHECKBOX影像—IMAGE列表欄多列的文字輸入欄—TEXTAREA組織表單內(nèi)容查詢(xún)用表單--ISINDEX單選鈕—RADIO對(duì)於只有一個(gè)單選鈕的情況下,可不必設(shè)定其VALUE屬性,例如：多選鈕—CHECKBOX影像—IMAGE影像—IMAGE使用影像輸入欄位時(shí),只要使用者用滑鼠在圖形上按一下,資料就會(huì)立即送出,而送出的資料格式像下面這個(gè)樣子：列表欄列表欄是在文件中常見(jiàn)的下拉選單,其中列出讓使用者可選取的項(xiàng)目：列表欄的使用方法先用一對(duì)<SELECT>標(biāo)籤定義出列表欄及其出現(xiàn)的位置,在其中加上<OPTION>標(biāo)籤,定義每一個(gè)出現(xiàn)在列表中的項(xiàng)目：列表欄的使用方法當(dāng)使用者選擇未設(shè)定VALUE屬性的項(xiàng)目時(shí),送出的值會(huì)恰好是該項(xiàng)目的文字內(nèi)容：列表欄的使用方法當(dāng)使用者選取的項(xiàng)目是Basic時(shí),瀏覽器傳回的資料會(huì)是Language=Basic,若我們改為：則選取Basic時(shí),瀏覽器傳回的資料會(huì)變成Language=2。列表欄的使用方法若想設(shè)定預(yù)設(shè)的項(xiàng)目,可在該項(xiàng)目的<OPTION>標(biāo)籤中加上SELECTED屬性,例如：列表欄的變化調(diào)整列表欄方框的大小--SIZE列表欄的變化可選擇多項(xiàng)的列表欄--MULTIPLE多列的文字輸入欄—TEXTAREA多列的文字輸入欄—TEXTAREA由於ROWS及COLS只是設(shè)定文字輸入欄在畫(huà)面上有幾列幾行,所以在輸入超過(guò)COLS所指定的字元數(shù),或是超過(guò)ROWS所設(shè)的列數(shù)時(shí),捲軸才會(huì)自動(dòng)變?yōu)榭蓲詣?dòng)的：多列的文字輸入欄—TEXTAREA自動(dòng)換行的WRAP這個(gè)屬性可用來(lái)設(shè)定在輸入超過(guò)欄位寬度的文字時(shí),是否要自動(dòng)換行：<TEXTAREAWRAP=OFF>WRAP=VIRTUAL及WRAP=PHYSICAL<TEXTAREAWRAP=OFF>WRAP=VIRTUAL及WRAP=PHYSICAL讓輸入的文字在超過(guò)欄位寬度時(shí)自動(dòng)換行。但在送出資料時(shí),WRAP=VIRTUAL只有在按[Enter]鍵的地方會(huì)換行,其它部份並不會(huì)自動(dòng)換行。而WRAP=PHYSICAL則會(huì)依照螢?zāi)簧纤?jiàn)到的方式將輸入的資料送出。組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)容欄位的存取設(shè)定指定欄位存取方式的屬性為accesskey,其作用就是設(shè)定一個(gè)可直接移到該欄位的快捷鍵,例如：組織表單內(nèi)容FIELDSET標(biāo)籤LEGEND標(biāo)籤FIELDSET標(biāo)籤<FIELDSET>標(biāo)籤的用途是將多個(gè)輸入欄位組合在一起,瀏覽器會(huì)自動(dòng)用一個(gè)方框?qū)⑦@些輸入欄位框起來(lái),讓使用者能看得比較清楚。只要將想放在一起的輸入欄位都放在<FIELDSET>…</FIELDSET>之中即可。LEGEND標(biāo)籤套用FIELDSET及LEGEND標(biāo)籤的範(fàn)例套用FIELDSET及LEGEND標(biāo)籤的範(fàn)例套用FIELDSET及LEGEND標(biāo)籤的範(fàn)例套用FIELDSET及LEGEND標(biāo)籤的範(fàn)例套用FIELDSET及LEGEND標(biāo)籤的範(fàn)例用<FIELDSET>標(biāo)籤將欄位分組,及利用無(wú)邊框表格技巧來(lái)整理"休閒活動(dòng)"部分的多選欄,整個(gè)表單看起來(lái)就整齊多了：查詢(xún)用表單--ISINDEX<ISINDEX>一般是做為資料庫(kù)查詢(xún)用的：查詢(xún)用表單--ISINDEX在未指定ACTION屬性時(shí),輸入的內(nèi)容將直接傳送到目前的URL上,這也是一般<ISINDEX>標(biāo)籤較常使用的方式。至於PROMPT屬性若省略的話(huà),瀏覽器會(huì)自動(dòng)加入一段說(shuō)明文字：表單的處理處理表單的技術(shù)設(shè)定表單處理方式表單處理實(shí)例CGI資料索引處理表單的技術(shù)伺服器端的動(dòng)態(tài)網(wǎng)頁(yè)CGI直接郵寄伺服器端的動(dòng)態(tài)網(wǎng)頁(yè)這是一種將程式寫(xiě)在HTML文件中的技術(shù),但不同於普通JavaScript網(wǎng)頁(yè)是由瀏覽器負(fù)責(zé)執(zhí)行。伺服器端的動(dòng)態(tài)網(wǎng)頁(yè)是由WWW伺服器先執(zhí)行程式,才將執(zhí)行結(jié)果傳送給瀏覽器,所以使用者瀏覽到的畫(huà)面仍是普通HTML文件。伺服器端的動(dòng)態(tài)網(wǎng)頁(yè)目前最普遍的伺服器端動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)是微軟的ASP(ActiveServerPages),主要的應(yīng)用平臺(tái)是Windows的IIS伺服器。撰寫(xiě)ASP程式時(shí)可使用JavaScript、VBScript等多種語(yǔ)言,彈性頗大,因此廣受歡迎。CGI另一種常用的表單處理方式是使用CGI(CommonGatewayInterface)程式,CGI是WWW伺服器與外部程式溝通的介面標(biāo)準(zhǔn)。只要遵循CGI規(guī)格與WWW伺服器互相溝通,用哪種語(yǔ)言都不是問(wèn)題。一般稱(chēng)這類(lèi)程式為CGI程式,可別誤以為它是用"CGI"語(yǔ)言所撰寫(xiě)的程式喔！直接郵寄若不使用伺服器端的動(dòng)態(tài)網(wǎng)頁(yè)或CGI程式處理表單,也可以將表單設(shè)計(jì)成會(huì)將資料以電子郵件的形式寄出。當(dāng)瀏覽器送出表單資料時(shí),會(huì)呼叫電子郵件程式來(lái)寄送表單資料。設(shè)定表單處理方式指定處理表單的URL—ACTION屬性表單資料的傳送方式—METHOD屬性表單資料的編碼方式—ENCTYPE屬性指定處理表單的URL—ACTION屬性設(shè)定表單資料處理方式的屬性為ACITON,必須將其值設(shè)定成處理資料用的ASP網(wǎng)頁(yè)或CGI程式之URL。舉例來(lái)說(shuō),假設(shè).tw用來(lái)處理表單的是根目錄下的showdata.asp,則<FORM>標(biāo)籤需設(shè)為：指定處理表單的URL—ACTION屬性只要在A(yíng)CTION屬性中指定正確的http://主機(jī)名稱(chēng)/動(dòng)態(tài)網(wǎng)頁(yè)或程式路徑,當(dāng)使用者按下送出表單資料的按鈕時(shí),瀏覽器就會(huì)將資料送給該動(dòng)態(tài)網(wǎng)頁(yè)或程式處理。如果要讓表單的資料寄到電子信箱中,則可在A(yíng)CTION中做如下的設(shè)定：表單資料的傳送方式—METHOD屬性METHOD="GET"(此為預(yù)設(shè)值),資料會(huì)被當(dāng)做URL上的參數(shù)一併送出,在一些網(wǎng)站進(jìn)行查詢(xún)時(shí)就會(huì)看到這類(lèi)附有參數(shù)的URL：表單資料的傳送方式—METHOD屬性METHOD="POST",將表單中的資料另外傳送到指定的URL,所以沒(méi)有長(zhǎng)度的限制。如果是用郵寄的方式,採(cǎi)用"POST"時(shí),資料會(huì)以附件的方式寄出。不過(guò)可透過(guò)ENCTYPE屬性來(lái)改變寄出方式。表單資料的編碼方式—ENCTYPE屬性ENCTYPE屬性可用來(lái)設(shè)定資料送出時(shí)的編碼方式,在此介紹2種設(shè)定值：ENCTYPE="appliction/x-www-form-urlencoded"(預(yù)設(shè)的方式),將表單資料編碼後放在URL後送出。

ENCTYPE="text/plain",將資料以純文字格式送出。當(dāng)表單是以郵件處理時(shí),很適合設(shè)為此項(xiàng)。以郵件寄出表單資料在mailto：…後面加上郵件主旨的設(shè)定,例如：以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料CGI資料索引若需要更完整的CGI介紹、