上一小节我们说了文本输入框，密码输入框，数值型输入框，还有大的文本域。这一小节，我们继续说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 的内容，我们选择哪个后，哪个内容就会展示到下拉列表的文本框内。而且下拉面板也会隐藏起来。
