上一小节我们说了文本输入框，密码输入框，数值型输入框，还有大的文本域。这一小节，我们继续说form表单中的一些常用的控件们。
目录
1 单选按钮
2 复选框
3 下拉列表选择
1 单选按钮
单选按钮，就是说一组按钮中，我们只能选择一个，比如性别，只能选择男或者女，比如让我们挑选一个最喜欢的水果，那么我们就只能选择其中的一个。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">性别:</label><input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <hr/></form></body>
</html>
这就是所谓的单选按钮，可以试着点一点，男或者女，只能选中其中一个。但单选按钮也是成组出现的，归类组别的属性是 name 。我们看，刚才这两个单选按钮呢，是通过 sex 属性值来归类的。
那么我们再添加一个组别呢，试一下。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">性别:</label><input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <input type="radio" name="fruit" value="apple">苹果 <input type="radio" name="fruit" value="pear">鸭梨 <hr/></form></body>
</html>
看，虽然看上去这些单选按钮像是一个组的，排列在一起了。但是，我们通过设定了不同的 name 属性值，使得这里可以归纳为2个组。我们可以分别对 男女 苹果鸭梨 进行分组选择。
2 复选框
复选框呢，就是，不做单一的选择，而是可以多选择。比如我喜欢吃的水果，怎么可能只喜欢一种呢，对吧，比如体育运动，怎么可能只喜欢一种呢。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">性别:</label><input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <input type="radio" name="fruit" value="apple">苹果 <input type="radio" name="fruit" value="pear">鸭梨 <hr/><label for="name">喜欢的汽车:</label><input type="checkbox" name="car" value="bc">奔驰 <input type="checkbox" name="car" value="bm">宝马 <input type="checkbox" name="car" value="ad">奥迪 </form></body>
</html>
看上图可知，我们可以通过复选框，达到多选的效果。比如这3种汽车，我都喜欢，不知道你喜不喜欢呢。
3 下拉列表选择
下拉选择呢，有点类似单选按钮，但这是一种不同的展现形式。甚至，在项目开发中，下拉列表不光有单选的，还可以做成多选的。总之就是产品场景多种多样，我们需要将所学的知识灵活运用，以完成各种场景的项目开发，从而达到挣工资的效果。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><form method="get" action="http://www.aatest.com/setUser" target="_blank"><label for="name">性别:</label><input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <input type="radio" name="fruit" value="apple">苹果 <input type="radio" name="fruit" value="pear">鸭梨 <hr/><label for="car">喜欢的汽车:</label><input type="checkbox" name="car" value="bc">奔驰 <input type="checkbox" name="car" value="bm">宝马 <input type="checkbox" name="car" value="ad">奥迪 <hr/><label for="grade">年级:</label><select name="grade"><option value="1">一年级</option><option value="2">二年级</option><option value="3">三年级</option><option value="4">四年级</option></select></form></body>
</html>
如上图所示，下拉列表展示就是这些 option 的内容，我们选择哪个后，哪个内容就会展示到下拉列表的文本框内。而且下拉面板也会隐藏起来。
