3、jQuery Mobile 表单

1 基础

    jQuery Mobile 表单结构：form必须有method和action属性。 每个表单元素必须有唯一的id，每个表单元素必须有一个<label>元素，for属性匹配对应元素的id。

   当元素使用placeholder来替代label时，给label添加class=‘ui-hidden-accessible’属性达到隐藏的目的。

    form中所有元素的前面添加含有data-role='fieldcontain'属性的div，会根据屏幕宽度自动设置表单样式。

   给元素添加data-role = "none"属性，避免jQuery Mobile自动为其添加样式。

<form method="post" action="demoform.asp">
       <div data-role="fieldcontain">
             <label for="fname">姓名：</label>
             <input type="text"  data-role= "none" name="fname" id="fname">
             <input type="submit" data-inline="true" value="提交">
       </div>
    </form>


      <form method="post" action="demoform.asp">
      <label for="fname" class="ui-hidden-accessible">姓名</label>
      <input type="text" name="fname" id="fname" placeholder="姓名...">
      <input type="submit" data-inline="true" value="提交">
    </form>

    jQuery Mobile 提交表单，会自动使用ajax提交表单。

2 输入

    使用标准的html元素，也可以使用html5的元素。type可以为text、date、email、radio、search、checkbox等等。  <textarea> 用来输入多行文本。

    placeholder属性为输入提示。

   单选 和 复选 按钮组可以使用<fieldset data-role='controlgroup' data-type='horizontal'>标签来组合这些选项。  data-type='horizontal' 属性可以让按钮水平显示。

  <legend> 属性用来定义标题。
   

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">全名：</label>
    <input type="text" name="fullname" id="fullname">

    <label for="bday">生日：</label>
    <input type="date" name="bday" id="bday">

    <label for="email">电邮：</label>
    <input type="email" name="email" id="email" placeholder="您的邮件地址..">

    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info" ></textarea>

    <label for="search">Search:</label>
    <input type="search" name="search" id="search">

    <fieldset data-role="controlgroup" data-type="horizontal">
     <legend>Choose your gender:</legend>
      <label for="male">Male</label>
      <input type="radio" name="gender" id="male" value="male" checked>
      <label for="female">Female</label>
      <input type="radio" name="gender" id="female" value="female"> 
    </fieldset>  


       <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
 
       
     
  </div>
</form>

3 选择（select）

    <optgroup>标签用来分组。

   data-native-menu = 'false' 可以使所有平台上的样式显示一样。

    multiple 让select改为多选。

   <div data-role="fieldcontain"> 可以组合多个选择菜单。

    <fieldset> 标签添加data-type='horizontal' 使多个水平显示。

    <fieldset> 标签添加data-role="collapsible" 可创建可折叠表单。

<form method="post" action="demoform.asp">
     <div data-role='fieldcontain'>
      <fieldset data-role="fieldcontain">
        <label for="day">选择天</label>
        <select name="day" id="day" data-native-menu="false" multiple>
		<optgroup label="工作日">
         <option value="mon">星期一</option>
         <option value="tue">星期二</option>
         <option value="wed">星期三</option>
         <option value="thu">星期四</option>
         <option value="fri">星期五</option>
		</optgroup>
		<optgroup label="周末">
         <option value="sat">星期六</option>
         <option value="sun">星期日</option>
		</optgroup>
        </select>
      </fieldset>
      <input type="submit" data-inline="true" value="提交">
      </div>
    </form>

4、滑动

   数字滑动选择,data-hightlight="true"让已选择的区域高亮显示。

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">Points:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100" data-hightlight="true">
  </div>
</form>

    切换开关, 给select添加data-role="slider"来实现。

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off" selected>Off</option>
    </select>
  </div>
</form>