jQuery Mobile 表单
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
jQuery Mobile 表单结构
jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。
在 jQuery Mobile 中，您可以使用下列表单控件：
文本输入框
搜索输入框
单选按钮
复选框
选择菜单
滑动条
翻转拨动开关
当使用 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>
jQuery Mobile 表单图标
表单中的按钮代码是标准的 HTML <input> 元素 (button, reset, submit)。他们会自动渲染样式，可以自动适配移动设备与桌面设备：
实例
<input type="button" value="按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
如果需要在 <input> 按钮中添加额外的样式，可以使用下表中的 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 | 指定按钮是否添加阴影效果 |
按钮添加图标：
<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>