jquery-mobile表单的创建方法详解
本文实例讲述了jquery-mobile表单的创建方法。分享给大家供大家参考，具体如下：
一、注意事项
1.<form>元素必须设置method和action属性
2.每个表单元素必须设置唯一的"id"属性。
该id在站点的页面中必须是唯一的。
这是因为jQueryMobile的单页面导航模型允许许多不同的“页面”同时呈现。
3.每个表单元素必须有一个标记（label）。
请设置label的for属性来匹配元素的id。
二、各种属性的使用
【文本框】
data-role="fieldcontain"大于480px自动与label同到一行
<divdata-role="fieldcontain"> <labelfor="lname">姓：</label> <inputtype="text"name="lname"id="lname"> <labelfor="fname">名：</label> <inputtype="text"name="fname"id="fname"> </div>
如果不希望使用jquery-mobile的样式
data-role="none"
【搜索框】
加上data-role="fieldcontain"一行不加每个标签一行
<divdata-role="fieldcontain"> <labelfor="search">Search:</label> <inputtype="search"name="search"id="search"> <divdata-role="fieldcontain">
【单选框】
<fieldsetdata-role="controlgroup"> <legend>请选择您的性别：</legend> <labelfor="male">男性</label> <inputtype="radio"name="gender"id="male"value="male"> <labelfor="female">女性</label> <inputtype="radio"name="gender"id="female"value="female"> </fieldset>
【复选框】
<fieldsetdata-role="controlgroup"> <legend>请选择您喜爱的颜色：</legend> <labelfor="red">红色</label> <inputtype="checkbox"name="favcolor"id="red"value="red"> <labelfor="green">绿色</label> <inputtype="checkbox"name="favcolor"id="green"value="green"> <labelfor="blue">蓝色</label> <inputtype="checkbox"name="favcolor"id="blue"value="blue"> </fieldset>
[注意]：单复选水平分组
可在fieldset标签中添加属性
data-type="horizontal"
预选某个按钮可以使用：
input的checked
【选择菜单】
普通选择菜单，有点丑
<fieldsetdata-role="fieldcontain"> <labelfor="day">选择日期</label> <selectname="day"id="day"> <optionvalue="mon">星期一</option> <optionvalue="tue">星期二</option> <optionvalue="wed">星期三</option> </select> </fieldset>
自定义选择菜单
使用属性：
data-native-menu="false"
<fieldsetdata-role="fieldcontain"> <labelfor="day">选择天</label> <selectname="day"id="day"data-native-menu="false"> <optionvalue="mon">星期一</option> <optionvalue="tue">星期二</option> <optionvalue="wed">星期三</option> <optionvalue="thu">星期四</option> <optionvalue="fri">星期五</option> <optionvalue="sat">星期六</option> <optionvalue="sun">星期日</option> </select> </fieldset>
【多选菜单】
需要使用自定义的
multiple="multiple" data-native-menu="false"
<fieldset> <labelfor="day">您可以选择多天：</label> <selectname="day"id="day"multiple="multiple"data-native-menu="false"> <option>天</option> <optionvalue="mon">星期一</option> <optionvalue="tue">星期二</option> <optionvalue="wed">星期三</option> <optionvalue="thu">星期四</option> <optionvalue="fri">星期五</option> <optionvalue="sat">星期六</option> <optionvalue="sun">星期日</option> </select> </fieldset>
【滑动条】
<divdata-role="fieldcontain"> <labelfor="points">Points:</label> <inputtype="range"name="points"id="points"value="50"min="0"max="100"> </div>
max-规定允许的最大值
min-规定允许的最小值
step-规定合法的数字间隔
value-规定默认值
<divdata-role="fieldcontain"> <labelfor="points">Points:</label> <inputtype="range"name="points"id="points"value="50"min="0"max="100"data-highlight="true"> </div>
【翻转切换开关】
data-role="slider"
默认选中可加selected
<divdata-role="fieldcontain"> <labelfor="switch">ToggleSwitch:</label> <selectname="switch"id="switch"data-role="slider"> <optionvalue="on">On</option> <optionvalue="off">Off</option> </select> </div>
颜色主题
【主题样式】
a默认。黑色背景上的白色文本。
b蓝色背景上的白色文本/灰色背景上的黑色文本
c亮灰色背景上的黑色文本
d白色背景上的黑色文本
e橙色背景上的黑色文本
一般情况下使用上面的颜色可以直接使用属性
data-theme="e"
如果要改变对话框(遮罩)的背景色
data-overlay-theme="e"（放在page上）
改变可折叠的背景颜色
data-theme="b"data-content-theme="e"（放在collapsible）
主题划分按钮
data-split-theme="e"（放在listview）
【添加新样式】
/*为工具条添加样式
改变背景色需要改俩个地方：background和background-image*/
.ui-bar-f{border:1pxsolid#333;
background:#f00;
color:#fff;font-weight:700;
text-shadow:0-1px0#000;
background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#3c3c3c),to(#111));
background-image:-webkit-linear-gradient(#3c3c3c,#111);
background-image:-moz-linear-gradient(#3c3c3c,#111);
background-image:-ms-linear-gradient(#3c3c3c,#111);
background-image:-o-linear-gradient(#3c3c3c,#111);
background-image:linear-gradient(#3c3c3c,#111)
}
.ui-bar-f,.ui-bar-finput,.ui-bar-fselect,.ui-bar-ftextarea,.ui-bar-fbutton{font-family:Helvetica,Arial,sans-serif}
.ui-bar-f.ui-link-inherit{color:#fff}
.ui-bar-fa.ui-link{color:#7cc4e7;font-weight:700}
.ui-bar-fa.ui-link:visited{color:#2489ce}
.ui-bar-fa.ui-link:hover{color:#2489ce}
.ui-bar-fa.ui-link:active{color:#2489ce}
/*为内容添加样式*/
.ui-body-f{font-weight:bold;color:purple;}
.ui-body-f,.ui-overlay-f{border:1pxsolid#444;
background:#222;color:#fff;
text-shadow:01px0#111;
font-weight:400;
background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#444),to(#222));
background-image:-webkit-linear-gradient(#444,#222);
background-image:-moz-linear-gradient(#444,#222);
background-image:-ms-linear-gradient(#444,#222);
background-image:-o-linear-gradient(#444,#222);
background-image:linear-gradient(#444,#222)
}
.ui-overlay-f{background-image:none;border-width:0}
.ui-body-f,.ui-body-finput,.ui-body-fselect,.ui-body-ftextarea,.ui-body-fbutton{font-family:Helvetica,Arial,sans-serif}
.ui-body-f.ui-link-inherit{color:#fff}
.ui-body-f.ui-link{color:#2489ce;font-weight:700}
.ui-body-f.ui-link:visited{color:#2489ce}
.ui-body-f.ui-link:hover{color:#2489ce}
.ui-body-f.ui-link:active{color:#2489ce}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。