jQuery Mobile_表单元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" style="text-align:center">header</div>
<div data-role="content">
<form method="post" action="#">
<div data-role="fieldcontain">
<label for="fname">姓名:</label>
<input type="text" id="fname" name="fname" placeholder="姓名..." data-inline="true">
<label for="birth">生日:</label>
<input type="date" id="birth" name="birth" placeholder="生日..." data-inline="true">
<label for="email">email:</label>
<input type="email" id="email" name="email" placeholder="生日..." data-inline="true">
<label for="introduce">简介:</label>
<textarea id="introduce" placeholder="简介..."></textarea>
<label for="search">search:</label>
<input type="search" id="search" name="search" placeholder="搜索..." data-inline="true">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择您的性别</legend>
<label for="male">男</label>
<input type="radio" name="sex" id="male" name="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female" name="female">
</fieldset>
<fieldset data-role="controlgroup">
<legend>请选择您的性别</legend>
<label for="male2">男</label>
<input type="radio" name="sex2" id="male2" name="male2" checked>
<label for="female2">女</label>
<input type="radio" name="sex2" id="female2" name="female2">
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择你看过的电影</legend>
<label for="xunlongjue">寻龙诀</label>
<input type="checkbox" name="movie" id="xunlongjue">
<label for="dahuaxiyou">大话西游</label>
<input type="checkbox" name="movie" id="dahuaxiyou">
<label for="gongfu">功夫</label>
<input type="checkbox" name="movie" id="gongfu">
</fieldset>
<fieldset data-role="controlgroup">
<legend>请选择你看过的电影</legend>
<label for="xunlongjue2">寻龙诀</label>
<input type="checkbox" name="movie" id="xunlongjue2">
<label for="dahuaxiyou2">大话西游</label>
<input type="checkbox" name="movie2" id="dahuaxiyou2">
<label for="gongfu2">功夫</label>
<input type="checkbox" name="movie2" id="gongfu2">
</fieldset>
<fieldset data-role="controlgroup">
<legend for="day">选择天</legend>
<select name="day" id="day" multiple="multiple" data-native-menu="false">
<optgroup label="工作日"></optgroup>
<option value="monday" selected>星期一</option>
<option value="tuesday">星期二</option>
<option value="wednsday">星期三</option>
<option value="thursday">星期四</option>
<option value="friday">星期五</option>
<optgroup label="周末"></optgroup>
<option value="saturday">星期六</option>
<option value="sunday">星期日</option>
</select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend >安排会议：</legend>
<label for="day">选择天</label>
<select name="day" id="day">
<option value="monday" selected>星期一</option>
<option value="tuesday">星期二</option>
<option value="wednsday">星期三</option>
<option value="thursday">星期四</option>
<option value="friday">星期五</option>
<option value="saturday">星期六</option>
<option value="sunday">星期日</option>
</select>
<label for="time">选择时间</label>
<select name="time" id="time">
<option value="8" selected>8:00</option>
<option value="9">9:00</option>
<option value="10">10:00</option>
</select>
</fieldset>
<label for="points">滑块</label>
<input type="range" id="points" name="points" value="50" min="0" max="100" data-highlight="true">
<label for="switch">开关</label>
<select name="switch" id="switch" data-role="slider">
<option value="on" selected>on</option>
<option value="off">off</option>
</select>
</div>
<input type="submit" value="提交" data-inline="true">
</form>
</div>
<div data-role="footer" style="text-align:center">footer</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" style="text-align:center">header</div>
<div data-role="content">
<form method="post" action="#">
<div data-role="fieldcontain">
<label for="fname">姓名:</label>
<input type="text" id="fname" name="fname" placeholder="姓名..." data-inline="true">
<label for="birth">生日:</label>
<input type="date" id="birth" name="birth" placeholder="生日..." data-inline="true">
<label for="email">email:</label>
<input type="email" id="email" name="email" placeholder="生日..." data-inline="true">
<label for="introduce">简介:</label>
<textarea id="introduce" placeholder="简介..."></textarea>
<label for="search">search:</label>
<input type="search" id="search" name="search" placeholder="搜索..." data-inline="true">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择您的性别</legend>
<label for="male">男</label>
<input type="radio" name="sex" id="male" name="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female" name="female">
</fieldset>
<fieldset data-role="controlgroup">
<legend>请选择您的性别</legend>
<label for="male2">男</label>
<input type="radio" name="sex2" id="male2" name="male2" checked>
<label for="female2">女</label>
<input type="radio" name="sex2" id="female2" name="female2">
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择你看过的电影</legend>
<label for="xunlongjue">寻龙诀</label>
<input type="checkbox" name="movie" id="xunlongjue">
<label for="dahuaxiyou">大话西游</label>
<input type="checkbox" name="movie" id="dahuaxiyou">
<label for="gongfu">功夫</label>
<input type="checkbox" name="movie" id="gongfu">
</fieldset>
<fieldset data-role="controlgroup">
<legend>请选择你看过的电影</legend>
<label for="xunlongjue2">寻龙诀</label>
<input type="checkbox" name="movie" id="xunlongjue2">
<label for="dahuaxiyou2">大话西游</label>
<input type="checkbox" name="movie2" id="dahuaxiyou2">
<label for="gongfu2">功夫</label>
<input type="checkbox" name="movie2" id="gongfu2">
</fieldset>
<fieldset data-role="controlgroup">
<legend for="day">选择天</legend>
<select name="day" id="day" multiple="multiple" data-native-menu="false">
<optgroup label="工作日"></optgroup>
<option value="monday" selected>星期一</option>
<option value="tuesday">星期二</option>
<option value="wednsday">星期三</option>
<option value="thursday">星期四</option>
<option value="friday">星期五</option>
<optgroup label="周末"></optgroup>
<option value="saturday">星期六</option>
<option value="sunday">星期日</option>
</select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend >安排会议：</legend>
<label for="day">选择天</label>
<select name="day" id="day">
<option value="monday" selected>星期一</option>
<option value="tuesday">星期二</option>
<option value="wednsday">星期三</option>
<option value="thursday">星期四</option>
<option value="friday">星期五</option>
<option value="saturday">星期六</option>
<option value="sunday">星期日</option>
</select>
<label for="time">选择时间</label>
<select name="time" id="time">
<option value="8" selected>8:00</option>
<option value="9">9:00</option>
<option value="10">10:00</option>
</select>
</fieldset>
<label for="points">滑块</label>
<input type="range" id="points" name="points" value="50" min="0" max="100" data-highlight="true">
<label for="switch">开关</label>
<select name="switch" id="switch" data-role="slider">
<option value="on" selected>on</option>
<option value="off">off</option>
</select>
</div>
<input type="submit" value="提交" data-inline="true">
</form>
</div>
<div data-role="footer" style="text-align:center">footer</div>
</div>
</body>
</html>
后来都会美好的！
