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" />