菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

jQuery Mobile 表单

likuolei

jQuery Mobile 表单（Forms）详解

表单（Forms） 是 jQuery Mobile 的 核心交互组件，自动增强原生 <input>、<select>、<textarea>，支持 触控优化、占位符、清除按钮、滑块、翻转开关 等，移动端体验极佳。

无需写 JS，只需 HTML + data-* 属性！

1. 基本表单结构

<form>
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username" placeholder="请输入用户名">

  <label for="password">密码：</label>
  <input type="password" name="password" id="password">

  <button type="submit" class="ui-btn ui-btn-b">登录</button>
</form>

jQM 自动为 <input> 添加 圆角、阴影、图标

2. 表单控件类型

类型写法效果
文本输入<input type="text">普通输入
密码<input type="password">●●●
搜索框<input type="search">带 清除按钮
邮箱/电话<input type="email/tel">调起对应键盘
滑块<input type="range">拖动选择
翻转开关data-role="flipswitch"ON/OFF
单选/复选data-role="controlgroup"分组美化
下拉菜单<select>原生或增强
文本域<textarea>多行输入

3. 完整示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQM 表单大全</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <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" data-position="fixed">
    <h1>表单演示</h1>
  </div>

  <div data-role="main" class="ui-content">

    <form action="#" method="post">

      <!-- 1. 文本输入 + 搜索框 -->
      <div class="ui-field-contain">
        <label for="name">姓名：</label>
        <input type="text" name="name" id="name" placeholder="请输入姓名" data-clear-btn="true">
      </div>

      <div class="ui-field-contain">
        <label for="search">搜索：</label>
        <input type="search" name="search" id="search" placeholder="输入关键词" data-clear-btn="true">
      </div>

      <!-- 2. 密码 + 邮箱 + 电话 -->
      <div class="ui-field-contain">
        <label for="pass">密码：</label>
        <input type="password" name="pass" id="pass" value="123456">
      </div>

      <div class="ui-field-contain">
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" placeholder="example@be.com">
      </div>

      <div class="ui-field-contain">
        <label for="tel">电话：</label>
        <input type="tel" name="tel" id="tel" placeholder="+32 123 456 789">
      </div>

      <!-- 3. 滑块（Slider） -->
      <div class="ui-field-contain">
        <label for="volume">音量：50</label>
        <input type="range" name="volume" id="volume" min="0" max="100" value="50">
      </div>

      <!-- 4. 翻转开关（Flip Switch） -->
      <div class="ui-field-contain">
        <label for="wifi">Wi-Fi：</label>
        <select name="wifi" id="wifi" data-role="flipswitch">
          <option value="off">关</option>
          <option value="on" selected>开</option>
        </select>
      </div>

      <!-- 5. 单选按钮组 -->
      <fieldset data-role="controlgroup">
        <legend>性别：</legend>
        <label><input type="radio" name="gender" value="male" checked> 男</label>
        <label><input type="radio" name="gender" value="female"> 女</label>
      </fieldset>

      <!-- 6. 复选框组 -->
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>兴趣（多选）：</legend>
        <label><input type="checkbox" name="hobby" value="read"> 阅读</label>
        <label><input type="checkbox" name="hobby" value="sport" checked> 运动</label>
        <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
      </fieldset>

      <!-- 7. 下拉菜单 -->
      <div class="ui-field-contain">
        <label for="country">国家：</label>
        <select name="country" id="country">
          <option value="BE" selected>比利时</option>
          <option value="CN">中国</option>
          <option value="US">美国</option>
        </select>
      </div>

      <!-- 8. 文本域 -->
      <div class="ui-field-contain">
        <label for="note">备注：</label>
        <textarea name="note" id="note" placeholder="选填"></textarea>
      </div>

      <!-- 9. 提交按钮 -->
      <button type="submit" class="ui-btn ui-btn-b ui-corner-all ui-shadow">提交表单</button>
      <button type="reset" class="ui-btn ui-corner-all">重置</button>

    </form>

    <!-- 10. 当前信息 -->
    <div style="margin-top:30px; padding:15px; background:#f9f9f9; border-radius:8px;">
      <h4>实时信息</h4>
      <p><strong>时间：</strong>2025年11月17日 03:08（CET）</p>
      <p><strong>国家：</strong>比利时 (BE)</p>
    </div>

  </div>

  <div data-role="footer" data-position="fixed">
    <h4>比利时 © 2025</h4>
  </div>
</div>

</body>
</html>

4. 表单属性汇总

属性值说明
data-clear-btn="true"true/false输入框 清除按钮
data-role="flipswitch"—<select> 变为 开关
data-role="controlgroup"—单选/复选 分组美化
data-type="horizontal"—控件 横向排列
data-mini="true"—小号控件
data-inline="true"—内联按钮
placeholder="文字"—输入提示

5. JavaScript 控制表单

<script>
$(document).on("pagecreate", function() {
  // 获取值
  var name = $("#name").val();

  // 设置值
  $("#email").val("user@be.com");

  // 重置表单
  $("form")[0].reset();

  // 提交事件
  $("form").on("submit", function(e) {
    e.preventDefault();
    alert("表单已提交！");
  });

  // 滑块实时显示
  $("#volume").on("slidestop", function() {
    $(this).prev("label").find("span").text($(this).val());
  });
});
</script>

6. 最佳实践

建议说明
使用 ui-field-contain自动对齐 label 和 input
搜索框加 data-clear-btn="true"用户体验佳
滑块加实时显示用 JS 更新 label
开关用 flipswitch更直观
避免过多控件移动端表单宜简洁

7. 常见问题

问题解决方案
键盘挡住输入框jQM 自动处理（iOS/Android）
清除按钮不显示必须 type="search" 或 data-clear-btn="true"
开关不切换确保 <select data-role="flipswitch">
表单不提交检查 action 和 method

8. 推荐表单模板

<!-- 登录表单 -->
<form>
  <div class="ui-field-contain">
    <label for="user">用户名：</label>
    <input type="text" id="user" data-clear-btn="true">
  </div>
  <div class="ui-field-contain">
    <label for="pwd">密码：</label>
    <input type="password" id="pwd">
  </div>
  <button type="submit" class="ui-btn ui-btn-b">登录</button>
</form>

<!-- 设置开关 -->
<select data-role="flipswitch">
  <option value="off">关</option>
  <option value="on">开</option>
</select>

总结：表单控件速查

控件关键属性
文本框data-clear-btn="true"
搜索框type="search"
滑块type="range"
开关data-role="flipswitch"
单选data-role="controlgroup"
下拉<select>

需要我为你生成：

  • 带验证的注册表单（JS）？
  • 多步骤表单（Wizard）？
  • 文件上传 + 进度条？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部