透過表單互動(dòng)的網(wǎng)頁課件

1、第 10 章透過表單互動(dòng)的網(wǎng)頁著作權(quán)所有 旗標(biāo)出版股份有限公司第 10 章透過表單互動(dòng)的網(wǎng)頁著作權(quán)所有 旗標(biāo)出版股份有本章提要表單初步豐富表單的各種輸入欄位表單的處理本章提要表單初步一般常見的表單形式一般常見的表單形式表單初步表單中的輸入欄位應(yīng)用實(shí)例表單初步表單中的輸入欄位表單初步所有的表單內(nèi)容都必須放在 標(biāo)籤中, 包括表單中的說明文字、供使用者輸入的欄位等等。文件中可設(shè)定多個(gè)表單, 但不能做巢狀的表單, 也就是說 中不能加入第二個(gè) 。建立表單時(shí)必須用 ACTION、METHOD 兩個(gè)屬性來設(shè)定如何處理使用者所輸入的資料。表單初步所有的表單內(nèi)容都必須放在 /FOR表單中的輸入欄位在一般表單中所

2、看到的輸入欄位, 幾乎都是用 標(biāo)籤來設(shè)定, 只要修改其中的屬性, 就會(huì)出現(xiàn)不同的輸入欄位：表單中的輸入欄位在一般表單中所看到的輸入欄位, 幾乎都是用 表單中的輸入欄位其中 TYPE 屬性是用來設(shè)定要使用的輸入欄位種類, 例如一般的文字輸入欄 (TEXT)、單選鈕 (RADIO)、多選鈕 (CHECKBOX)、或是按下會(huì)送出表單資料的按鈕 (BUTTON) 等等。VALUE 屬性所設(shè)的初始值, 則是一開始就出現(xiàn)在該輸入欄位中的資料。表單中的輸入欄位其中 TYPE 屬性是用來設(shè)定要使用的輸入欄表單中常用的輸入欄位文字欄TEXT密碼欄PASSWORD送出鈕SUBMIT重設(shè)鈕-RESET表單中常用的輸

3、入欄位文字欄TEXT文字欄TEXT文字欄TEXT文字欄TEXT若想調(diào)整方框的長度, 可加上 SIZE 屬性；亦可用 MAXLENGTH 限制輸入的資料長度：文字欄TEXT若想調(diào)整方框的長度, 可加上 SIZE 屬性密碼欄PASSWORD密碼欄PASSWORD送出鈕SUBMIT送出鈕SUBMIT重設(shè)鈕-RESET重設(shè)鈕-RESET應(yīng)用實(shí)例應(yīng)用實(shí)例應(yīng)用實(shí)例應(yīng)用實(shí)例豐富表單的各種輸入欄位單選鈕RADIO多選鈕CHECKBOX影像IMAGE列表欄多列的文字輸入欄TEXTAREA組織表單內(nèi)容查詢用表單-ISINDEX豐富表單的各種輸入欄位單選鈕RADIO單選鈕RADIO對(duì)於只有一個(gè)單選鈕的情況下, 可不

4、必設(shè)定其 VALUE 屬性, 例如：?jiǎn)芜x鈕RADIO對(duì)於只有一個(gè)單選鈕的情況下, 可不必設(shè)定其多選鈕CHECKBOX多選鈕CHECKBOX影像IMAGE影像IMAGE影像IMAGE使用影像輸入欄位時(shí), 只要使用者用滑鼠在圖形上按一下, 資料就會(huì)立即送出, 而送出的資料格式像下面這個(gè)樣子：影像IMAGE使用影像輸入欄位時(shí), 只要使用者用滑鼠在圖形列表欄列表欄是在文件中常見的下拉選單, 其中列出讓使用者可選取的項(xiàng)目：列表欄列表欄是在文件中常見的下拉選單, 其中列出讓使用者可選列表欄的使用方法先用一對(duì) 標(biāo)籤定義出列表欄及其出現(xiàn)的位置, 在其中加上 標(biāo)籤, 定義每一個(gè)出現(xiàn)在列表中的項(xiàng)目：列表欄的使用方

5、法先用一對(duì) 標(biāo)籤定義出列表欄列表欄的使用方法當(dāng)使用者選擇未設(shè)定 VALUE 屬性的項(xiàng)目時(shí), 送出的值會(huì)恰好是該項(xiàng)目的文字內(nèi)容：列表欄的使用方法當(dāng)使用者選擇未設(shè)定 VALUE 屬性的項(xiàng)目時(shí)列表欄的使用方法當(dāng)使用者選取的項(xiàng)目是 Basic 時(shí), 瀏覽器傳回的資料會(huì)是 Language=Basic, 若我們改為：則選取 Basic 時(shí), 瀏覽器傳回的資料會(huì)變成 Language=2。列表欄的使用方法當(dāng)使用者選取的項(xiàng)目是 Basic 時(shí), 瀏覽列表欄的使用方法若想設(shè)定預(yù)設(shè)的項(xiàng)目, 可在該項(xiàng)目的 標(biāo)籤中加上 SELECTED 屬性, 例如：列表欄的使用方法若想設(shè)定預(yù)設(shè)的項(xiàng)目, 可在該項(xiàng)目的 OPT列表欄

6、的變化調(diào)整列表欄方框的大小-SIZE列表欄的變化調(diào)整列表欄方框的大小-SIZE列表欄的變化可選擇多項(xiàng)的列表欄-MULTIPLE列表欄的變化可選擇多項(xiàng)的列表欄-MULTIPLE多列的文字輸入欄TEXTAREA多列的文字輸入欄TEXTAREA多列的文字輸入欄TEXTAREA由於 ROWS 及 COLS 只是設(shè)定文字輸入欄在畫面上有幾列幾行, 所以在輸入超過 COLS 所指定的字元數(shù), 或是超過 ROWS 所設(shè)的列數(shù)時(shí), 捲軸才會(huì)自動(dòng)變?yōu)榭蓲詣?dòng)的：多列的文字輸入欄TEXTAREA由於 ROWS 及 COL多列的文字輸入欄TEXTAREA多列的文字輸入欄TEXTAREA自動(dòng)換行的 WRAP這個(gè)屬性可用

7、來設(shè)定在輸入超過欄位寬度的文字時(shí), 是否要自動(dòng)換行：WRAP=VIRTUAL 及 WRAP=PHYSICAL自動(dòng)換行的 WRAP這個(gè)屬性可用來設(shè)定在輸入超過欄位寬度的文WRAP=VIRTUAL 及 WRAP=PHYSICAL讓輸入的文字在超過欄位寬度時(shí)自動(dòng)換行。但在送出資料時(shí), WRAP=VIRTUAL 只有在按 Enter 鍵的地方會(huì)換行, 其它部份並不會(huì)自動(dòng)換行。而 WRAP=PHYSICAL 則會(huì)依照螢?zāi)簧纤姷降姆绞綄⑤斎氲馁Y料送出。WRAP=VIRTUAL 及 WRAP=PHYSICAL讓輸組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)容組織表單內(nèi)

8、容欄位的存取設(shè)定指定欄位存取方式的屬性為 accesskey, 其作用就是設(shè)定一個(gè)可直接移到該欄位的快捷鍵, 例如：欄位的存取設(shè)定指定欄位存取方式的屬性為 accesskey,組織表單內(nèi)容FIELDSET 標(biāo)籤LEGEND 標(biāo)籤組織表單內(nèi)容FIELDSET 標(biāo)籤FIELDSET 標(biāo)籤 標(biāo)籤的用途是將多個(gè)輸入欄位組合在一起, 瀏覽器會(huì)自動(dòng)用一個(gè)方框?qū)⑦@些輸入欄位框起來, 讓使用者能看得比較清楚。只要將想放在一起的輸入欄位都放在 之中即可。FIELDSET 標(biāo)籤 標(biāo)籤的用途是將多LEGEND 標(biāo)籤LEGEND 標(biāo)籤套用 FIELDSET 及 LEGEND 標(biāo)籤的範(fàn)例套用 FIELDSET 及 LE

9、GEND 標(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 及 LEGEND 標(biāo)籤的範(fàn)例套用 FIELDSET 及 LEGEND 標(biāo)籤的範(fàn)例套用 FIELDSET 及 LEGEND 標(biāo)籤的範(fàn)例用 標(biāo)籤將欄位分組, 及利用無邊框表格技巧來整理 休閒活動(dòng) 部分的多選欄, 整個(gè)表單看起來就整齊多了：套用 FIELDSET 及 LEGEND 標(biāo)籤的範(fàn)例用 F查詢用表單-ISINDEX 一般是做為資料庫查詢用的：查

10、詢用表單-ISINDEX 一般是做為資查詢用表單-ISINDEX在未指定 ACTION 屬性時(shí), 輸入的內(nèi)容將直接傳送到目前的 URL 上, 這也是一般 標(biāo)籤較常使用的方式。至於 PROMPT 屬性若省略的話, 瀏覽器會(huì)自動(dòng)加入一段說明文字：查詢用表單-ISINDEX在未指定 ACTION 屬性時(shí),表單的處理處理表單的技術(shù)設(shè)定表單處理方式表單處理實(shí)例CGI 資料索引表單的處理處理表單的技術(shù)處理表單的技術(shù)伺服器端的動(dòng)態(tài)網(wǎng)頁CGI 直接郵寄處理表單的技術(shù)伺服器端的動(dòng)態(tài)網(wǎng)頁伺服器端的動(dòng)態(tài)網(wǎng)頁這是一種將程式寫在 HTML 文件中的技術(shù), 但不同於普通 JavaScript 網(wǎng)頁是由瀏覽器負(fù)責(zé)執(zhí)行。伺服

11、器端的動(dòng)態(tài)網(wǎng)頁是由 WWW 伺服器先執(zhí)行程式, 才將執(zhí)行結(jié)果傳送給瀏覽器, 所以使用者瀏覽到的畫面仍是普通 HTML 文件。伺服器端的動(dòng)態(tài)網(wǎng)頁這是一種將程式寫在 HTML 文件中的技術(shù)伺服器端的動(dòng)態(tài)網(wǎng)頁目前最普遍的伺服器端動(dòng)態(tài)網(wǎng)頁技術(shù)是微軟的 ASP (Active Server Pages), 主要的應(yīng)用平臺(tái)是 Windows 的 IIS 伺服器。撰寫 ASP 程式時(shí)可使用 JavaScript、VBScript 等多種語言, 彈性頗大, 因此廣受歡迎。伺服器端的動(dòng)態(tài)網(wǎng)頁目前最普遍的伺服器端動(dòng)態(tài)網(wǎng)頁技術(shù)是微軟的 CGI另一種常用的表單處理方式是使用 CGI (Common Gateway I

12、nterface) 程式, CGI 是 WWW 伺服器與外部程式溝通的介面標(biāo)準(zhǔn)。只要遵循 CGI 規(guī)格與 WWW 伺服器互相溝通, 用哪種語言都不是問題。一般稱這類程式為 CGI 程式, 可別誤以為它是用 CGI 語言所撰寫的程式喔！CGI另一種常用的表單處理方式是使用 CGI (Common直接郵寄若不使用伺服器端的動(dòng)態(tài)網(wǎng)頁或 CGI 程式處理表單, 也可以將表單設(shè)計(jì)成會(huì)將資料以電子郵件的形式寄出。當(dāng)瀏覽器送出表單資料時(shí), 會(huì)呼叫電子郵件程式來寄送表單資料。直接郵寄若不使用伺服器端的動(dòng)態(tài)網(wǎng)頁或 CGI 程式處理表單,設(shè)定表單處理方式指定處理表單的 URLACTION 屬性表單資料的傳送方式M

13、ETHOD 屬性表單資料的編碼方式ENCTYPE 屬性設(shè)定表單處理方式指定處理表單的 URLACTION 屬性指定處理表單的 URLACTION 屬性設(shè)定表單資料處理方式的屬性為 ACITON, 必須將其值設(shè)定成處理資料用的 ASP 網(wǎng)頁或 CGI 程式之 URL。舉例來說, 假設(shè) .tw 用來處理表單的是根目錄下的 showdata.asp, 則 標(biāo)籤需設(shè)為：指定處理表單的 URLACTION 屬性設(shè)定表單資料處理方指定處理表單的 URLACTION 屬性只要在 ACTION 屬性中指定正確的 http: /主機(jī)名稱/動(dòng)態(tài)網(wǎng)頁或程式路徑, 當(dāng)使用者按下送出表單資料的按鈕時(shí), 瀏覽器就會(huì)將資料

14、送給該動(dòng)態(tài)網(wǎng)頁或程式處理。如果要讓表單的資料寄到電子信箱中, 則可在 ACTION 中做如下的設(shè)定：指定處理表單的 URLACTION 屬性只要在 ACTIO表單資料的傳送方式METHOD 屬性METHOD=GET (此為預(yù)設(shè)值), 資料會(huì)被當(dāng)做 URL 上的參數(shù)一併送出, 在一些網(wǎng)站進(jìn)行查詢時(shí)就會(huì)看到這類附有參數(shù)的 URL：表單資料的傳送方式METHOD 屬性METHOD=GET表單資料的傳送方式METHOD 屬性METHOD=POST, 將表單中的資料另外傳送到指定的 URL, 所以沒有長度的限制。如果是用郵寄的方式, 採用 POST 時(shí), 資料會(huì)以附件的方式寄出。不過可透過 ENCTYP

15、E 屬性來改變寄出方式。表單資料的傳送方式METHOD 屬性METHOD=POS表單資料的編碼方式ENCTYPE 屬性ENCTYPE 屬性可用來設(shè)定資料送出時(shí)的編碼方式, 在此介紹 2 種設(shè)定值：ENCTYPE=appliction/x-www-form-urlencoded (預(yù)設(shè)的方式), 將表單資料編碼後放在 URL 後送出。 ENCTYPE=text/plain, 將資料以純文字格式送出。當(dāng)表單是以郵件處理時(shí), 很適合設(shè)為此項(xiàng)。表單資料的編碼方式ENCTYPE 屬性ENCTYPE 屬性安裝 IIS 伺服器以便測(cè)試 ASP安裝 IIS 伺服器以便測(cè)試 ASP安裝 IIS 伺服器以便測(cè)試

16、ASP安裝 IIS 伺服器以便測(cè)試 ASP安裝 IIS 伺服器以便測(cè)試 ASP安裝 IIS 伺服器以便測(cè)試 ASP安裝 IIS 伺服器以便測(cè)試 ASP安裝 IIS 伺服器以便測(cè)試 ASP表單處理實(shí)例用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁以郵件寄出表單資料表單處理實(shí)例用 METHOD=GET 傳送資料給 ASP用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=GET

17、傳送資料給 ASP 網(wǎng)頁使用 Request.QueryString 取得資料：ASP 已將有關(guān)表單資料的資訊包裝在 Request 物件中, 當(dāng)表單使用 GET 的方式傳送時(shí), 由 Request 物件的 QueryString 屬性即可取得表單資料。用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁使用用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁使用 Request.Write 輸出資料：算是 ASP 最基本的輸出方法, 這些輸出結(jié)果就是要傳送給瀏覽器的, 所以我們可輸出 HTML 標(biāo)籤和文件內(nèi)容, 在範(fàn)例中就直接輸出網(wǎng)頁文字、表單資料、 和 標(biāo)籤。用 METHOD=GET 傳送資料

18、給 ASP 網(wǎng)頁使用用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=GET 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁用 METHOD=POST 傳送資料給 ASP 網(wǎng)頁以郵件寄出表單資料在 mailto： 後面加上郵件主旨的設(shè)定, 例如：以郵件寄出表單資料在 mailto： 後面加上郵件主旨的設(shè)以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵件寄出表單資料以郵