明天就开始上班了，回家的这些天家里没有网，另外在家也没有心思写博客，所以就没写，回来继续。
在平时的开发中难免会用到单选和复选按钮，所以简单的介绍一下这两个，首先看一段代码：
<!DOCTYPE html><html><head><title>Form Example 3</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script></head><body><div data-role="page"> <div data-role="header"> <h1>Form Demo</h1> </div> <div data-role="content"> <form action="echo.cfm" method="post"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>性别：</legend> <input type="radio" name="sex" id="nan" value="男"> <label for="nan">男</label> <input type="radio" name="sex" id="nv" value="女"> <label for="nv">女</label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>喜欢的颜色:</legend> <input type="checkbox" name="favoritecolor" id="favoritecolor1" value="Green"> <label for="favoritecolor1">绿色</label> <input type="checkbox" name="favoritecolor" id="favoritecolor2" value="Red"> <label for="favoritecolor2">红色</label> <input type="checkbox" name="favoritecolor" id="favoritecolor3" value="Yellow"> <label for="favoritecolor3">黄色</label> </fieldset> </div> <input type="submit" name="submit" value="Send" /> </div> </form> </div></div></body></html>
运行的效果如下：
解释一下代码中的一些东西：data-role="fieldcontain"是为了将内容进行分块，主要的功能就是在每个区域后面加上一条横线，便于区分区域。例如途中“女”字下面的那条线。data-role="controlgroup"是为了使其所包围的内容更加的紧凑更像一个整体。读者可以将代码中的对应的东西删去看一下效果。
最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">，可以实现按钮的横向排列。