一，单选按钮
type="redio"
注意：
1.必须要给这一组单选按钮添加name值才能实现单选效果，
2.点击文字也能够切换：加 label 标签，并且设置 for 属性对应的单选按钮的 id 属性值一致，
3.设置默认选中状态：给单选按钮添加checked="checked"
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<name>姓名</name><input type="test" /><br />
<name>密码</name><input type="password" /><br />
性别：<input type="radio" name="性别" id="nan"/ checked="checked"> <label for="nan">男</label>
<input type="radio" name="性别" id="nv"/> <label for="nv">女</label>
<input type="radio" name="性别" id="baomi"/> <label for ="baomi">保密</label>
</form>
</body>
</html>
二，下拉菜单
select和option的组合
注意：1.如果想设置多组下拉菜单，需要添加一个optgroup标签，并设置label属性作为提示文字
2.如果想设置默认选中状态，需要给optiom添加selected属性
具体代码如下：
<form>
地址：<select name="">
<option value="" selected="selected">江西</option>
<option value="">北京</option>
<option value="">江苏</option>
<option value="">浙江</option>
</select>
<select name="">
<optgroup label="江西">
<option value="" >景德镇</option>
<option value="" selected="selected">新余</option>
<option value="">南昌</option>
<option value="">九江</option>
</optgroup>
<optgroup label="北京">
<option value="">海淀区</option>
<option value="">朝阳区</option>
<option value="">密云区</option>
</optgroup>
</select>
</form>
三，文本域
testarea 标志多行文本
注意：文本域不能设置rows，cols属性，因为浏览器的解析的结果都不一样，如果要让每个浏览器大小相同，必须设置width height才行 也可以使用placeholder
具体代码如下
<!--自我介绍：<textarea rows="5" cols="20"></textarea>-->
自我介绍：<textarea style="width: 200px; height: 200px;"></textarea>
四，多选框
type="checkbox"
它的使用方法和细节与单选框一致
具体代码如下：
爱好:<input type="checkbox" id="yd" checked="checked"/><label for="yd">运动</label>
<input type="checkbox" id="yy"/><label for="yy">音乐</label>
<input type="checkbox" id="dyx"/><label for="dyx">打游戏</label>
<input type="checkbox" id="sj"/><label for="sj">睡觉</label>
五，按钮
1，提交按钮 type="submit" 注意：需要设置value值属性，否则浏览器之间有兼容性问题
2，重置按钮 type="reset" 恢复刷新后的默认状态，也需要设置value值属性
3，其他按钮 type="button" 或者直接使用<button> </button>
具体代码如下：
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="按钮说明" />
<button>按钮说明</button>
具体结果：
image.png
