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

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

ENCTYPE="text/plain",將資料以純文字格式送出。當表單是以郵件處理時,很適合設為此項。表單資料的編碼方式—ENCTYPE屬性ENCTYPE屬性以郵件寄出表單資料在mailto：…後面加上郵件主旨的設定,例如：以郵件寄出表單資料在mailto：…後面加上郵件主旨的設以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料CGI資料索引若需要更完整的CGI介紹、參考資料,不妨到下面這個網站看看：/cgi,包含了完整的CGI教學與範例。CGI資料索引若需要更完整的CGI介紹、參考資料,不免費的CGI資源CGI除了用來處理表單的資料外,也可以做其它的應用,最常見的是所謂的計數器(Counter)和留言板或討論區(qū)之類的。免費的CGI資源：中山大學的免費計數器.tw蕃薯藤的免費資源一覽/ccnet/inet/resource/freebie/

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