jQuery Mobile表单元素学习-html表单元素

复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。

该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，

另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。

<!DOCTYPE html>  
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Mobile Web 应用程序</title> 
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
<script src="jquery-1.5.min.js" type="text/javascript"></script> 
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
</head>  
 <body>  
        
    <div data-role="page" id="home">  
        
      <div data-role="header">  
        <h1>Ice Cream Order Form</h1>  
      </div>  
        
      <div data-role="content">  
        <form action="#" method="get">  
          
         <div data-role="fieldcontain">  
           <label for="name">Your Name:</label>  
           <input type="text" name="name" id="name" value=""  />  
         </div>  
           
         <div data-role="controlgroup">  
           <legend>Which flavour(s) would you like?</legend>  
             
           <input type="checkbox" name="vanilla" id="vanilla" class="custom" />  
           <label for="vanilla">Vanilla</label>  
             
           <input type="checkbox" name="chocolate" id="chocolate" class="custom" />  
           <label for="chocolate">Chocolate</label>  
             
           <input type="checkbox" name="strawberry" id="strawberry" class="custom" />  
           <label for="strawberry">Strawberry</label>  
             
         </div>     
           
         <div data-role="fieldcontain">  
           <label for="quantity">Number of Cones:</label>  
           <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  />  
         </div>  
           
      </div>  
        
    </div>  
        
    </body> 
   </html>

结果如图所示：

<!DOCTYPE html>  
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Mobile Web 应用程序</title> 
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
<script src="jquery-1.5.min.js" type="text/javascript"></script> 
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
<!-- 只要将当前站点配置为移动应用程序，则对 phonegap.js 的该引用将允许代码提示。 
     要将该站点配置为移动应用程序，请转至“站点”->“移动应用程序”->“配置应用程序框架...”--> 
<script src="/phonegap.js" type="text/javascript"></script> 
</head>  
 <body>  
        
    <div data-role="page" id="home">  
        
      <div data-role="header">  
        <h1>Ice Cream Order Form</h1>  
      </div>  
        
      <div data-role="content">  
          
        
         <div data-role="fieldcontain">  
           <label for="sprinkles">Sprinkles:</label>  
            <select name="sprinkles" id="sprinkles" data-role="slider">  
              <option value="off">No</option>  
              <option value="on">Yes</option>  
            </select>  
         </div>  
        
         <div data-role="fieldcontain">  
           <label for="store">Collect from Store:</label>  
            <select name="store" id="store">  
              <option value="mainStreet">Main Street</option>  
              <option value="libertyAvenue">Liberty Avenue</option>  
              <option value="circleSquare">Circle Square</option>  
              <option value="angelRoad">Angel Road</option>  
            </select>  
         </div>  
           
        <div class="ui-body ui-body-b">  
          <fieldset class="ui-grid-a">  
            <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>  
            <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>      
          </fieldset>  
        </div>  
           
      </div>  
        
    </div>  
        
    </body> 
   </html>

以上代码效果如图所示：