以下是一个简单的 jQuery Mobile 表单输入的示例:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 表单输入示例</title>
<!-- 引入 jQuery Mobile CSS 文件 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 文件 -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- 引入 jQuery Mobile 文件 -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>表单输入示例</h1>
</div>
<div data-role="content">
<!-- 文本输入框 -->
<label for="text-input">文本输入框:</label>
<input type="text" name="text-input" id="text-input">
<!-- 密码输入框 -->
<label for="password-input">密码输入框:</label>
<input type="password" name="password-input" id="password-input">
<!-- 单选框 -->
<fieldset data-role="controlgroup">
<legend>性别:</legend>
<label for="male">男</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">女</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
<!-- 复选框 -->
<label for="agree">我同意用户协议</label>
<input type="checkbox" name="agree" id="agree">
<!-- 提交按钮 -->
<button type="submit" data-theme="b">提交</button>
</div>
<div data-role="footer">
<h4>© 2023 jQuery Mobile 示例</h4>
</div>
</div>
</body>
</html>
这个示例包括了文本输入框、密码输入框、单选框、复选框和提交按钮等常见的表单元素。你可以根据自己的需求修改和扩展这个示例。确保引入了正确版本的 jQuery 和 jQuery Mobile,这样样式和脚本才能正常工作。
转载请注明出处:http://www.pingtaimeng.com/article/detail/9429/jQuery Mobile