你的位置:首页 > Java教程

[Java教程]jQuery Mobile_表单元素

 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 7 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 8 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 9 </head> 10  11 <body> 12 <div data-role="page"> 13   <div data-role="header" style="text-align:center">header</div> 14   <div data-role="content"> 15     <form method="post" action="#"> 16       <div data-role="fieldcontain"> 17       <label for="fname">姓名:</label> 18       <input type="text" id="fname" name="fname" placeholder="姓名..." data-inline="true"> 19       <label for="birth">生日:</label> 20       <input type="date" id="birth" name="birth" placeholder="生日..." data-inline="true"> 21       <label for="email">email:</label> 22       <input type="email" id="email" name="email" placeholder="生日..." data-inline="true"> 23       <label for="introduce">简介:</label> 24       <textarea id="introduce" placeholder="简介..."></textarea> 25       <label for="search">search:</label> 26       <input type="search" id="search" name="search" placeholder="搜索..." data-inline="true"> 27       <fieldset data-role="controlgroup" data-type="horizontal"> 28         <legend>请选择您的性别</legend> 29         <label for="male">男</label> 30         <input type="radio" name="sex" id="male" name="male"> 31         <label for="female">女</label> 32         <input type="radio" name="sex" id="female" name="female">   33       </fieldset> 34       <fieldset data-role="controlgroup"> 35         <legend>请选择您的性别</legend> 36         <label for="male2">男</label> 37         <input type="radio" name="sex2" id="male2" name="male2" checked> 38         <label for="female2">女</label> 39         <input type="radio" name="sex2" id="female2" name="female2">   40       </fieldset> 41       <fieldset data-role="controlgroup" data-type="horizontal"> 42         <legend>请选择你看过的电影</legend> 43         <label for="xunlongjue">寻龙诀</label> 44         <input type="checkbox" name="movie" id="xunlongjue"> 45         <label for="dahuaxiyou">大话西游</label> 46         <input type="checkbox" name="movie" id="dahuaxiyou"> 47         <label for="gongfu">功夫</label> 48         <input type="checkbox" name="movie" id="gongfu"> 49       </fieldset> 50       <fieldset data-role="controlgroup"> 51         <legend>请选择你看过的电影</legend> 52         <label for="xunlongjue2">寻龙诀</label> 53         <input type="checkbox" name="movie" id="xunlongjue2"> 54         <label for="dahuaxiyou2">大话西游</label> 55         <input type="checkbox" name="movie2" id="dahuaxiyou2"> 56         <label for="gongfu2">功夫</label> 57         <input type="checkbox" name="movie2" id="gongfu2"> 58       </fieldset>   59       <fieldset data-role="controlgroup"> 60         <legend for="day">选择天</legend> 61         <select name="day" id="day" multiple="multiple" data-native-menu="false"> 62           <optgroup label="工作日"></optgroup> 63           <option value="monday" selected>星期一</option> 64           <option value="tuesday">星期二</option> 65           <option value="wednsday">星期三</option> 66           <option value="thursday">星期四</option> 67           <option value="friday">星期五</option> 68           <optgroup label="周末"></optgroup> 69           <option value="saturday">星期六</option> 70           <option value="sunday">星期日</option> 71         </select> 72       </fieldset> 73       <fieldset data-role="controlgroup" data-type="horizontal"> 74         <legend >安排会议:</legend> 75         <label for="day">选择天</label> 76         <select name="day" id="day"> 77            78           <option value="monday" selected>星期一</option> 79           <option value="tuesday">星期二</option> 80           <option value="wednsday">星期三</option> 81           <option value="thursday">星期四</option> 82           <option value="friday">星期五</option> 83           84           <option value="saturday">星期六</option> 85           <option value="sunday">星期日</option> 86         </select> 87         <label for="time">选择时间</label> 88         <select name="time" id="time"> 89            90           <option value="8" selected>8:00</option> 91           <option value="9">9:00</option> 92           <option value="10">10:00</option> 93            94         </select> 95       </fieldset> 96       <label for="points">滑块</label> 97       <input type="range" id="points" name="points" value="50" min="0" max="100" data-highlight="true"> 98       <label for="switch">开关</label> 99       <select name="switch" id="switch" data-role="slider">100         <option value="on" selected>on</option>101         <option value="off">off</option>102       </select>103       </div>104       <input type="submit" value="提交" data-inline="true">105     </form>106     107   </div>108   <div data-role="footer" style="text-align:center">footer</div>109   110 </div>111 </body>112 </html>