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

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

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