html5教程-HTML5 经量级框架 jQuery Mobile Form 表单 - 7.7
脚本宝典收集整理的这篇文章主要介绍了html5教程-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>
<p>普通文本框</p>
<p>
<input type="password" name="password" id="password" value="" />
</p>
</section>
<section>
<p>HTML5文本框</p>
<p>
<input type="search" name="search" id="search" value="" />
</p>
</section>
<section>
<p>Slider</p>
<p>
<input type="range" name="slider" id="range" value="2" min="0" max="10" />
</p>
</section>
<section>
<p>Toggle</p>
<p data-role="fieldcontain">
<section name="toggle" id="toggle" data-role="toggle">
<option value="off">关闭</option>
<option value="on">开启</option>
</section>
</p>
</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-inline="true">
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>
<p data-role="controlgroup">
<label for="select" class="select">选择兴趣</label>
<select name="select" id="select" data-native-menu="true" multiple>
<option value="" data-placeholder="true">请选择</option>
<optgroup label="娱乐类"/>
<option name="电影" disabled>电影</option>
<option name="体育">体育</option>
<optgroup label="文体"/>
<option name="旅游">旅游</option>
</select>
<label for="select" class="select" data-theme="b">操作</label>
<select name="select" id="select" data-native-menu="false" data-icon="gear" data-inline="true">
<option value="1">编辑用户</option>
<option value="2">删除用户</option>
</select>
</p>
</body>
</html>
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>
<p>普通文本框</p>
<p>
<input type="password" name="password" id="password" value="" />
</p>
</section>
<section>
<p>HTML5文本框</p>
<p>
<input type="search" name="search" id="search" value="" />
</p>
</section>
<section>
<p>Slider</p>
<p>
<input type="range" name="slider" id="range" value="2" min="0" max="10" />
</p>
</section>
<section>
<p>Toggle</p>
<p data-role="fieldcontain">
<section name="toggle" id="toggle" data-role="toggle">
<option value="off">关闭</option>
<option value="on">开启</option>
</section>
</p>
</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-inline="true">
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>
<p data-role="controlgroup">
<label for="select" class="select">选择兴趣</label>
<select name="select" id="select" data-native-menu="true" multiple>
<option value="" data-placeholder="true">请选择</option>
<optgroup label="娱乐类"/>
<option name="电影" disabled>电影</option>
<option name="体育">体育</option>
<optgroup label="文体"/>
<option name="旅游">旅游</option>
</select>
<label for="select" class="select" data-theme="b">操作</label>
<select name="select" id="select" data-native-menu="false" data-icon="gear" data-inline="true">
<option value="1">编辑用户</option>
<option value="2">删除用户</option>
</select>
</p>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTML5 经量级框架 jQuery Mobile Form 表单 - 7.7全部内容，希望文章能够帮你解决html5教程-HTML5 经量级框架 jQuery Mobile Form 表单 - 7.7所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10