伺服端HTML表單處理

2. 8 伺服端HTML表單處理 • 8-1 HTML表單的基礎 • 8-2 jQuery Mobile表單 • 8-3 資料輸入欄位 • 8-4 選擇與選單欄位 • 8-5 伺服端表單驗證 • 8-6 HTML5表單

3. 8-1 HTML表單的基礎 • 8-1-1 HTML表單標籤 • 8-1-2 HTML表單欄位的共同屬性

4. 8-1-1 HTML表單標籤-種類

5. 8-1-1 HTML表單標籤-基本架構 • HTML表單是標籤組合，其基本架構如下所示： <form id="name" name="name" method="post | get" action="URL" enctype="MIME"> <input type=…> <textarea> … </textarea> <select> <option> … </option> </select> <input type="submit" …> </form>

6. 8-1-1 HTML表單標籤-<form>標籤屬性 • id/name屬性：表單識別和名稱。 • method屬性：設定資料傳送到伺服端的方法，值get是使用URL網址的參數來傳遞；post是使用HTTP通訊協定的標頭資料傳遞。 • action屬性：設定伺服端執行的表單處理程式，例如：CGI、ASP、ASP.NET、PHP或JSP等程式的URL網址。 • enctype屬性：設定表單資料傳送的MIME型態，預設application/x-www-form-urlencoded，如果action屬性值為電子郵件地址，表示使用電子郵件送出表單欄位內容，enctype屬性text/plain，表示是一般文字內容。

7. 8-1-2 HTML表單欄位的共同屬性 • HTML表單欄位是組成表單的元素，一般來說，表單欄位的共同屬性說明，如下表所示：

8. 8-2 jQuery Mobile的表單 • 8-2-1 送出jQuery Mobile表單 • 8-2-2 建立jQuery Mobile的表單欄位

9. 8-2-1 送出jQuery Mobile表單-Ajax表單 • jQuery Mobile框架預設儘可能使用Ajax方式來送出表單，其行為類似使用超連結連接其他jQuery Mobile頁面，我們可以使用get或post方法來送出表單。基本jQuery Mobile表單結構和上一節的HTML表單相似，如下所示： <form method="get" action="form.cshtml"> … </form> • 表單標籤<form>需要指定action和method屬性，如果沒有指定method屬性，預設值是get；action屬性的預設值是目前頁面所在的路徑。

10. 8-2-1 送出jQuery Mobile表單-id屬性 • 請注意！如果有指定<form>標籤的id屬性（建議不要指定id屬性值），此值不只在同一jQuery Mobile檔案需要唯一，整個jQuery Mobile網站都需要唯一，因為jQuery Mobile框架是使用單頁面巡覽方式，但是，有可能讓id屬性值的頁面同時出現在DOM樹中，為了避免重複，一定需要是唯一值。

11. 8-2-1 送出jQuery Mobile表單- HTTP請求的GET和POST方法 • 在瀏覽器可以使用HTTP通訊協定的方法送出請求至Web伺服器，一般來說，常用的方法有2種：GET和POST，即表單<form>標籤的action屬性值，其說明如下所示： • GET方法：HTTP的GET方法是讀取網頁，當使用者第1次請求網頁時，就是使用GET方法，可以傳遞URL參數至Web伺服器。 • POST方法：HTTP的POST方法是送出表單，通常是當使用者輸入表單欄位且按下【送出】鈕後，瀏覽器就是建立POST請求送至Web伺服器，傳遞的資料包含使用者輸入的欄位值。

12. 8-2-1 送出jQuery Mobile表單-使用非Ajax表單 • 如果不需要使用Ajax方式來送出表單，在表單<form>標籤可以加上data-ajax="false"屬性，如下所示： <form method="get" action="form.cshtml" data-ajax="false"> … </form> • 另一種方式是在<form>標籤使用target屬性，即target="_blank"，可以指定瀏覽器處理表單送出的目標，不過，<a>標籤的rel屬性不適用在<form>標籤。

13. 8-2-2 jQuery Mobile的表單欄位-說明 • jQuery Mobile框架是使用HTML原生欄位標籤名稱來執行對應的jQuery外掛程式，自動將原生HTML表單欄位轉換成觸控強化的jQuery Mobile元件，即小工具（Widgets），小工具是結合標籤和JavaScript程式碼來轉換單一HTML標籤成為一個互動元件，如下所示： • 按鈕：將<button>和<input>標籤建立成button小工具。 • 文字方塊：將<input>和<textarea>標籤建立成textinput小工具。 • 選擇鈕與核取方塊：將<input type="radio">和<input type="checkbox">標籤建立成checkboxradio小工具。 • 選單：將<select>和<option>標籤建立成selectmenu小工具。 • 滑動軸：將<input type="range">標籤建立成slider小工具。 • 滑動開關：將<select>和<option>標籤，data-role屬性值為slider建立成slider小工具。

14. 8-2-2 jQuery Mobile的表單欄位-欄位說明的<label>標籤 • 為了更容易存取欄位，jQuery Mobile的所有表單欄位都需要對應的<label>標籤，如下所示： <label for="username">使用者名稱:</label> <input type="text" name="username" id="username" /> • <label>標籤使用for屬性值username對應<input>標籤的id屬性值，表示它們是一體的，因為對於觸控螢幕的行動裝置來說，此時的欄位可觸控面積就會加上<label>標籤的內容，而不只欄位本身，讓表單欄位的觸控操作更加容易。

15. 8-2-2 jQuery Mobile的表單欄位-表單欄位容器（Field Containers） • 為了改進在寬螢幕的行動裝置上顯示label和表單欄位，jQuery Mobile建議在每一個欄位外加上div元素和data-role="fieldcontain"屬性的表單欄位容器，如下所示： <div id="shipDiv" data-role="fieldcontain"> <label for="shipNo">送貨編號: </label> <input type="text" id="shipNo" name="shipNo"/> </div> • 表單欄位在jQuery Mobile會自動替欄位下方新增分隔線，並且依據螢幕尺寸來自動調整使用單欄，或兩欄方式顯示表單欄位。

16. 8-2-2 jQuery Mobile的表單欄位-使用原生HTML表單欄位 • 如果建立的HTML表單欄位不需要jQuery Mobile自動轉換成觸控最佳化元件，請在HTML表單欄位加上data-role="none"屬性，就可以恢復成原生HTML表單欄位，如下所示： <label for="test"> <select name="test" id="test" data-role="none"> <option value="a" >A</option> <option value="b" >B</option> <option value="c" >C</option> </select>

17. 8-3 資料輸入欄位 • 8-3-1 單行文字方塊與密碼欄位 • 8-3-2 多行文字方塊欄位 • 8-3-3 滑動軸欄位 • 8-3-4 搜尋欄位

18. 8-3-1 單行文字方塊與密碼欄位-文字方塊 • 文字方塊欄位可以讓使用者輸入單行文字內容或密碼字串。單行文字方塊是表單使用最頻繁的欄位之一，可以讓使用者以鍵盤輸入所需的資料。例如：姓名、帳號和電話等，如下所示： <div id="userDiv" data-role="fieldcontain"> <label for="user">使用者名稱: </label> <input type="text" id="user" name="user"/> </div> • <input>標籤的type屬性值是text，可以建立單行文字方塊，請注意！為了方便JavaScript和jQuery存取欄位值，請加上相同屬性值的id和name屬性。

19. 8-3-1 單行文字方塊與密碼欄位-密碼欄位 • 密碼欄位是將輸入字串在顯示時改用其他符號取代，在使用上和單行文字方塊並沒有什麼分別，如下所示： <div id="passDiv" data-role="fieldcontain"> <label for="pass">使用者密碼: </label> <input type="password" id="pass" name="pass" data-mini="true"/> </div> • <input>標籤的type屬性值是password，可以建立密碼欄，data-mini屬性值true，可以建立縮小版的表單欄位。

20. 8-3-1 單行文字方塊與密碼欄位-取得欄位值1 • ASP.NET程式是使用Request物件的Form屬性來取得表單欄位值，如下所示： user = Request.Form["user"]; pass = Request.Form["pass"]; • 上述程式碼可以取得表單欄位user和pass的值，因為預設值是字串，所以不用特別處理。

21. 8-3-1 單行文字方塊與密碼欄位-取得欄位值2 • 如果輸入的是數值，我們可以使用AsInt()、AsFloat()和AsDecimal()等方法轉換成數值，如下所示： int num; decimal price; num = Request.Form["numOfUsers"].AsInt(); price = Request.Form["price"].AsDecimal();

22. 8-3-1 單行文字方塊與密碼欄位-IsPost屬性 • 因為ASP.NET範例表單是送回給自己，我們需要使用IsPost屬性判斷是否是表單送回，或是第1次載入表單，如下所示： if (IsPost) { user = Request.Form["user"]; pass = Request.Form["pass"]; result = user + "/" + pass; } • 上述if條件判斷是否是表單送回，如果是，IsPost屬性傳回true，然後就可以取得使用者輸入的表單欄位值。

23. 8-3-1 單行文字方塊與密碼欄位-圖例

24. 8-3-2 多行文字方塊欄位-標籤 • 多行文字方塊和文字方塊都可以讓使用者輸入資料，不過，多行文字方塊能夠輸入多行或整篇文字內容，特別適合使用在地址、意見、描述或備註等文字內容的資料輸入，如下所示： <div data-role="fieldcontain"> <label for="comments">回應: </label> <textarea id="comments" name="comments"></textarea> </div>

25. 8-3-2 多行文字方塊欄位-取得欄位值 • 如同單行文字方塊和密碼欄位，我們也是使用Request物件的Form屬性來取得表單欄位值，如下所示： result = Request.Form["comments"];

26. 8-3-3 滑動軸欄位-標籤 • jQuery Mobile的滑動軸欄位（Slider）可以用來輸入一定範圍之間的數字資料，它是使用HTML5新增的type屬性值range來建立，可以直接輸入，也可以使用滑鼠拖拉滑動軸來調整數值範圍，如下所示： <div data-role="fieldcontain"> <label for="hight">身高:</label> <input type="range" name="hight" id="hight" value="170" min="100" max="220" step="2" data-mini="true" data-theme="a" data-track-theme="b"/> </div>

27. 8-3-3 滑動軸欄位-取得欄位值 • 取得滑動軸欄位值和之前沒有什麼不同，只不過因為是數值，我們需要執行型態轉換，如下所示： decimal h, w; h = Request.Form["height"].AsDecimal(); w = Request.Form["weight"].AsDecimal();

28. 8-3-4 搜尋欄位 • jQuery Mobile的搜尋欄位是HTML5新增的欄位類型，它是一個顯示不同外觀的單行文字方塊欄位，在開始輸入關鍵字時，就會在最後顯示X鈕，可以清除輸入的文字內容，如下所示： <div data-role="fieldcontain"> <label for="search1">搜尋:</label> <input type="search" name="search1" id="search1"/> </div> • 取得欄位值和之前 欄位相同。

29. 8-4 選擇與選單欄位 • 8-4-1 選擇鈕 • 8-4-2 核取方塊 • 8-4-3 滑動開關 • 8-4-4 單選選單 • 8-4-5 複選選單

30. 8-4-1 選擇鈕-說明 • 選擇鈕（Radio Buttons）是二選一或多選一的單選題，使用者可以在一組選擇鈕中選取一個選項，jQuery Mobile框架自動結合<label>標籤來增加可觸控的元件尺寸，如下所示： <div data-role="fieldcontain"> <legend>選擇牛排要幾分熟:</legend> <label for="rare">三分熟</label> <input type="radio" name="steak" id="rare" value="3" checked/> … <label for="medwell">七分熟</label> <input type="radio" name="steakl" id="medwell" value="7"/> </div>

31. 8-4-1 選擇鈕-群組 • 我們可以使用<fieldset data-role="controlgroup">或<div data-role="controlgroup">標籤來群組選擇鈕，以便建立更佳外觀的使用介面，當然，也可以使用data-type="horizontal"屬性來水平編排選擇鈕，data-mini="true"建立縮小版的選擇鈕，如下所示： <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> … </fieldset> </div>

32. 8-4-1 選擇鈕-取得使用者選擇 • 因為是選擇欄位，在取得使用者的選擇後，我們是使用switch條件敘述來判斷使用者選擇幾分熟的牛排，取得的是HTML標籤的value屬性值，如下所示： int s; s = Request.Form["steak"].AsInt(); switch(s) { case 3: result = "三分熟"; break; case 5: result = "五分熟"; break; case 7: result = "七分熟"; break; }

33. 8-4-2 核取方塊-說明 • 核取方塊是一個開關，可以讓使用者選擇是否開啟功能或設定某些參數。當在表單擁有多個核取方塊控制項時，每一個控制項都是獨立選項，換句話說，核取方塊允許複選，如下所示： <div data-role="fieldcontain"> <label for="accept">我同意授權</label> <input type="checkbox" name="accept" id="accept" value="yes" checked/> </div>

34. 8-4-2 核取方塊-群組 • 我們可以使用<fieldset data-role="controlgroup">或<div data-role="controlgroup">標籤來群組多個核取方塊，使用data-type="horizontal"屬性來水平編排多個核取方塊，data-mini="true"建立縮小版的核取方塊，如下所示： <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> … </fieldset> </div>

35. 8-4-2 核取方塊-取得使用者選擇 • 因為核取方塊是可複選的選擇欄位，在取得使用者的選擇後，我們可以使用if條件敘述判斷使用者是否勾選核取方塊，如下所示： s = Request.Form["original"].AsInt(); if (s == 1) { type += "原味|"; }

36. 8-4-3 滑動開關-說明 • 滑動開關（Flip Toggle Switch）是一種類似核取方塊的介面元件，只是顯示外觀不同，其外觀如同一個開闢，可以切換真/假、是/否和開/關等二選一的布林值。 • jQuery Mobile是使用<select>和<option>標籤建立滑動開關，只是指定data-role屬性值slider，而且，因為是開闢，所以一定只有2個<option>標籤來代表正反狀態。

37. 8-4-3 滑動開關-範例 • <select>標籤指定data-role="slider"屬性，2個<option>標籤是開關的2個狀態。 <div data-role="fieldcontain"> <label for="updated">自動更新: </label> <select name="updated" id="updated" data-role="slider"> <option value="no">否</option> <option value="yes">是</option> </select> </div>

38. 8-4-3 滑動開關-取得使用者選擇 • 滑動開關只有兩種狀態，我們可以取得<option>標籤的value屬性值來判斷使用者的選擇，如下所示： result = Request.Form["updated"];

39. 8-4-4 單選選單-說明 • jQuery Mobile框架的選單（Select Menus）是使用HTML的<select>和<option>標籤來建立（不用指定data-role屬性），jQuery Mobile框架預設使用按鈕外觀來顯示下拉式清單方塊，當點選時，就會開啟原生選單，其外觀視平台而不同。

40. 8-4-4 單選選單-單選選單 • jQuery Mobile框架的選單支援單選和複選，首先是單選選單，如下所示： <div data-role="fieldcontain"> <label for="courses">選擇課程: </label> <select name="courses" id="courses"> <option value="1">程式設計</option> <option value="2">網頁設計</option> <option value="3">手機程式設計</option> <option value="4">資料庫系統</option> </select> </div>

41. 8-4-4 單選選單-群組選單1 • 我們可以使用<fieldset data-role=“controlgroup”>或<div data-role=“controlgroup”>標籤來群組多個選單，例如：垂直群組3個選單，如下圖所示：

42. 8-4-4 單選選單-群組選單2 • 在<fieldset data-role="controlgroup">標籤使用data-type="horizontal"屬性就可以水平編排多個選單，如下圖所示：

43. 8-4-4 單選選單-彈出式單選選單 • jQuery Mobile框架提供另一種使用介面的自訂選單（不是使用行動裝置平台的原生選單），我們只需在<select>標籤加上data-native-menu="false"屬性，就可以更改選單外觀成為彈出式單選選單，如下所示： <div data-role="fieldcontain"> <label for="courses">選擇課程: </label> <select name="courses" id="courses" data-native-menu="false"> <option value="1">程式設計</option> <option value="2">網頁設計</option> <option value="3">手機程式設計</option> <option value="4">資料庫系統</option> </select> </div>

44. 8-4-5 複選選單-標籤 • 如果需要複選選單，請加上multiple屬性，如下所示： <div data-role="fieldcontain"> <label for="langs">選擇程式語言: </label> <select name="langs" id="langs" multiple data-native-menu="false" data-overlay-theme="e"> <option value="1">C/C++語言</option> <option value="2">Java語言</option> <option value="3">C#語言</option> <option value="4">Visual Basic語言</option> </select> </div>

45. 8-4-5 複選選單-取得使用者選擇 • 當選擇多個選項，即多個<option>標籤的value屬性值時，取得的欄位值是以「,」符號分隔的字串，例如：「1,3,4」，我們可以使用Split()方法將它轉換成字串陣列，如下所示： string[] Selected = Request.Form["langs"].Split(','); • 程式碼將使用者選擇的選項轉換成Selected[]陣列後，使用foreach迴圈取出每一個選項，如下所示： foreach (string item in Selected) { result += item + "|"; }

46. 8-5 伺服端表單驗證 • 8-5-1 Web Pages 2的表單驗證 • 8-5-2 Web Pages 1.0的表單驗證

47. 8-5 伺服端表單驗證 • 表單驗證（Form Validation）是驗證使用者在表單欄位輸入的資料是否正確，因為使用者常常可能輸錯資料，例如：忘了輸入、資料範圍錯誤或格式不正確，輸入錯誤資料，輕者只是顯示錯誤；嚴重時可能影響整個Web應用程式的執行。 • 伺服端表單驗證是將表單輸入資料送至伺服端後才執行輸入資料的檢查，以確認使用者輸入正確的資料內容與格式，換句話說，我們是使用伺服端ASP.NET程式碼來執行資料驗證。

48. 8-5-1 Web Pages 2的表單驗證-使用Validator類別 • Validator類別提供多種方法來建立欄位驗證規則，相關方法的說明，如下表所示：

49. 8-5-1 Web Pages 2的表單驗證-驗證方法 • Validator類別方法可以建立欄位驗證規則，我們需要使用Validation幫助者類別來註冊哪些欄位套用哪些驗證規則，常用的方法有3個，其說明如下表所示：

50. 8-5-1 Web Pages 2的表單驗證-範例1 • 我們可以使用上表Validation.Add()或Validation.RequireField()方法來註冊欄位使用的驗證規則，例如：使用者名稱欄位不可是空的，如下所示： Validtion.RequireField("username", "你必須提供使用者名稱!"); • 方法的第1個參數是註冊欄位，第2個參數是錯誤訊息文字，另一種方法是使用Validation.Add()方法，如下所示： Validation.Add("username", Validator.Required("你必須提供使用者名稱!")); • 第1個參數是註冊欄位，第2個參數是使用Validator.Required()方法建立的驗證規則，參數是錯誤訊息文字。