<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Form</title>
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 jQuery Mobile 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 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>Form Example</h1>
</div>
<div data-role="content">
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Enter your username">
<label for="password">Password:</label>
<input type="password" name="password" id="password" placeholder="Enter your password">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Enter your email">
<fieldset data-role="controlgroup">
<legend>Choose your favorite color:</legend>
<input type="radio" name="color" id="red" value="red">
<label for="red">Red</label>
<input type="radio" name="color" id="blue" value="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="green" value="green">
<label for="green">Green</label>
</fieldset>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
在这个例子中，我们使用了 data-role="page" 来定义一个 jQuery Mobile 页面，包含一个简单的表单。表单中包括文本输入框、密码输入框、电子邮件输入框和一个单选框组。
注意：
- data-role="controlgroup" 用于创建单选框组，其中的 legend 元素用于提供组的标题。
- 每个输入框都有一个 label 元素，用于提供对输入框的描述。
- 表单的提交按钮使用 <input type="submit"> 元素。
你可以根据实际需求在表单中添加其他类型的输入框、复选框、下拉菜单等元素。 jQuery Mobile 提供了许多内置样式和主题，以及方便的 JavaScript 功能来增强表单的外观和交互性。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/forms/)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/9428/jQuery Mobile