第 4 章 資料輸入表單與 Request物件 製作.

Presentation on theme: "第 4 章 資料輸入表單與 Request物件 製作."— Presentation transcript:

1 第 4 章 資料輸入表單與 Request物件 製作

2 表單的建立與資料傳遞 - 資料的傳遞過程 網頁與使用者間完整的互動過程，大致包含從客戶端取得資料，在伺服端處理資料，然後輸出資料做出回應。
表單的建立與資料傳遞 資料的傳遞過程 網頁與使用者間完整的互動過程，大致包含從客戶端取得資料，在伺服端處理資料，然後輸出資料做出回應。 我們來操作一下將資料從客戶端傳向伺服端的實際例子。請您開啟ch4/PostData/PostData.htm檔，該檔的畫面如下圖所示。

3 表單的建立與資料傳遞 資料的傳遞過程 將姓名輸入文字方塊後，按下 送出 按鈕。畫面將顯示Response.asp網頁，如下圖所示。

4 表單的建立與資料傳遞 - 資料的傳遞過程 整個運作過程為使用者透過網頁中的表單將資料傳送給Web伺服器，並呼叫Response.asp檔。
表單的建立與資料傳遞 資料的傳遞過程 整個運作過程為使用者透過網頁中的表單將資料傳送給Web伺服器，並呼叫Response.asp檔。 Request物件（ASP物件）透過ISAPI介面取得使用者由表單傳送過來的資料。Web伺服器開始執行Response.asp檔，該檔內將呼叫Request物件取得前述由表單傳送過來的資料，完成此檔的執行後，Web伺服器將把執行結果回傳給客戶端。

5 表單的建立與資料傳遞 - 資料的傳遞過程 整個資料傳遞過程共有兩個重要的環節: 一是客戶端供使用者填寫資料的表單。
表單的建立與資料傳遞 資料的傳遞過程 整個資料傳遞過程共有兩個重要的環節: 一是客戶端供使用者填寫資料的表單。 二是ASP網頁欲取得表單資料時，呼叫的Request物件。

6 表單的建立與資料傳遞 表單的建立語法 顯示於客戶端，供使用者輸入資料的表單，必須使用HTML語法中的<FORM>標籤建立，並完成下表三種屬性的設定。

7 表單的建立與資料傳遞 - 表單的建立語法 表單的建立語法如下:
表單的建立與資料傳遞 表單的建立語法 表單的建立語法如下: <FORM action=ASP名稱路徑 method= {post | get} name= 表單名稱> 表單中的控制項 </FORM>

8 表單的建立與資料傳遞 表單的建立語法 表單內控制項的類型，主要有以下6種： 指令按鈕 文字方塊 文字區控制項 下拉選單 多選鈕 核取方塊

9 表單的建立與資料傳遞 表單的建立語法 PostData.htm檔內的表單定義由Response.asp檔回應表單動作，參數傳遞的方式為post方法。 表單中供使用者輸入姓名資料的文字方塊名稱為tbxName，此名稱將在ASP檔，取得表單資訊時用到。

10 表單的建立與資料傳遞 - 取得客戶端傳遞的資料
在ASP檔中，將透過ASP物件的Request物件取得客戶端所傳遞的資料的動作，語法如下： Request(控制項名稱) 以下為Response.asp檔回應ch4/PostData.htm檔時，取得表單中文字方塊（tbxName）資料的敘述。 ‘摘自PostData.htm檔 015 <% = Request("tbxName") %>

11 表單的建立與資料傳遞 - 資料傳遞的Get方式
在GetData.htm輸入姓名資料，然後按下 送出 按鈕。

12 表單的建立與資料傳遞 - 資料傳遞的Get方式
從Get方法的說明中，我們可得到一個啟發，以下語法也可以用於開啟ASP網頁，並將資料傳遞給伺服端。

13 表單的建立與資料傳遞 - 資料傳遞的Get方式
因此，在GetData.htm輸入Julianno後，按下 送出 按鈕，相當於運用以下位址開啟Resposne.asp網頁。

14 表單的建立與資料傳遞 - 資料傳遞的Get方式
在ch4/GetData/GetData2.htm檔就示範以這個方式開啟，並傳遞資料給Response.asp檔的做法。

15 控制項的建立與訊息傳遞 - 指令按鈕 在表單中，必須使用的指令按鈕有 Submit按鈕（送出）: 用於送出表單內的資料。
控制項的建立與訊息傳遞 指令按鈕 在表單中，必須使用的指令按鈕有 Submit按鈕（送出）: 用於送出表單內的資料。 Reset按鈕（重設）: 用於清除表單中已輸入的資料，供使用者再次輸入。

16 控制項的建立與訊息傳遞 - 指令按鈕 建立指令按鈕時，需使用HTML語法的<Input>標籤，且需設定下表所列的屬性。
控制項的建立與訊息傳遞 指令按鈕 建立指令按鈕時，需使用HTML語法的<Input>標籤，且需設定下表所列的屬性。 語法如下： <Input Type ={submit | reset} Name=按鈕名稱 Value=顯示值>

17 控制項的建立與訊息傳遞 指令按鈕 以下為此兩種按鈕的建立示範。

18 控制項的建立與訊息傳遞 - 文字方塊與密碼輸入欄
文字方塊與密碼欄的HTML語法如下： <Inupt Type ={text | password} Name=文字方塊名稱 Value=傳出值> 各屬性的意義如下表。

19 控制項的建立與訊息傳遞 - 文字區控制項 文字區控制項的HTML語法如下：
<TEXTAREA rows=列數 cols=行數 name=控制項名稱> 預設輸入值 </TEXTAREA>

20 控制項的建立與訊息傳遞 - 文字區控制項 下表為語法中各部份的說明。

21 控制項的建立與訊息傳遞 - 文字區控制項 以下為文字區的建立示範。
<TEXTAREA rows=5 cols=30 name=txtaMsg></TEXTAREA> 完成建立的文字區如下：

22 控制項的建立與訊息傳遞 - 下拉清單方塊 下拉清單方塊由<SELECT>標籤與<OPTION>標籤組成。

23 控制項的建立與訊息傳遞 - 下拉清單方塊 建立下拉清單方塊控制項的HTML語法如下：
<SELECT name=控制項名稱 size=1> <OPTION value=傳出值1 selected>選項1</OPTION> <OPTION value=傳出值2>選項2</OPTION> …… <OPTION value=傳出值N>選項N</OPTION> </SELECT>

24 控制項的建立與訊息傳遞 - 下拉清單方塊 語法中各部份的說明，請參考下表。

25 控制項的建立與訊息傳遞 - 下拉清單方塊 以下為下拉清單方塊的建立示範。 完成建立的下拉清單方塊如下圖：

26 控制項的建立與訊息傳遞 - 清單方塊 清單方塊與下拉清單方塊一樣是由<SELECT>標籤與<OPTION>標籤組成。
不同的地方在於設定於<SELECT>標籤的size屬性，其值不可設為1，便可建立出清單方塊。

27 控制項的建立與訊息傳遞 - 清單方塊 建立清單方塊控制項的HTML語法如下：
<SELECT name=控制項名稱 size=控制項大小 Multiple> <OPTION value=傳出值1 selected>選項1</OPTION> <OPTION value=傳出值2>選項2</OPTION> …… <OPTION value=傳出值N>選項N</OPTION> </SELECT>

28 控制項的建立與訊息傳遞 - 清單方塊 語法中各部份的說明，請參考下表:

29 控制項的建立與訊息傳遞 - 清單方塊 單選型的清單方塊 以下是一個清單方塊的建立示範。

30 控制項的建立與訊息傳遞 - 清單方塊 完成建立的清單方塊如下圖所示，使用者僅能在清單方塊中選取一個選項。
回應之ASP網頁取得單選型清單方塊傳出的值時，通常會利用Select Case判斷敘述比對取得值。

31 控制項的建立與訊息傳遞 - 清單方塊 多選型的清單方塊 以下HTML敘述將建立一個可多重選取選項的清單方塊。

32 控制項的建立與訊息傳遞 - 清單方塊 完成建立的清單方塊如下： 欲多重選取選項時，只要按住鍵盤的 按鍵，然後用滑鼠點選欲選取的選項即可。
欲多重選取選項時，只要按住鍵盤的 按鍵，然後用滑鼠點選欲選取的選項即可。 按住 鍵點選

33 控制項的建立與訊息傳遞 - 清單方塊 若按住鍵盤的 鍵選取選項時，將以範圍選取的方式複選選項，第一個點選的選項將為選取起點，第二個點選選項則為選取終點。 若以多選型清單方塊的名稱存取時，您將發現各選項的傳出值會以『, 』（逗號加以空白）的方式隔開，如下圖所示。

34 控制項的建立與訊息傳遞 - 清單方塊 當然撰寫程式時，我們無法運用多選型清單方塊以『, 』串連的數個傳出值。
可依照串連字串之順序，運用索引值指定欲取得的傳出值，語法如下： Request(清單方塊名稱)(索引值) 清單方塊名稱 網頁內表單中，傳出值的多選型清單方塊之名稱。 索引值 欲取得多選型清單方塊之傳出值的索引。

35 控制項的建立與訊息傳遞 - 清單方塊 透過Count屬性取得多選型清單方塊傳出值之個數的語法如下：
Request(清單方塊名稱).Count 以下敘述將配合For迴圈，自名為lbxBook之多選型清單方塊，取得所有傳出選項，並配合Select Case敘述執行處理。

36 控制項的建立與訊息傳遞 - 選擇鈕 建立選擇鈕的HTML語法如下：
<Inupt Type = radio Name=選擇鈕名稱 Value=傳出值 checked> 各屬性的意義請參考下表。

37 控制項的建立與訊息傳遞 - 選擇鈕 以下敘述將建立一組名為rdoJob的選擇鈕。 完成建立的選擇鈕，如下圖所示。

38 控制項的建立與訊息傳遞 - 核取方塊 建立核取方塊的HTML語法如下：
<Inupt Type = check Name=核取方塊名稱checked> 各屬性的意義，如下表。

39 控制項的建立與訊息傳遞 - 核取方塊 點選核取方塊後，將傳出on字串，若未被點選，傳出值為Empty（空值，傳入IsEmpty函數判斷將傳回true）。 以下敘述將建立一組核取方塊

40 控制項的建立與訊息傳遞 - 核取方塊 以上敘述第一個核取方塊預設為選取（若不希望被選取則不要設定checked），完成建立的核取方塊如下圖所示： 預設選取的核取方塊

41 控制項的建立與訊息傳遞 - 核取方塊 欲檢查某核取方塊是否被點選時，語法如下： If Request(核取方塊名稱) = "on" Then
…… End If 因此，判斷表單中名為chkbx1之核取方塊是否被選取的敘述如下： If Request("chkbx1") = "on" Then

42 控制項的建立與訊息傳遞 - 核取方塊 群組核取方塊 以下敘述將把數個核取方塊建立為一個群組。
群組核取方塊的建立觀念與選擇鈕相同，只要將同一群組之控制項的名稱（name屬性）設為相同即可。

43 控制項的建立與訊息傳遞 - 核取方塊 此時，核取方塊被選取後的傳出值，則不再是『on』，而是設定給Value屬性的值。
同一群組核取方塊的傳出值，也將如同多選型清單方塊一般，把被選取控制項之傳出值以『, 』（逗點加一空白）分隔。

44 控制項的建立與訊息傳遞 - 利用隱藏控制項傳遞資料
以下為建立隱藏控制項的語法： <Inupt Type = hidden Name=控制項名稱 Value=傳出值> 各屬性的意義，如下表

45 輸入資料的檢查 - 在那邊做資料檢查呢？ 對於使用者輸入表單的資料，在更進一步利用前，應該先執行檢查/篩選資料的動作:
一方面防止使用者輸入錯誤的資料，導致系統錯誤。 另一方面也可以確認使用者所輸入的是正確的資料。

46 輸入資料的檢查 - 在那邊做資料檢查呢？ 在客戶端與伺服端執行資料檢查的優缺點。 一、以相容性來看 二、以執行效率來看
三、以有效利用資源的角度來看

47 輸入資料的檢查 - 在客戶端執行資料檢查 Form物件 下圖為IE 5.0瀏覽器物件架構中與資料檢查相關的部份。

48 輸入資料的檢查 - 在客戶端執行資料檢查 上圖最重要的物件，便是form物件。
當在網頁中定義一個表單後，便可利用form引用此表單，至於表單中的各個控制項，也都被包含在form物件內。 從上圖可以看出form物件包含於代表網頁之document物件的forms集合中。

49 輸入資料的檢查 - 在客戶端執行資料檢查 取得表單資料
在該副程式進行資料檢查動作，而完成資料檢查的動作後，於該副程式內呼叫form物件的Submit方法送出資料，語法如下： 表單名稱.Submit 欲引用表單內某控制項，並取得使用者輸入之值的語法如下： 表單名稱.控制項名稱.Value

50 輸入資料的檢查 - 在客戶端執行資料檢查 表單名稱為定義在<Form>標籤name屬性的名稱，控制項名稱則為該控制項定義在<Input>標籤中name屬性的名稱。 以下語法將取得使用者輸入於form1表單tbxName控制項中的值。 form1.tbxName.value

51 輸入資料的檢查 - 在客戶端執行資料檢查 設定游標的位置 此動作必須運用form物件的element屬性完成。
該屬性是一個element物件的陣列，陣列的element物件將分別引用至表單的控制項。 element物件提供一個focus方法，可以將游標移到所引用的控制項中，語法如下： 表單名稱.elements(索引值).focus

52 輸入資料的檢查 - 在客戶端執行資料檢查 群組選擇鈕的客戶端資料檢查
群組選擇鈕在客戶端執行資料檢查時，必須在程式中，自行檢查每個選擇鈕是否被設定。 為了能夠辨別群組選擇鈕內的各選鈕，對於每個選鈕，都必須設定其ID屬性（但name屬性仍必須設定相同名稱，以維持群組選擇鈕多選一的效果）。 在客戶端網頁中，必須透過此ID屬性才能引用個別選鈕。

53 輸入資料的檢查 - 在客戶端執行資料檢查 若欲檢查該選擇鈕是否被選取時，必須判斷checked屬性之值。其值為true，代表被選取，反之則未被選取，語法如下： 表單名稱.選擇鈕ID.checked 欲取得單一選擇鈕的傳出值，則可透過value屬性，語法如下： 表單名稱.選擇鈕ID.value