1.表单组件的基础1。组件介绍jQuery Mobile中的表单组件都是基于标准的HTML，然后在此基础上对样式进行了增强，所以即使浏览器不支持jQuery Mobile，表单仍然可以正常使用。需要注意的是，jQuery Mobile会将表单元素增强为易于触控设备使用的表单，所以对于iphone/ipad和安卓使用Web表单会非常方便。

jQuery Mobile的表单组件如下：(1)文本输入框，标有type='text '的输入元素会自动增强为jQuery Mobile样式，不增加额外的数据-角色属性。(2)在文本输入字段中，textarea元素将被自动增强，用于多行文本输入，无需添加额外的data-role属性。jQuery Mobile会自动增加文本字段的高度，避免在移动设备中很难找到滚动条的情况。(3)搜索输入框。标记为type='search '的输入元素将自动增强，而不会添加额外的数据角色属性。这是一个新的HTML元素。增强输入框的左侧有一个放大镜图标。单击以触发搜索。输入内容后，输入框右侧会出现一个十字图标。点击清除输入的内容，非常方便。(4)单选按钮，type='radio '标记的输入元素将自动增强，并且不需要额外的数据-角色属性。(5)勾选按钮，标记有type='checkbox '的输入元素会自动增强，不增加额外的数据-角色属性。(6)选择列表，选择元素将自动增强，无需添加额外的数据角色属性。(7) stroke，标记有type='range '的输入元素会自动增强，不需要增加额外的data-role属性。(8) switch，添加data-role='slider '属性后会增强select元素，这将是jQuery Mobile的switch组件。选择中只能有两个选项。

2.组件使用规范所有表单组件，只要它们需要与服务器传输数据，都应该包装在表单标签中，并且应该指定表单的动作和方法属性。当然，如果使用的是Web SQL Database之类的本地存储，也就是说数据不需要传输到服务器，就可以提交，不需要表单标签和sumbit。此外，表单id需要在整个站点中是唯一的。由于jQuery Mobile使用Ajax导航，不同的页面可以同时加载到一个DOM中，因此表单id在整个站内必须是唯一的，以保证每个DOM的表单id都是不同的。

每个表单元素都应该有一个对应的标签。标签的for值应该与元素的id相同，这样它在语义上是相关的。它可以包装在具有data-role='fieldcontain '属性的div或fieldset容器中。jQuery Mobile将在容器底部自动添加一个细边框作为分隔符。

2.表单组件1的详细说明。文本输入框在jQuery Mobile中，文本输入框和文本输入框都标有标准HTML，支持部分HTML5输入类型，如密码、邮件、电话、号码、范围等，而对于部分类型(范围、Serach) jQuery Mobile会将其转换为文本的输入类型，并统一规范其样式。这是文本输入框的调用代码和图表。

Div数据-角色='字段包含'标签为=' text '文本输入框/标签输入类型=' text '名称=' text' id=' text '值=''//div 。

2.文本输入字段。

Div数据-角色='字段包含'标签为=' textarea '文本输入字段/标签textarea cols=' 40 '行=' 8 '名称=' text area ' id=' text area '/text area/div(9501 . 163.com)。

3.搜索输入框如上所述，增强输入框的左侧有一个放大镜图标。单击以触发搜索。输入内容后，输入框右侧会出现一个十字图标。点击清除输入的内容。

Div数据-角色='字段包含'标签为='搜索'搜索输入框/标签输入类型='搜索'名称='搜索' id='搜索'值=''//div 。

4.无线电盒无线电盒组件用于在页面上提供一组选项，并且只能选择其中一个。在jQuery Mobile中，收音盒组件不仅美化了外观，还增加了一些图标来增强视觉反馈。Type='radio '标记的输入元素将自动增强到单选框组件中，但是jQuery Mobile建议开发人员使用带有data-role='controlgroup '属性的fieldset标记来包含选项，并在fieldset中添加一个图例元素来表示单选框的标题。

Div数据-角色=' field contain ' field set data-角色=' control group' legend单选框：/Legend输入类型=' radio ' name=' radio-choice-1 ' id=' radio-choice-1 '值=' choice-1 '/Label for=' radio-choice-1 '蓝色/Label type=' radio ' name=' radio-choice-1 ' id=' radio-choice-2 '值=' choice-2 '/Label for=' radio-choice-2 '绿色/Input type=' radio' name='

5.复选框复选框也用于在页面上提供一组选项，但可以同时选择多个选项。与单选框相同，复选框组件不需要额外调用数据角色属性，并且type='checkbox '标记的输入元素将自动增强为jQuery Mobile样式。当然，jQuery Mobile也建议开发人员使用带有data-role='controlgroup '属性的fieldset标记来包含选项，并在fieldset中添加一个图例元素来表示复选框的标题。

Div数据-角色='字段包含'字段集数据-角色='控制组'图例复选框/图例输入类型=' checkbox ' name=' blue ' id=' effect 1 ' class=' custom '/For=' effect 1 ' effect 1/label Input type=' checkbox ' name=' green ' id=' effect 2 ' class=' custom '/label For=' effect 2 ' effect 2/Input type=' checkbox ' name=' pink ' id=' effect 2 ' class=' custom '/label For=' effect 2 ' effect 3/label/label

的默认复选框组件是垂直排列选项。我们可以将data-type='horizontal '添加到fieldset，以将其样式更改为水平按钮组的样式。jQuery Mobile将浮动选项元素并移除图标。

6.选择列表选择列表基于HTML select元素，有两种形式：原生菜单和自定义菜单。本地菜单和自定义菜单都有一个风格美化的选择按钮。不同的是自定义菜单中原来的选项元素会被隐藏，jQuery Mobile会生成一个由CSS3和HTML5组成的菜单代替，这个菜单是ARIA的。

关于ARIA，我们在这里来做一个小科普：ARIA是Accessible Rich Internet Application，是W3C WAI工作组倡导的无障碍web应用技术。它是一套独立的规范，可以帮助Web程序，尤其是让有很多前端技能(Ajax)的网页更容易访问。通俗地说，不能理解前端语义的屏幕阅读器等设备将能够理解网页的内容，这样残疾人不仅可以浏览网页，还可以与网页进行交互。

选择元素将自动增强到原始选择列表组件中。如果需要自定义样式菜单，可以添加属性数据-原生-菜单='false' HTML选择。

如果需要禁止选择选项，可以将disabled='disabled '添加到选项的选项标签中。

以下是自定义菜单的示例：

Div数据-角色='字段包含'标签为=' Select-choice-1 ' class=' Select '选择列表/Select数据-native-menu=' false ' name=' Select-choice-1 ' id=' Select-choice-1 '选项值=' 12h ' 12h/选项值='1d '一天/选项值=' 2d '两天/选项值='week '一周/选项/select/div选择按钮。

自定义菜单

如果需要多个选项，可以在select选项卡上添加multiple='multiple '，但原生选择菜单不支持此功能。对于多选菜单，有几点需要注意：

(1)jQuery Mobile将在菜单中创建jQuery Mobile标题，并在标题左侧添加关闭菜单按钮。(2)当用户选择两个或两个以上选项时，选择按钮的右侧会出现一个小图标，图标中会显示所选选项的数量。(3)所有选择的选项文本将显示在选择按钮上。如果文本超过按钮的长度，将使用省略号代替多余的内容。(4)如果选项太多，菜单将显示为新页面。多选列表示例。

Divdata-role=' field contain '的标签为=' Select-choice-2 ' class=' Select '选择题列表/Select data-native-menu=' false ' multiple=' multiple ' name=' Select-choice-2 ' id=' Select-choice-2 '选项值=' 12h' 12h/Option值=' 1d '一天/选项值='2d '两天/选项值='week '一周/选项/select/div 。

此外，我们还可以对选项进行分组，并用以下标签包装同一组选项，其中标签的值是组的标题。

Optgroup标签=' group1'/optgroup分组选择列表示例。

Div数据-角色='字段包含'标签为=' Select-choice-3 ' class=' Select '组选择列表/Select数据-native-menu=' false ' name=' Select-choice-3 ' id=' Select-choice-3 ' opt group标签=' group1 '选项值=' 12h' 12h/Option值=' 1d '一天/选项值='2d '两天/选项值='week '一周/选项/optgroup标签=' group2 '选项值=' 1m '一个月/选项值

7.Slider在jQuery Mobile中，type='range' (HTML5属性值)的输入元素会增强成一个笔画组件，可以通过一些属性值来配置，值设置滑块的初始值，min和max分别设置滑块的下限和上限。此外，滑块组件还支持键盘响应，键盘的右箭头、上箭头和Page Up键可以增加滑块的当前值；相应地，向左箭头、向下箭头和向下翻页键可以减小滑块的当前值，Home键和End键可以将当前值设置为最小值(下限)和最大值(上限)。

Div数据-角色='字段包含' label for=' slider' slider/label输入类型=' range ' name=' slider ' id=' slider ' value=' 0 ' min=' 0 ' max=' 100 '/div(9510 . 163.com)。

8.使用两个选项切换选择元素。在添加了data-role='slider '属性后，它将被增强为jQuery Mobile的开关组件，用于表示布尔数据(true或false)。拖动滑动条在“开”和“关”之间选择，第一个选项将呈现为“开”。

Div数据-角色='字段包含'标签为=' slider '开关/标签选择名称=' slider' id=' slider '数据-角色=' slider '选项值=' off ' off/选项选项值=' on ' on/选项/选择/div 。

提交表单jQuery Mobile通过Ajax自动提交表单。默认方法是get，操作是当前页面的相对路径。表单页面和结果页面之间会有一个平滑的过渡，可以使用数据过渡在表单上指定过渡效果。如果不想使用Ajax提交表单，可以在全局事件中禁用Ajax(如何全局禁用Ajax超出了本文的范围，但将在本系列的后续文章中详细解释)或者在表单上添加data-ajax='false '属性。以下是数据转换的所有理想值。

滑动(默认，从左向右滑出)、向上滑动(从下向上滑出)、向下滑动(从上向下滑出)、弹出(从中心淡出)、淡出、翻转。

4.主题风格至于主题风格，上一篇文章已经介绍过了，这里引用一句：

“data-theme=”属性，所有jQuery Mobile组件都支持该属性，用于设置组件的颜色。默认情况下，该属性有五个值，A、B、C、D和E，分别代表从暗到亮的五种颜色。此外，开发人员可以通过在CSS中添加相应的类来自定义颜色。”

动词（verb的缩写）刷新表单组件由于jQuery Mobile已经对原来的HTML表单元素进行了渲染和添加元素，开发人员通过js直接控制表单组件会比较麻烦(例如，当Web SQL Database用于本地存储数据时，希望在打开网页时使用js获取数据并为表单组件赋值)。因此，jQuery Mobile设计了一个API，通过js为表单组件赋值，下面的例子一一给出：

1.单选按钮选择第一个选项。

$(' input[type=' radio ']: first ')。attr('选中'，真)。checkboxradio(“刷新”)；2.勾选按钮选择第一个选项。

$(' input[type=' checkbox ']: first ')。attr('选中'，真)。checkboxradio(“刷新”)；3.选择选择列表中的第一个选项，注意选项的索引从1开始。

var my select=$(' select # select-choice-1 ')；我选择[0]。selectedIndex=1；my select . selectmenu(' refresh ')；4.滑块设置值为40。

$('input[type=range]')。瓦尔(40)。滑块(‘刷新’)；5.切换到选择第一个选项。

var my switch=$(' select # ShakeToClear ')；myswitch[0]。selectedIndex=1；my switch . slider(' refresh ')；

注意：刷新方法不能直接用在Ajax获取的内容上。比如js要操作的表单组件在另一个Page上，js只在加载第一页的时候加载，所以jQuery Mobile会出错(不会有直接的错误报告，但是这个js会无效)。我们可以使用live(' pagebeforesshow '，function(){})方法使js只在剪切到表单组件所在的页面时才加载(pagebeforesshow是jQuery Mobile事件之一，有三种方法：pagebeforehide、pageshow和pagehide)。举一个下面的例子：

$ ('# setting ')。live(' pagebeforesshow '，function(){//显示页面时选择菜单中的第一个选项，var my select=$(' select # select-choice-1 ')；我选择[0]。selectedIndex=1；my select . selectmenu(' refresh ')；});