8 1 1 HTML HTML form idname namename

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>

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

8 -2 -2 j. Query Mobile的表單欄位使用原生HTML表單欄位 • 如果建立的HTML表單欄位不需要j. Query 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>

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

8 -3 -3 滑動軸欄位-標籤 • j. Query Mobile的滑動軸欄位（Slider）可以用來輸入一定 範圍之間的數字資料，它是使用HTML 5新增的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>

8 -4 -1 選擇鈕-說明 • 選擇鈕（Radio Buttons）是二選一或多選一的單選題，使 用者可以在一組選擇鈕中選取一個選項，j. Query 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>

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

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>

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

8 -4 -4 單選選單-單選選單 • j. Query 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>

8 -4 -4 單選選單-彈出式單選選單 • j. Query 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>

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>

8 -5 -1 Web Pages 2的表單驗證-保留欄位值 • 在每一個欄位顯示的錯誤訊息是使用 Html. Validation. Message()方法來產生，如 下所示： <div data-role="fieldcontain"> <label for="username">使用者: </label> <input type="text" name="username" id="username" value="@Request. Form["username"]"/> @Html. Validation. Message("username") </div>

8 -5 -1 Web Pages 2的表單驗證格式化驗證的錯誤訊息 • 我們可以使用CSS樣式來格式化驗證錯誤 的錯誤訊息文字，如下所示： <style>. validation-summary-errors { color: red; border: 1 px solid red; }. field-validation-error { color: red; } </style>

8 -6 -1 更多Input欄位的屬性-Required屬性 • Required屬性是HTML 5的基本欄位驗證功能，可 以指定欄位一定需要輸入資料，如下所示： <div data-role="fieldcontain"> <label for="user">使用者名稱: </label> <input type="text" name="user" id="user" required/> </div>

8 -6 -2 更多類型的Input欄位-數值欄位 • 數值欄位的type屬性值是number，可以讓我們直 接選擇指定範圍的數值資料，如下所示： <div data-role="fieldcontain"> <label for="weight">體重: </label> <input type="number" name="weight" id="weight" min="35" max="150" value="60"/> </div>

8 -6 -2 更多類型的Input欄位-日期欄位 • 日期資料是使用萬年曆來選擇日期，如下所示： <div data-role="fieldcontain"> <label for="date">日期: </label> <input type="date" name="date" id="date"/> </div> <div data-role="fieldcontain"> <label for="month">月份: </label> <input type="month" name="month" id="month"/> </div> <div data-role="fieldcontain"> <label for="week">星期: </label> <input type="week" name="week" id="week"/> </div>

8 -6 -2 更多類型的Input欄位-URL欄位 • URL欄位的type屬性值是url，可以讓我們輸入 URL網址，如果沒有輸入http: //，也會自動加上， 如下所示： <div data-role="fieldcontain"> <label for="url">URL網址: </label> <input type="url" name="url" id="url"/> </div>