jQuery Mobile是手机端（移动端）页面制作用的框架，包括CSS和JavaScript，此处简单总结一下表单的书写，主要涉及CSS部分。框架提供了表单的一些样式，但在实际使用的时候，我们可能会用自己的自定义样式，这种情况下，框架提供的样式可能就不能满足我们的要求。今天项目中写登录页面的静态网页，碰到了几个问题，在这里和大家交流一下。
1 利用data-role=”none”
在使用表单的时候，如果想使用自定义样式，就可以表单元素上给data-role属性赋值none，意思就是不使用mobile框架提供的样式。
2 在input文本框前面加小图标
一般是用户名和密码的input框前面加一个代表用户和密码锁的小图标，这种情况在很多网站都用的比较普遍。mobile框架没有提供现成样式，需要我们自己写。
参考资料http://jingyan.baidu.com/article/925f8cb8c6763ac0dde056da.html
总体思想是把i标签和input标签放到一个div中，i标签负责前面的小图标显示（使用i标签是不成文的规则），后面的input正常输入用户名和密码。
html代码
<div class="inputbox">
<i class="userIcon"></i>
<input data-role="none" type="text" class="username"placeholder="用户名" />
</div>
css代码
. inputbox{ position: relative;padding-bottom: 10px;}
. userIcon{position: absolute;left: 10px;z-index:5;top: 15px;
background-image: url(../images/mobile_icon_user.png); /*引入图片图片*/
background-size: 80% 80%;/*调整图片的显示大小*/
background-repeat: no-repeat; /*设置图片不重复*/
background-position: 0px 0px; /*图片显示的位置*/
width: 26px; /*设置图片显示的宽*/
height: 28px; /*图片显示的高*/}
.username{padding: 5px 5px 5px 40px;width: 85%;height:40px;border-radius: 5px;border:2px solid #F2F0F0;}
里面的一些参数可以根据需要进行调整。
3 checkbox的大小设置和文字对齐
设置checkbox的大小使用zoom属性，值是相对值，文字的对齐和checkbox的大小以及文字的大小有关，需要自己根据需要摸索调整。
参考资料http://www.zhangxinxu.com/wordpress/2009/12/checkbox复选框的一些深入研究与理解/
示例代码
html代码
<div class="rememberPassword">
<input type="checkbox" data-role="none" > 记住密码
</div>
css代码
. rememberPassword {font-size: 0.8em;padding-top: 5px;}
. rememberPassword input{margin-left:2px;width: 10%;border: none;vertical-align: middle;zoom: 150%;}
. rememberPassword input[type=checkbox] {display: inline-block;height: 0.8em;width: 0.8em;background: #FFFFFF;}
今天刚开始使用jQuery Mobile来写form表单，暂时发现的问题以及解决办法先整理这些，后面遇到问题再继续整理。