jQuery Mobile 表单构造

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

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

jquerymobilephpjQuery Mobile 表单 Docker

文本输入框

搜索输入框

单选按钮

复选框

选择菜单

滑动条

翻转拨动开关

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

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

每个表单元素必须有一个唯一的 \"大众id\"大众 属性。
id 必须是全体站点所有页面上唯一的。
这是由于 jQuery Mobile 的单页导航机制使得多个不同页面在同一韶光被呈现

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

实例

<form method=\"大众post\公众 action=\"大众demoform.html\"大众>

<label for=\"大众fname\公众>姓名:</label>

<input type=\"大众text\"大众 name=\公众fname\"大众 id=\"大众fname\"大众>

</form>

考试测验一下 »

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

实例

<form method=\"大众post\"大众 action=\"大众demoform.html\"大众>

<label for=\"大众fname\"大众 class=\公众ui-hidden-accessible\"大众>姓名:</label>

<input type=\公众text\"大众 name=\"大众fname\"大众 id=\"大众fname\公众 placeholder=\公众姓名...\"大众>

</form>

考试测验一下 »

提示： 我们可以利用 data-clear-btn=\"大众true\公众 属性来添加打消输入框内容的按钮 (一个在输入框右侧的 X 图标):

实例

<label for=\"大众fname\"大众>姓名:</label>

<input type=\公众text\"大众 name=\"大众fname\"大众 id=\公众fname\公众 data-clear-btn=\"大众true\"大众>

考试测验一下 »

打消输入框的按钮可以在 <input> 元素中利用，但不能在 <textarea> 中利用。
搜索框中 data-clear-btn 默认值为 \"大众true\"大众 ，你可以利用 data-clear-btn=\"大众false\公众 移除该图标。

jQuery Mobile 表单图标

表单中的按钮代码是标准的 HTML <input> 元素 (button, reset, submit)。
他们会自动渲染样式，可以自动适配移动设备与桌面设备：

实例

<input type=\"大众button\"大众 value=\"大众按钮\公众>

<input type=\公众reset\公众 value=\公众重置按钮\"大众>

<input type=\"大众submit\"大众 value=\"大众提交按钮\"大众>

考试测验一下 »

如果须要在 <input> 按钮中添加额外的样式，可以利用下表中的 data- 属性：

属性值描述data-cornerstrue | false指定按钮是否有圆角data-icon图标参考手册指定按钮图标data-iconposleft | right | top | bottom | notext指定图标位置data-inlinetrue | false指定是否内联按钮data-minitrue | false指定是否为迷你按钮data-shadowtrue | false指定按钮是否添加阴影效果

按钮添加图标：

<input type=\公众button\公众 value=\"大众按钮\公众>

<input type=\"大众reset\"大众 value=\公众重置按钮\"大众>

<input type=\"大众submit\公众 value=\"大众提交按钮\公众>

考试测验一下 »

字段容器

如需让标签和表单元素看起来更适应宽屏，请用带有 \"大众ui-field-contain\"大众 类的 <div> 或 <fieldset> 元素包围 label/form 元素：

实例

<form method=\"大众post\"大众 action=\公众demoform.php\"大众>

<div class=\"大众ui-field-contain\公众>

<label for=\"大众fname\公众>姓:</label>

<input type=\公众text\"大众 name=\公众fname\公众 id=\"大众fname\"大众>

<label for=\"大众lname\公众>姓:</label>

<input type=\"大众text\公众 name=\公众lname\公众 id=\公众lname\公众>

</div>

</form>

ui-field-contain 类基于页面的宽度为标签和表单控件添加样式。
当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。
当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。

提示：为了防止 jQuery Mobile 为可点击元素自动添加样式，请利用 data-role=\"大众none\公众 属性：

实例

<label for=\"大众fname\公众>姓名:</label>

<input type=\"大众text\"大众 name=\"大众fname\"大众 id=\"大众fname\"大众 data-role=\公众none\"大众>

考试测验一下 »

jQuery Mobile 中的表单提交

jQuery Mobile 通过 AJAX 自动处理表单提交，并将试图集成做事器相应到运用程序的 DOM 中。