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>