# 表单元素 Form elements
所有的表单元素都是由标准的html元素控制的,然后又得到增强,使他们更吸引人并且容易使用。在不支持Jquery Mobile的浏览器下仍然是可用的,因为它们都是基于原生的html元素.
## 表单基础 Form basics
Jquery Mobile提供了一套完整的,适合触摸操作的表单元素,他们都是基于原生的html元素
## 表单结构 Form structure
所有的表单都应该被包裹在一个form标签内,这个标签应该指定好action和method 属性用来控制与服务器传送数据的方法
**html代码**
```
<form action="form.php" method="post"> ... </form>
```
## 标记的规约 Markup Conventions
在Jquery Mobile中组织表单时,大多数创建普通的 HTTP post ,get方式的表单是需要遵守的规约依然是适用的? 但是有一点要注意,form的id属性不仅需要在该页面内唯一? 也需要在整个网站的所有页面中是唯一的 这是因为Jquery Mobile的单页面内导航的机制使得多个不同"page"可以同时在DOM中出现,所以你必须给表单使用不同的id属性,以保证在每个DOM中的表单的ID都是不同的。(当然,请务必给内部的label元素合适的使用for属性)
## 表单元素的自动初始化 Auto-initialization of form elements
默认情况下,Jquery Mobile会自动把原生的表单元素增强为适合触摸操作的组件。这是它通过标签名寻找表单元素,然后对他们执行Jquery Mobile插件的方法内部实现的,所以比如说,select元素被找到后,Jquery Mobile通过用selectmenu插件进行初始化,而一个属性为type="checkbox"的input元素会被checkboxradio插件来增强。初始化完毕后,你可以用他们的Jquery UI的组件的方法通过程序进一步使用或设定他们的增强功能。(查看 查找可用的方法)
## 防止表单元素被自动初始化 Preventing auto-initialization of form elements
如果你需要某表单元素不被Jquery Mobile 处理,只需要给这个元素增加 data-role="none" 属性
**html代码**
```
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
```
或者,如果你不想增加上述的属性,可以设置页面插件?keepNative选项(默认情况下为[data-role="none"]),来自定义用来防止初始化的选择器。请务必在mobileinit事件的处理程序中设置这个选项,能让第一个页面以及随后被加载的页面应用此设置
**html代码**
```
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
```
select元素情况比较特殊。如果select元素在表单当中,上例会阻止针对页面中select 元素的所有的增强行为。如果你想保持菜单本身的外观与表现,行为,同时又想通过Jquery Mobile增强select的按钮的视觉外观,你可以在mobileinit的回调函数中.mobile.nativeSelectMenu设为true作为全局设置或者在每个元素上逐个使用data-native="true"进行设置
## 动态的表单布局 Dynamic form layout
在Jquery Mobile中,所有的表单元素都被设计成弹性宽度以适应不同移动设备的屏幕宽度。在Jquery Mobile中内建的一个优化就是根据屏幕宽度的不同,label和表单元素的宽度是不同的
如果屏幕宽度相对窄(小于480px),label元素会被样式化为块级元素,使他们能够置于表单元素上方,节省水平空间
在比较宽的屏幕上,label和表单元素会被样式化为两列的网格布局的一行中,充分利用页面的空间
## 表单内区域容器 Field containers
我们建议把表单内的每一个label/表单元素对用div或fieldset容器包裹,然后增加data-role="fieldcontain"属?,以改善标签和表单元素在宽屏设备中的样式。Jquery Mobile会自动在容器底部添加一条细边框作为分隔线,使得label/表单元素对在快速扫视时看起来对齐
**html代码**
```
<div data-role="fieldcontain">
...label/input code goes here...
</div>
```
## 刷新表单元素 Refreshing form elements
每一个表单组件都有刷新方法。以下是实例
**html代码**
```
复选按钮
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
```
单选按钮组:
```
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
```
选择列表::
```
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
```
滑动条
```
$("input[type=range]").val(60).slider("refresh");
```
开关 (they use slider):
```
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
```
- 综述
- Jquery mobile介绍 Jquery Mobile Overview
- 关键特性: Key features:
- 可访问性 Accessibility
- a4版本支持的平台 Supported platforms in Alpha 4
- API
- 默认配置
- 事件
- 方法
- 有响应的布局助手
- 主题
- 组件
- 页面与对话框
- 页面
- 页面转场 Page transitions
- 创建对话框 Creating dialogs
- Jquery Mobile的导航模型 Jquery Mobile's navigation model
- 链接的格式 Link formats
- 给页面主题样式 Page Theming
- 工具栏
- 工具栏
- 头部栏
- 尾部栏
- 导航栏
- 固定定位的工具栏会在滚屏后重新出现 Fixed toolbars will re-appear after you scroll
- 全屏的固定的工具栏 Fullscreen fixed toolbar
- 持续的尾部栏 Persistent footer nav bar
- 给头部栏和尾部栏设置主题样式
- 按钮
- 按钮标记选项 Button markup options
- 给按钮添加图标 Adding Icons to Buttons
- 内联按钮 Inline buttons
- 组按钮 Grouped buttons
- 主题化按钮 Theming buttons
- 内容的格式化
- html格式化 HTML Formatting
- 布局网格 Layout grids
- 可折叠的内容 Collapsible content markup
- 给内容主题 Theming content
- 表单元素
- 表单元素 Form elements
- 表单元素示例 Form element gallery
- 文本输入框 Text inputs
- 搜索输入框 Search inputs
- 滑动条 Slider
- 开关 Flip toggle switches
- 复选按钮 Checkboxes
- 单选按钮组 Radio buttons
- 选择菜单 Select menus
- 表单的主题样式 Form themes
- ajax的表单提交 Ajax form submission
- 表单插件的方法 Form Plugin Methods
- Jquery UI 的移动版日期拾取器插件 Jquery UI's Datepicker Styled for mobile
- 列表
- 列表 List views
- 列表标记的规约List markup conventions