HTML5 经量级框架 jQuery Mobile Form 表单 - 7.7
Form 表单
HTML5文本框
Slider
Toggle
HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<section>
<div>普通文本框</div>
<div>
<input type="password" name="password" id="password" value="" />
</div>
</section>
<section>
<div>HTML5文本框</div>
<div>
<input type="search" name="search" id="search" value="" />
</div>
</section>
<section>
<div>Slider</div>
<div>
<input type="range" name="slider" id="range" value="2" min="0" max="10" />
</div>
</section>
<section>
<div>Toggle</div>
<div data-role="fieldcontain">
<section name="toggle" id="toggle" data-role="toggle">
<option value="off">关闭</option>
<option value="on">开启</option>
</section>
</div>
</section>
</body>
</html>
单选按钮
复选按钮
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<fieldset data-role="controlgroup">
<legend>选择年龄阶段</legend>
<input type="radio" name="radio-1" id="radio-1" value="any" checked="checked" />
<label for="radio-1">不限</label>
<input type="radio" name="radio-1" id="radio-2" value="16-22" />
<label for="radio-2">16-22岁</label>
<input type="radio" name="radio-1" id="radio-3" value="23-30" />
<label for="radio-3">23-30岁</label>
<input type="radio" name="radio-1" id="radio-4" value="31-40" />
<label for="radio-4">31-40岁</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>选择</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" value="音乐" />
<label for="checkbox-4">音乐</label>
<input type="checkbox" name="checkbox-1" id="checkbox-2" value="电影" />
<label for="checkbox-4">电影</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>选择微博选项</legend>
<input type="radio" name="radio-1" id="radio-1" value="any" checked="checked" />
<label for="radio-1">微博</label>
<input type="radio" name="radio-1" id="radio-2" value="粉丝" />
<label for="radio-2">粉丝</label>
<input type="radio" name="radio-1" id="radio-3" value="关注" />
<label for="radio-3">关注</label>
</fieldset>
</body>
</html>
禁止指定 disabled <option name="电影" disabled>电影</option>
允许多选 multiple <select name="select" id="select" data-native-menu="true" multiple>
占位符 data-placeholder <option value="" data-placeholder="true">请选择</option>
更多DATA <select name="select" id="select" data-native-menu="false" data-icon="gear" data-inlin
补充：web前端 , HTML 5 ,
