鲁达 前几天讲了表单标签中的text和password属性，今天继续说下单选/多选按钮、name和value属性。
1.单选按钮:
先看样式展示
这里先没有对单选框进行处理，男女都是可以点击的
这里稍后处理下按钮的属性，看下代码展示:
<body>
<form>
用户名: <input type="text"> <br>
密码: <input type="password"> <br>
性别: 男<input type="radio"> 女<input type="radio">
</form>
</body>
2.多选框 和单选框不一样的是，多选框可以选择多个属性，也可以取消
可以勾选或者是不勾选
我们看下代码:
<body>
<form>
用户名: <input type="text"> <br>
密码: <input type="password"> <br>
性别: 男<input type="radio"> 女<input type="radio"> <br>
爱好: 学习<input type="checkbox"> 游戏<input type="checkbox">
吃饭<input type="checkbox"> <br>
</form>
</body>
在body中添加<form>,然后属性可以用 <input type="">来控制
3.name和value属性
除了type属性后，<input>标签还有其他很多属性，常用属性如下:
name 由用户自定义 定义input元素的名称
value 由用户自定义 规定input元素的值
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度
先看下刚才单选框中的radio按钮，两个单选框其实都是可以点的，需要再通过添加name属性来确定唯一性。我们来试试
可以看到点了男再点女，就点击女;再点击男，就勾选了男，需求符合要求了。就是添加了name属性，当男女都有了radio属性且name一样时，ok了
看下代码展示:
<body>
<form>
用户名: <input type="text"> <br>
密码: <input type="password"> <br>
性别: 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br>
爱好: 学习<input type="checkbox"> 游戏<input type="checkbox">
吃饭<input type="checkbox"> <br>
</form>
</body>
如果再加一个radio，并且没有name的话，是不是还和之前一样呢？
可以看到，男女只能单选，但是人妖是可以再选的
看下代码:
性别: 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 人妖<input type="radio"> <br>
怎么才能和之前一样呢，只需要在人妖后面加上name属性标签
这样就可以了
性别: 男<input type="radio" name="sex">
女<input type="radio" name="sex"> 人妖<input type="radio" name="sex"> <br>
4.接下来我们看下value
name和value是每个表单元素都有的属性值，主要给后台人员使用。name表单元素的名字，要求 单选按钮和复选框，要有相同的name值
再说下checked和maxlength属性使用情况
规定此input元素首次加载时应当被选中，可以看到女和学习首次加载时被选中了。我们看下代码:
<form>
用户名: <input type="text"> <br>
密码: <input type="password"> <br>
性别: 男<input type="radio" name="sex">
女<input type="radio" name="sex" checked> 人妖<input type="radio" name="sex"> <br>
爱好: 学习<input type="checkbox" name="happy" checked> 游戏<input type="checkbox" name="happy">
吃饭<input type="checkbox" name="happy"> <br>
</form>
还有maxlength属性，我们也来试下
设置用户名的maxlength为2，则最多只能输入2个字符，看下代码展示
<body>
<form>
用户名: <input type="text" maxlength="2"> <br>
密码: <input type="password"> <br>
性别: 男<input type="radio" name="sex">
女<input type="radio" name="sex" checked> 人妖<input type="radio" name="sex"> <br>
爱好: 学习<input type="checkbox" name="happy" checked> 游戏<input type="checkbox" name="happy">
吃饭<input type="checkbox" name="happy"> <br>
</form>
</body>
maxlength设置下。
好的，今天就先到这里