jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。

在 jQuery Mobile 中，您可以使用以下表单控件：

• 文本框
• 搜索框
• 单选框
• 复选框
• 选择菜单
• 滑动条
• 翻转切换开关

当您与 jQuery Mobile 表单打交道时，应该了解以下信息：

• 元素必须设置 method 和 action 属性
• 每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
• 每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。

实例

method="post" action="demoform.asp">
  for="fname">First name:
  id="fname">

亲自试一试

如需隐藏 label，请使用类 ui-hidden-accessible。这很常用，当您需要元素的 placeholder 属性充当 label 时：

实例

  class="ui-hidden-accessible">姓名：
  

亲自试一试

域容器

如果需要 label 和表单元素在宽屏幕上显示正常，请用带有 data-role="fieldcontain" 属性的

  

    First name:
    
    Last name:
    
  

First name:
data-role="none">