单选框和复选框

单选框以及复选框的使用

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>单选框以及复选框的使用</title>  
</head>  
<body>  
    <form>  
        <!--单选框-->  
        <label>性别：</label>  
        <label>男</label>  
        <input type="radio" name="gender" value="man" />  
        <label>女</label>  
        <input type="radio" name="gender" value="woman" checked="checked"/>    <!--默认选中-->  
        <br/><br/>  
        <!--复选框-->  
        <label>爱好：</label>  
        <label>篮球</label>  
        <input type="checkbox" name="hobby" value="1" />  
        <label>足球</label>  
        <input type="checkbox" name="hobby" value="2" />  
        <label>跑步</label>  
        <input type="checkbox" name="hobby" value="3" checked="checked" />     <!--默认选中-->  
        <label>跳舞</label>  
        <input type="checkbox" name="hobby" value="4" />  
    </form>  
</body>  
</html>

type属性

radio：表示单选框
checkbox：表示多选框

value属性

提交数据到服务器的值（供后端程序使用）

name属性

为控件命名，以备后台程序ASP、PHP使用

checked属性

当设置checked=”checked”时，该选项被默认选中

结果显示如下图：

以上代码只有在点击选项后面的圆圈或者小方块的时候才能选中该选项，那么如何实现点击文字就选中选项呢？

点击文字选中选项

一般有两种实现方法，具体代码分别如下：

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>如何实现点击文字选中选项</title>  
</head>  
<body>  
    <form>  
        <!--第一种方法：把文字和input包含在lable标签中-->  
        <!--单选框-->  
        <label>性别：</label>  
        <label>男<input type="radio" name="gender" value="man" /></label>  
        <label>女<input type="radio" name="gender" value="woman" checked="checked"/></label>      <!--默认选中-->  
        <br/><br/>  
        <!--复选框-->  
        <label>爱好：</label>  
        <label>篮球<input type="checkbox" name="hobby" value="1" /></label>  
        <label>足球<input type="checkbox" name="hobby" value="2" /></label>  
        <label>跑步<input type="checkbox" name="hobby" value="3" checked="checked" /> </label>     <!--默认选中-->  
        <label>跳舞<input type="checkbox" name="hobby" value="4" /></label>  
        <!--第二种方法：文字在label标签内,input中的id和<label>标签内的for=""中的名字必须相同-->  
        <!--单选框-->  
        <label>性别：</label>  
        <label for="radio1">男</label>  
        <input type="radio" name="gender" value="man" id="radio1" />  
        <label for="radio2">女</label>  
        <input type="radio" name="gender" value="woman" id="radio2" checked="checked"/>    <!--默认选中-->  
        <br/><br/>  
        <!--复选框-->  
        <label>爱好：</label>  
        <label for="check1">篮球</label>  
        <input type="checkbox" name="hobby" value="1" id="check1" />  
        <label for="check2">足球</label>  
        <input type="checkbox" name="hobby" value="2" id="check2" />  
        <label for="check3">跑步</label>  
        <input type="checkbox" name="hobby" value="3" id="check3" checked="checked" />     <!--默认选中-->  
        <label for="check4">跳舞</label>  
        <input type="checkbox" name="hobby" value="4" id="check4" />  
    </form>  
</body>  
</html>