jQuery Mobile 表单

jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。

jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。

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

文本输入框

搜索输入框

单选按钮

复选框

选择菜单

滑动条

翻转拨动开关

当使用 jQuery Mobile 表单时，您应当知道：

元素必须有一个 method 和一个 action 属性

每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现

每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id

实例

姓名:

type="text" name="fname" id="fname">

尝试一下 »

如需隐藏标签，请使用 class ui-hidden-accessible。这在您把元素的 placeholder 属性作为标签时经常用到：

实例

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

type="text" name="fname" id="fname" placeholder="姓名...">

尝试一下 »

提示： 我们可以使用

data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标):

实例

姓名:

id="fname" data-clear-btn="true">

尝试一下 »

清除输入框的按钮可以在 元素中使用，但不能在 中使用。 搜索框中 data-clear-btn 默认值为 "true" ，你可以使用 data-clear-btn="false" 移除该图标。

jQuery Mobile 表单图标

表单中的按钮代码是标准的 HTML 元素 (button,

reset, submit)。他们会自动渲染样式，可以自动适配移动设备与桌面设备：

实例

尝试一下 »

如果需要在 按钮中添加额外的样式，可以使用下表中的 data-* 属性：

属性

值

描述

data-corners

true | false

指定按钮是否有圆角

data-icon

指定按钮图标

data-iconpos

left | right | top | bottom | notext

指定图标位置

data-inline

true | false

指定是否内联按钮

data-mini

true | false

指定是否为迷你按钮

data-shadow

true | false

指定按钮是否添加阴影效果

按钮添加图标：

尝试一下 »

字段容器

如需让标签和表单元素看起来更适应宽屏，请用带有 "ui-field-contain" 类的