jQuery Mobile学习笔记（五）——表单组件

作为一个APP，表单是不可或缺的组件，无论注册，发帖，评论，购物等等，都是表单的变形。

这一章讲解jQuery Mobile（JM）中的表单。

默认情况下，JM会尝试通过框架中Ajax发送表单。如果强制不适用AJax，可以在form标签中使用data-ajax=“false”，或加上target=“_blank”来强制使用Ajax。

表单可以使用（二）中的data-transition，data-direction属性来改变弹出样式。

使用Ajax时，整个页面共享一个DOM，所以提交form时，需要保证各个form元素的ID在整个站点中唯一。

1.文本标签

应该为每个控件包含一个label元素，并将控件for属性指向该控件id。当用户点击label时，对应的表单控件会得到焦点。对触摸设备来说，增加了得到焦点的区域，便于点击。

[html] view plain copy

print?

1. <label for=“company”>Company Name:</label>  
2. <input type=“text” id=“company”>  

<label for="company">Company Name:</label><input type="text" id="company">

 如果想隐藏它，可以加上class=“ui-hidden-accessible”

2.域容器（可选的文本标签/部件包装器，类似于DIV）

容器的作用：会将内部的文本标签和表单控件自动对齐，并会添加一个细边框作为字段分隔符；会根据设备的宽度自动调整布局。

[html] view plain copy

print?

1. <div data-role=“fieldcontainer”>  
2. <label for=“company”>Company Name:</label>  
3. <input type=“text” id=“company” name=“company”>  
4. </div>  
5. <div data-role=“fieldcontainer”>  
6. <label for=“email”>Email:</label>  
7. <input type=“email” id=“email” name=“email”>  
8. </div>  

<div data-role="fieldcontainer"><label for="company">Company Name:</label><input type="text" id="company" name="company"></div><div data-role="fieldcontainer"><label for="email">Email:</label><input type="email" id="email" name="email"></div>

3.文本输入框

<input type=”text”>

<input type=”password”>

<input type=”email”>

<input type=”tel”>

<input type=”url”>

<input type=”search”>

<input type=”number”>

<textarea> //当文本过多时，框架会自动扩展该文本区域以适合新行。

 可以选择的文本属性有required（必需）、pattern（验证用正则表达式）、placeholder（提示文字）和min、max（仅用于type=“number”）

4.日期输入框

[html] view plain copy

print?

1. <div data-role=“fieldcontainer”>  
2. <label for=“birth”>Your Birthdate:</label>  
3. <input type=“date” id=“birth” name=“birth”>  
4.   
5. <label for=“favmonth”>Your favorite month:</label>  
6. <input type=“month” id=“favmonth” name=“favmonth”>  
7. </div>  

<div data-role="fieldcontainer"><label for="birth">Your Birthdate:</label><input type="date" id="birth" name="birth"><label for="favmonth">Your favorite month:</label><input type="month" id="favmonth" name="favmonth"></div>

type可选属性：

type格式date年、月、日datetime年、月、日、小时、分钟time小时、分钟datetime-local完整的日期选择，不带时区信息month月份week星期日期输入框支持min和max属性。

5.滑块

[html] view plain copy

print?

1. <div data-role=“fieldcontainer”>  
2. <label for=“qty”>Quantity:</label>  
3. <input type=“range” id=“qty” name=“qty” min=“1” max=“100” step=“2” value=“5” data-theme=“e”   
4. data-track-theme=“b”>  
5. </div>  

<div data-role="fieldcontainer"><label for="qty">Quantity:</label><input type="range" id="qty" name="qty" min="1" max="100" step="2" value="5" data-theme="e" data-track-theme="b"></div>

data-track-theme只影响滚动条，data-theme只对数字输入框有效

6.平移切换开关（需要显式指定data-role）

[html] view plain copy

print?

1. <label for=“updated”>Receive updates</label>  
2. <select id=“updated” name=“updated” <span style=“background-color: rgb(51, 204, 255);”>data-role=“slider”</span>>  
3. <option value=“no”>No</option>  
4. <option value=“yes”>Yes</option>  
5. </select>  

<label for="updated">Receive updates</label><select id="updated" name="updated" <span style="background-color: rgb(51, 204, 255);">data-role="slider"</span>><option value="no">No</option><option value="yes">Yes</option></select>

7.选择菜单（默认会占用整个宽度，除非包含在一个域容器中）

单选：

[html] view plain copy

print?

1. <label for=“training”>Training</label>  
2. <select id=“training” name=“training”>  
3. <option value=“1”>HTML5</option>  
4. <option value=“2”>jQuery Mobile</option>  
5. <option value=“3”>iOS</option>  
6. <option value=“4”>Android</option>  
7. <option value=“5”>BlackBerry</option>  
8. <option value=“6”>Qt for Meego</option>  
9. </select>  

<label for="training">Training</label><select id="training" name="training"><option value="1">HTML5</option><option value="2">jQuery Mobile</option><option value="3">iOS</option><option value="4">Android</option><option value="5">BlackBerry</option><option value="6">Qt for Meego</option></select>

多选：（可以用optgroup和option元素将选项分组）

[html] view plain copy

print?

1. <label for=“lang”>Languages you like</label>  
2. <select id=“lang” name=“lang” <span style=“background-color: rgb(51, 204, 255);”>multiple</span>>  
3. <option value=“1”>C/C++</option>  
4. <option value=“2”>Objective-C</option>  
5. <option value=“3”>Java</option>  
6. <option value=“4”>C#</option>  
7. <option value=“5”>Visual Basic</option>  
8. <option value=“6”>ActionScript</option>  
9. <option value=“7”>Delphi</option>  
10. <option value=“8”>Phyton</option>  
11. </select>  

<label for="lang">Languages you like</label><select id="lang" name="lang" <span style="background-color: rgb(51, 204, 255);">multiple</span>><option value="1">C/C++</option><option value="2">Objective-C</option><option value="3">Java</option><option value="4">C#</option><option value="5">Visual Basic</option><option value="6">ActionScript</option><option value="7">Delphi</option><option value="8">Phyton</option></select>

组合选择菜单：（垂直和水平）

label会被隐藏，可以使用legend元素来定义一个应用到整个分组的文本标签

[html] view plain copy

print?

1. <div data-role=“controlgroup”>  
2. <legend>Color and Size</legend>  

<div data-role="controlgroup"><legend>Color and Size</legend>

[html] view plain copy

print?

1. <label for=“color”>color</label>  
2. <select id=“color” name=“color”>  
3. <option value=“1”>Blue</option>  
4. <option value=“2”>White</option>  
5. <option value=“3”>Red</option>  
6. <option value=“4”>Black</option>  
7. <option value=“5”>Pink</option>  
8. </select>  
9. <select id=“size” name=“size”>  
10. <option value=“1”>X-Small</option>  
11. <option value=“2”>Small</option>  
12. <option value=“3”>Medium</option>  
13. <option value=“4”>Large</option>  
14. <option value=“5”>X-Large</option>  
15. </select>  
16. </div>  
17.   
18. <div data-role=“controlgroup” data-type=“horizontal”>  
19. <legend>Week day and time</legend>  
20. <select id=“weekday” name=“weekday” multiple>  
21. <option value=“1”>Mon</option>  
22. <option value=“2”>Tue</option>  
23. <option value=“3”>Wed</option>  
24. <option value=“4”>Thu</option>  
25. <option value=“5”>Fri</option>  
26. </select>  
27. <select id=“time” name=“time”>  
28. <option value=“1”>Morning</option>  
29. <option value=“2”>Midday</option>  
30. <option value=“3”>Afternoon</option>  
31. </select>  

<label for="color">color</label><select id="color" name="color"><option value="1">Blue</option><option value="2">White</option><option value="3">Red</option><option value="4">Black</option><option value="5">Pink</option></select><select id="size" name="size"><option value="1">X-Small</option><option value="2">Small</option><option value="3">Medium</option><option value="4">Large</option><option value="5">X-Large</option></select></div><div data-role="controlgroup" data-type="horizontal"><legend>Week day and time</legend><select id="weekday" name="weekday" multiple><option value="1">Mon</option><option value="2">Tue</option><option value="3">Wed</option><option value="4">Thu</option><option value="5">Fri</option></select><select id="time" name="time"><option value="1">Morning</option><option value="2">Midday</option><option value="3">Afternoon</option></select>

非原生选择菜单：

[html] view plain copy

print?

1. <label for=“training”>Training</label>  
2. <select id=“training” name=“training” <span style=“background-color: rgb(51, 204, 255);”>data-native-menu=“false”</span>>  
3. <option value=“1”>HTML5</option>  
4. <option value=“2”>jQuery Mobile</option>  
5. <option value=“3”>iOS</option>  
6. <option value=“4”>Android</option>  
7. <option value=“5”>BlackBerry</option>  
8. <option value=“6”>Qt for Meego</option>  
9. </select>  

<label for="training">Training</label><select id="training" name="training" <span style="background-color: rgb(51, 204, 255);">data-native-menu="false"</span>><option value="1">HTML5</option><option value="2">jQuery Mobile</option><option value="3">iOS</option><option value="4">Android</option><option value="5">BlackBerry</option><option value="6">Qt for Meego</option></select>

如果选项过多，打开菜单时将创建一个对话页面

[html] view plain copy

print?

1. <label for=“training”>Training</label>  
2. <select id=“training” name=“training” data-native-menu=“false” <span style=“background-color: rgb(51, 204, 255);”>data-overlay-theme=“e”</span>>  
3. <option value=“0” <span style=“background-color: rgb(51, 204, 255);”>data-placeholder=“true”</span>>Select your training</option>  
4. <option value=“1”>HTML5</option>  
5. <option value=“2”>jQuery Mobile</option>  
6. <option value=“3”>iOS</option>  
7. <option value=“4”>Android</option>  
8. <option value=“5”>BlackBerry</option>  
9. <option value=“6”>Qt for Meego</option>  
10. </select>  

<label for="training">Training</label><select id="training" name="training" data-native-menu="false" <span style="background-color: rgb(51, 204, 255);">data-overlay-theme="e"</span>><option value="0" <span style="background-color: rgb(51, 204, 255);">data-placeholder="true"</span>>Select your training</option><option value="1">HTML5</option><option value="2">jQuery Mobile</option><option value="3">iOS</option><option value="4">Android</option><option value="5">BlackBerry</option><option value="6">Qt for Meego</option></select>

data-overlay-theme来指定菜单覆盖层的色样，如果value=‘’或data-placehoder=“true”将被用作覆盖层的标题。

8.单选

放在controlgroup中，样式会友好一些，不会铺满屏幕。

name值必须一致，id唯一，label唯一

[html] view plain copy

print?

1. <div data-role=“controlgroup”>  
2. <legend>Menu type</legend>  
3.   
4. <label for=“menuNative1”>Native menu, single selection</label>  
5. <input type=“radio” id=“menuNative1” name=“menuType” value=“1”>  
6.   
7. <label for=“menuNative2”>Native menu, multiple selection</label>  
8. <input type=“radio” id=“menuNative2” name=“menuType” value=“2”>  
9.   
10. <label for=“menuNonNative1”>Non-native menu, single selection</label>  
11. <input type=“radio” id=“menuNonNative1” name=“menuType” value=“3”>  
12.   
13. <label for=“menuNonNative2”>Non-native menu, multiple selection</label>  
14. <input type=“radio” id=“menuNonNative2” name=“menuType” value=“4”>  
15. </div>  

<div data-role="controlgroup"><legend>Menu type</legend><label for="menuNative1">Native menu, single selection</label><input type="radio" id="menuNative1" name="menuType" value="1"><label for="menuNative2">Native menu, multiple selection</label><input type="radio" id="menuNative2" name="menuType" value="2"><label for="menuNonNative1">Non-native menu, single selection</label><input type="radio" id="menuNonNative1" name="menuType" value="3"><label for="menuNonNative2">Non-native menu, multiple selection</label><input type="radio" id="menuNonNative2" name="menuType" value="4"></div>

水平单选（类似于开关）

[html] view plain copy

print?

1. <legend>Delivery method</legend>  
2.   
3. <div data-role=“controlgroup” data-type=“horizontal”>  
4.   
5. <label for=“deliveryUPS”>UPS</label>  
6. <input type=“radio” id=“deliveryUPS” name=“delivery” value=“ups”>  
7.   
8. <label for=“deliveryDHL”>DHL</label>  
9. <input type=“radio” id=“deliveryDHL” name=“delivery” value=“dhl”>  
10.   
11. <label for=“deliveryFedex”>FedEx</label>  
12. <input type=“radio” id=“deliveryFedex” name=“delivery” value=“fedex”>  
13.   
14. </div>  

<legend>Delivery method</legend><div data-role="controlgroup" data-type="horizontal"><label for="deliveryUPS">UPS</label><input type="radio" id="deliveryUPS" name="delivery" value="ups"><label for="deliveryDHL">DHL</label><input type="radio" id="deliveryDHL" name="delivery" value="dhl"><label for="deliveryFedex">FedEx</label><input type="radio" id="deliveryFedex" name="delivery" value="fedex"></div>

9.复选框（data-type=”horizontal”加上后会变成多选开关按钮）

[html] view plain copy

print?

1. <legend>Delivery options</legend>  
2.   
3. <div data-role=“controlgroup” <span style=“background-color: rgb(51, 204, 255);”>data-type=“horizontal”</span>>  
4.   
5. <label for=“optionGift”>Pack it as a Gift</label>  
6. <input type=“checkbox” id=“optionGift” name=“optionGift” value=“yes”>  
7.   
8. <label for=“optionBag”>Send it with a bag</label>  
9. <input type=“checkbox” id=“optionBag” name=“optionBag” value=“yes”>  
10.   
11. <label for=“optionRemove”>Remove the box</label>  
12. <input type=“checkbox” id=“optionRemove” name=“optionRemove” value=“yes”>  
13.   
14. </div>  

<legend>Delivery options</legend><div data-role="controlgroup" <span style="background-color: rgb(51, 204, 255);">data-type="horizontal"</span>><label for="optionGift">Pack it as a Gift</label><input type="checkbox" id="optionGift" name="optionGift" value="yes"><label for="optionBag">Send it with a bag</label><input type="checkbox" id="optionBag" name="optionBag" value="yes"><label for="optionRemove">Remove the box</label><input type="checkbox" id="optionRemove" name="optionRemove" value="yes"></div>

10上传文件

<input type=”file”>目前不被IOS、Android支持，web可以。