jQuery Mobile 表單基礎

jQuery Mobile表單：使用CSS來設定HTML表單元素的樣式。

表單控件包括：文本框，搜尋框，單選框，複選框，選擇菜單，滑動條，翻轉切換開關

基本規則： <form>元素必須設定method,action屬性 

                每個表單元素必須設定唯一的"id"屬性。（該 id 在站點的頁面中必須是唯一的）

                每個表單元素必須有一個标記 label （請設定 label 的 for 屬性來比對元素的 id）

                e.g.

                <form   method="post"   action="demo_form.asp">

                       <label  for="firstName">First  name:</label>

                       <input  type="text"  name="firstName"  id="firstName" />

               </form> 

              隐藏label： class="ui-hidden-accessible"  

              文本框text的占位符： placeholder="..."

              e.g.

             <label  for="firstName"  class="ui-hidden-accessible">First  name:</label>

             <input  type="text"  name="firstName"  id="firstName"  placeholder="請輸入内容" />

             data-role="fieldcontain” － 基于頁面寬度來設定 label 和表單控件的樣式

                                                       當頁面寬度大于480px 時，會自動将 label 與表單控件放置于同一行； 當小于 480px 時，label 會被放置于表單元素之上

             e.g.

             <div  data-role="fieldcontain">

                    <label  for="firstName"  class="ui-hidden-accessible">First  name:</label>

                    <input  type="text"  name="firstName"  id="firstName"  placeholder="請輸入内容" />

                    .........

             </div>

             data-role="none"   －取消 jQuery Mobile 自動為可點選元素設定的樣式

             e.g.

             <label  for="firstName" >First  name:</label>

             <input  type="text"  name="firstName"  id="firstName"  data-role="none" />