jQuery Mobile 是一个专注于移动设备的用户界面框架,它为开发者提供了创建移动应用的工具和组件。在 jQuery Mobile 中,表单输入是一个常见的需求,可以通过简单的 HTML 标签和 jQuery Mobile 提供的样式和脚本来实现。

以下是一个简单的 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.zyzy.cn/article/detail/9429/jQuery Mobile