表单元素Form elements

所有的表单元素都是基于标准的html元素后，而后又得到增强，使其更有吸引力并且容易使用

All form widgets begin with native form elements with rich HTML semantics that are enhanced to make them more attractive and finger-friendly.

概述Markup conventions

在Jquery Mobile中组织表单时，大多数创建普通的 HTTP post/get方式的表单需要遵守的规约依然是适用的,但是有一点要注意，form的id属性不仅需要在该页面内唯一也需要在整个网站的所有页面中是唯一的,这是因为Jquery Mobile的单页面内导航的机制使得多个不同"page"可以同时在DOM中出现，所以你必须给表单使用不同的id属性，以保证在每个DOM中的表单的ID都是不同的。（当然，请务必给内部的label元素合适的使用for属性）

When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via ordinary HTTP POST or GET still apply. Additionally, the id attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. You must be careful to use unique id attributes so there will be only one of each in the DOM. Be sure to pair them properly with label elements via the for attribute.

按钮Buttons

Buttons被广泛的使用在各种控件中，jquery mobile中是个弹性标示，可由links/传统的input创建，更多详情请查看 button markup和input buttons.

内联（inline）buttons

水平按钮组

滑动条Sliders

常用于通过拖动滑条实现一个区间内数值的输入，更多详情sliders

Sliders are used to enter numeric values along a numeric continuum by dragging a handle or entering in a value. Learn more about sliders.

区间输入滑动条

区间输入滑动条提供了两个滑动游标，详情见range sliders.

翻转切换开关（Flip switches）

Flip switches是常用于boolean类型数据输入简洁UI，更多详情见 flip switches.

Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element. Learn more about flip switches.

复选框（Checkboxes）

常用于提供一系类选项，可供用户实现单选或多选，更多详情见checkboxes.

Checkboxes are used to provide a list of options where more than one can be selected. Learn more about checkboxes.

单选框（Radio buttons）

提供一序列选项，仅能选中一项，详情参见 radiobuttons.

选择菜单（Selects）

选择菜单常用于提供一序列选项的紧凑型选择器，这里我们基于原生菜单类型，同时自定义了多个菜单样式，因此我们可以通过样式属性设置来选择菜单样式，更多详情参见selects.

The select menu is used to offer a list of options in a compact picker. Ours is based on a native select element, which is hidden from view and replaced with a custom-styled select button. Tapping it opens the native menu or a custom styled version. Learn more about selects.

文本输入和文本区域输入：Text inputs & Textareas

文本输入和文本区域输入是基于标准HTML元素编码，经jQuery Mobile增强使其在移动设备上更具吸引力和可操作性（注意：type字段的关联可以使其获得焦点时显示对应的输入键盘格式），详情参见text inputs and textareas.

Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Learn more about

更多表单元素查看表单‘画廊’

See the form gallery for more form element examples.

Accessibly hidden labels

可访问隐藏标签

为了增加可读性，jQuery Mobile要求所有的表单元素均要配上一个有意义的label标签，为了有时候隐藏标签需要（例如：我们使用元素的placeholder属性替换标签）但又需要瞒住助技术（残疾人设计）需求，可以使用这个ui-hidden-accessible属性优雅的实现，更多实例参见accessibly hidden labels.

表单元素锁定

所有jQuery Mobile组件都可以通过传统方式设定对应的disabled属性实现对象的锁定， 为了实现动态的开/解锁，同样也有标准方法为每个组件，更多实例参见disabled form elements.

All jQuery Mobile widgets can be disabled in the markup by adding the standard disabled attribute to the element, just like you would with native controls. To dynamically disable or enable them, each form widget also has standard disable and enable methods that are documented with each form widget. View more examples of disabled form elements.

注意：能够锁定通过button或input基础创建的按键，但并不能锁定带链接形式的按键，链接在HTML中并没有对应的属性，因此可以通过扩展的样式（class）ui-disabled实现，不过你也可以通过自己编写javaScript实现。

Note that you can disable buttons created from button or input-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.

Fieldcontainer groupings

字段组容器（Fieldcontainer groupings）

为了改进标签（labels）和表单元素在宽屏上的显示风格，使用一个带有class="ui-field-contain"属性的div 或fieldset 包裹label和表单元素,实现屏幕大于448px时标签和输入框并排排列，而小于时则正常以块级元素分行显示，此外还会在字段组底部显示细边框线实现字段分隔，更多详情见fieldcontainer groupings.

,

To improve the styling of labels and form elements on wider screens, wrap a with the class="ui-field-contain" attribute around each label/form element. This framework aligns the input and associated label side-by-side, and breaks to stacked block-level elements below ~448px. The framework will also add a thin bottom border to act as a field separator. See more examples of fieldcontainer groupings.

自动初始化表单元素

Auto-initialization of form elements

默认下，jQuery Mobile会自动强化一些原始表单控件使其成更佳的触屏友好元素（touch-friendly）， 这种处理的实质就是通过找到特定表单标签并对其运行对应的插件方法，例如：一个select标签将会被 一个“selectmenu”插件初始化，而一个带有type="checkbox"属性的input元素将会被一个“checkboxradio”插件所强化，一旦初始化后，就能过通过他们的jQuery UI组件的API方法访问这些强化后的表单元素，这些表单插件的选项（属性）/方法/事件（options/methods/events）的详细信息查看对应的插件实例页面文档

By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them. For instance, a select element will be found and initialized with the "selectmenu" plugin, while an input element with a type="checkbox" will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods. See options, methods, and events listed on each form plugin's documentation page for details.

Initializing groups of dynamically-injected form elements

初始化动态注入的表单元素组

如果你想生成一个新的客户端组件或者通过AJAX方式加载内容到一个页面时，你可以为要处理的所有组件绑定create事件，可以绑定任何元素，甚至是data-role="page"的div本身，以保存你手工处理的初始化（如下）：

If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).

例如：一个通过AJAX加载的块级的HTML组件（如一个登陆的form），绑定一个create事件使其自动将所有的元素（inputs/buttons...）全部转化为jQuery Mobile的强化版本，脚本代码如下：

For example, if a block of HTML markup (say a login form) was loaded in through AJAX, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Refreshing form elements

表单元素刷新

在jQuery Mobile中，有些表单的强化仅仅是简单的添加样式（如inputs），但另外的很多是从原始组件另外创建保持一致的形式，因此通过JavaScript的脚本程序更新表单时，首先处理的还是原始组件，这是我们需要通过refresh方法使界面显示的强化控件和原始控件保持一致的状态/值，下面是一些常见控件的更新例子：

In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the refresh method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the refresh method:

Checkboxes:

$( "input[type='checkbox']" ).prop( "checked", true ).checkboxradio( "refresh" );

Radios:

$( "input[type='radio']" ).prop( "checked", true ).checkboxradio( "refresh" );

Selects:

var myselect = $( "#selectfoo" );
myselect[0].selectedIndex = 3;
myselect.selectmenu( "refresh" );

Sliders:

$( "input[type='range']" ).val( 60 ).slider( "refresh" );

Flip switches:

They use the slider widget.

var myswitch = $( "#selectbar" );
myswitch[ 0 ].selectedIndex = 1;
myswitch.slider( "refresh" );

Preventing auto-initialization of form elements

禁掉表单元素的自动初始化

如果有时候想要不被jQuery Mobile影响的表单元素，只要简单的添加 data-role="none"属性，例如：

If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

<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事件中，以便和第一个page一起加载的页面继承。

If you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's keepNative option (which defaults to ). Be sure to configure this option inside an event handler bound to the mobileinit event, so that it applies to the first page as well as subsequent pages that are loaded.

$( document ).bind( "mobileinit", function() {
    $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});

Alternately you can use the data-enhance="false" data attribute on a parent element with $.mobile.ignoreContentEnabled set to true. Beware though, this will incur a performance penalty for each and every element in the page that would otherwise be enhanced as jQuery Mobile must traverse the set of parents to look for those elements.

One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if select is included. If you wish to retain the native performance and appearance of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile, you can set $.mobile.selectmenu.prototype.options.nativeMenu to true in a mobileinit callback as a global setting or use data-native-menu="true" on a case by case basis.

File Inputs + AJAX

文件上传 + AJAZ

包含文件传输的表单是不被AJAX支持的,因此务必在最外层表单标记上声明data-ajax="false"以确保表单能被正常提交

Using a multipart form with a file input is not supported by AJAX. In this case you should decorate the parent form with data-ajax="false" to ensure the form is submitted properly to the server.