表单元素 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");