透过表单互动的网页

1、著作權所有 旗標出版股份有限公司第第 10 章章透過表單互動的網頁透過表單互動的網頁本章提要本章提要n表單初步n豐富表單的各種輸入欄位n表單的處理一般常見的表單形式一般常見的表單形式表單初步表單初步n表單中的輸入欄位n應用實例表單初步表單初步n所有的表單內容都必須放在 標籤中, 包括表單中的說明文字、供使用者輸入的欄位等等。n文件中可設定多個表單, 但不能做巢狀的表單, 也就是說 中不能加入第二個 。n建立表單時必須用 ACTION、METHOD 兩個屬性來設定如何處理使用者所輸入的資料。表單中的輸入欄位表單中的輸入欄位n在一般表單中所看到的輸入欄位, 幾乎都是用 標籤來設定, 只要修改其中的

2、屬性, 就會出現不同的輸入欄位：表單中的輸入欄位表單中的輸入欄位n其中 TYPE 屬性是用來設定要使用的輸入欄位種類, 例如一般的文字輸入欄 (TEXT)、單選鈕 (RADIO)、多選鈕 (CHECKBOX)、或是按下會送出表單資料的按鈕 (BUTTON) 等等。nVALUE 屬性所設的初始值, 則是一開始就出現在該輸入欄位中的資料。表單中常用的輸入欄位表單中常用的輸入欄位n文字欄TEXTn密碼欄PASSWORDn送出鈕SUBMITn重設鈕-RESET文字欄文字欄TEXT文字欄文字欄TEXTn若想調整方框的長度, 可加上 SIZE 屬性；亦可用 MAXLENGTH 限制輸入的資料長度：密碼欄密

3、碼欄PASSWORD送出鈕送出鈕SUBMIT重設鈕重設鈕-RESET應用實例應用實例應用實例應用實例豐富表單的各種輸入欄位豐富表單的各種輸入欄位n單選鈕RADIOn多選鈕CHECKBOXn影像IMAGEn列表欄n多列的文字輸入欄TEXTAREAn組織表單內容n查詢用表單-ISINDEX單選鈕單選鈕RADIOn對於只有一個單選鈕的情況下, 可不必設定其 VALUE 屬性, 例如：多選鈕多選鈕CHECKBOX影像影像IMAGE影像影像IMAGEn使用影像輸入欄位時, 只要使用者用滑鼠在圖形上按一下, 資料就會立即送出, 而送出的資料格式像下面這個樣子：列表欄列表欄n列表欄是在文件中常見的下拉選單,

4、 其中列出讓使用者可選取的項目：列表欄的使用方法列表欄的使用方法n先用一對 標籤定義出列表欄及其出現的位置, 在其中加上 標籤, 定義每一個出現在列表中的項目：列表欄的使用方法列表欄的使用方法n當使用者選擇未設定 VALUE 屬性的項目時, 送出的值會恰好是該項目的文字內容：列表欄的使用方法列表欄的使用方法n當使用者選取的項目是 Basic 時, 瀏覽器傳回的資料會是 Language=Basic, 若我們改為：n則選取 Basic 時, 瀏覽器傳回的資料會變成 Language=2。列表欄的使用方法列表欄的使用方法n若想設定預設的項目, 可在該項目的 標籤中加上 SELECTED 屬性, 例

5、如：列表欄的變化列表欄的變化n調整列表欄方框的大小-SIZE列表欄的變化列表欄的變化n可選擇多項的列表欄-MULTIPLE多列的文字輸入欄多列的文字輸入欄TEXTAREA多列的文字輸入欄多列的文字輸入欄TEXTAREAn由於 ROWS 及 COLS 只是設定文字輸入欄在畫面上有幾列幾行, 所以在輸入超過 COLS 所指定的字元數, 或是超過 ROWS 所設的列數時, 捲軸才會自動變為可捲動的：多列的文字輸入欄多列的文字輸入欄TEXTAREA自動換行的自動換行的 WRAPn這個屬性可用來設定在輸入超過欄位寬度的文字時, 是否要自動換行： WRAP=VIRTUAL 及 WRAP=PHYSICALW

6、RAP=VIRTUAL 及及 WRAP=PHYSICALn讓輸入的文字在超過欄位寬度時自動換行。n但在送出資料時, WRAP=VIRTUAL 只有在按 Enter 鍵的地方會換行, 其它部份並不會自動換行。n而 WRAP=PHYSICAL 則會依照螢幕上所見到的方式將輸入的資料送出。組織表單內容組織表單內容組織表單內容組織表單內容組織表單內容組織表單內容組織表單內容組織表單內容欄位的存取設定欄位的存取設定n指定欄位存取方式的屬性為 accesskey, 其作用就是設定一個可直接移到該欄位的快捷鍵, 例如：組織表單內容組織表單內容nFIELDSET 標籤nLEGEND 標籤FIELDSET 標籤

7、標籤n 標籤的用途是將多個輸入欄位組合在一起, 瀏覽器會自動用一個方框將這些輸入欄位框起來, 讓使用者能看得比較清楚。n只要將想放在一起的輸入欄位都放在 之中即可。LEGEND 標籤標籤套用套用 FIELDSET 及及 LEGEND 標籤的範例標籤的範例套用套用 FIELDSET 及及 LEGEND 標籤的範例標籤的範例套用套用 FIELDSET 及及 LEGEND 標籤的範例標籤的範例套用套用 FIELDSET 及及 LEGEND 標籤的範例標籤的範例套用套用 FIELDSET 及及 LEGEND 標籤的範例標籤的範例n用 標籤將欄位分組, 及利用無邊框表格技巧來整理 休閒活動 部分的多選欄

8、, 整個表單看起來就整齊多了：查詢用表單查詢用表單-ISINDEXn 一般是做為資料庫查詢用的：查詢用表單查詢用表單-ISINDEXn在未指定 ACTION 屬性時, 輸入的內容將直接傳送到目前的 URL 上, 這也是一般 標籤較常使用的方式。n至於 PROMPT 屬性若省略的話, 瀏覽器會自動加入一段說明文字：表單的處理表單的處理n處理表單的技術n設定表單處理方式n表單處理實例nCGI 資料索引處理表單的技術處理表單的技術n伺服器端的動態網頁nCGI n直接郵寄伺服器端的動態網頁伺服器端的動態網頁n這是一種將程式寫在 HTML 文件中的技術, 但不同於普通 JavaScript 網頁是由瀏覽

9、器負責執行。n伺服器端的動態網頁是由 WWW 伺服器先執行程式, 才將執行結果傳送給瀏覽器, 所以使用者瀏覽到的畫面仍是普通 HTML 文件。伺服器端的動態網頁伺服器端的動態網頁n目前最普遍的伺服器端動態網頁技術是微軟的 ASP (Active Server Pages), 主要的應用平台是 Windows 的 IIS 伺服器。n撰寫 ASP 程式時可使用 JavaScript、VBScript 等多種語言, 彈性頗大, 因此廣受歡迎。CGIn另一種常用的表單處理方式是使用 CGI (Common Gateway Interface) 程式, CGI 是 WWW 伺服器與外部程式溝通的介面標準

10、。只要遵循 CGI 規格與 WWW 伺服器互相溝通, 用哪種語言都不是問題。n一般稱這類程式為 CGI 程式, 可別誤以為它是用 CGI 語言所撰寫的程式喔！直接郵寄直接郵寄n若不使用伺服器端的動態網頁或 CGI 程式處理表單, 也可以將表單設計成會將資料以電子郵件的形式寄出。當瀏覽器送出表單資料時, 會呼叫電子郵件程式來寄送表單資料。設定表單處理方式設定表單處理方式n指定處理表單的 URLACTION 屬性n表單資料的傳送方式METHOD 屬性n表單資料的編碼方式ENCTYPE 屬性指定處理表單的指定處理表單的 URLACTION 屬性屬性n設定表單資料處理方式的屬性為 ACITON, 必須

11、將其值設定成處理資料用的 ASP 網頁或 CGI 程式之 URL。n舉例來說, 假設 .tw 用來處理表單的是根目錄下的 showdata.asp, 則 標籤需設為：指定處理表單的指定處理表單的 URLACTION 屬性屬性n只要在 ACTION 屬性中指定正確的 http: /主機名稱/動態網頁或程式路徑, 當使用者按下送出表單資料的按鈕時, 瀏覽器就會將資料送給該動態網頁或程式處理。n如果要讓表單的資料寄到電子信箱中, 則可在 ACTION 中做如下的設定：表單資料的傳送方式表單資料的傳送方式METHOD 屬性屬性nMETHOD=GET (此為預設值), 資料會被當做 URL 上的參數一併

12、送出, 在一些網站進行查詢時就會看到這類附有參數的 URL：表單資料的傳送方式表單資料的傳送方式METHOD 屬性屬性nMETHOD=POST, 將表單中的資料另外傳送到指定的 URL, 所以沒有長度的限制。n如果是用郵寄的方式, 採用 POST 時, 資料會以附件的方式寄出。不過可透過 ENCTYPE 屬性來改變寄出方式。表單資料的編碼方式表單資料的編碼方式ENCTYPE 屬性屬性nENCTYPE 屬性可用來設定資料送出時的編碼方式, 在此介紹 2 種設定值： ENCTYPE=appliction/x-www-form-urlencoded (預設的方式), 將表單資料編碼後放在 URL 後

13、送出。 ENCTYPE=text/plain, 將資料以純文字格式送出。當表單是以郵件處理時, 很適合設為此項。安裝安裝 IIS 伺服器以便測試伺服器以便測試 ASP安裝安裝 IIS 伺服器以便測試伺服器以便測試 ASP安裝安裝 IIS 伺服器以便測試伺服器以便測試 ASP安裝安裝 IIS 伺服器以便測試伺服器以便測試 ASP表單處理實例表單處理實例n用 METHOD=GET 傳送資料給 ASP 網頁n用 METHOD=POST 傳送資料給 ASP 網頁n以郵件寄出表單資料用用 METHOD=GET 傳送傳送資料給資料給 ASP 網頁網頁用用 METHOD=GET 傳送傳送資料給資料給 ASP

14、 網頁網頁用用 METHOD=GET 傳送傳送資料給資料給 ASP 網頁網頁n使用 Request.QueryString 取得資料：ASP 已將有關表單資料的資訊包裝在 Request 物件中, 當表單使用 GET 的方式傳送時, 由 Request 物件的 QueryString 屬性即可取得表單資料。用用 METHOD=GET 傳送傳送資料給資料給 ASP 網頁網頁n使用 Request.Write 輸出資料：算是 ASP 最基本的輸出方法, 這些輸出結果就是要傳送給瀏覽器的, 所以我們可輸出 HTML 標籤和文件內容, 在範例中就直接輸出網頁文字、表單資料、 和 標籤。用用 METHO

15、D=GET 傳送傳送資料給資料給 ASP 網頁網頁用用 METHOD=GET 傳送傳送資料給資料給 ASP 網頁網頁用用 METHOD=POST 傳送資傳送資料給料給 ASP 網頁網頁用用 METHOD=POST 傳送資傳送資料給料給 ASP 網頁網頁用用 METHOD=POST 傳送資傳送資料給料給 ASP 網頁網頁用用 METHOD=POST 傳送資傳送資料給料給 ASP 網頁網頁用用 METHOD=POST 傳送資傳送資料給料給 ASP 網頁網頁以郵件寄出表單資料以郵件寄出表單資料n在 mailto： 後面加上郵件主旨的設定, 例如：以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料CGI