checkbox 的使用

阅读量: 140 编辑

checkbox 的使用

一、语法

  • checkbox 就是复选框

  • 比如网站上常用选择 爱好 的时候,通常可以勾选多个,这个勾选的就是 checkbox

  • chckbox 其实是用 <input type="checkbox" name="myck"> 来实现的,同时可以选择多个

  • 单选框 radio 也是通过 <input type="radio" name="myrd"> 来实现的,但是同时只能选择一个

  • 他们是通过 name 属性来限制的,比如 radio ,如果 一组radioname属性值 是一样的,那么这一组中就只能选择一个

<label> <input type="checkbox" value="1">Java</label>

<label> <input type="radio" value="1">Java</label>

二、代码实战

代码的详细解读,可以参考视频教程

文件:15.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>checkbox</title>
    </head>
    <body>
        <form method="get" action="http://localhost:8080/xxx.do" enctype="multipart/form-data">
            <ul>
                <li><input name="myname" value="zhangsan" ></li>
                
                <!-- checkbox -->
                <li>
                    <label> <input type="checkbox" name="mycheckbox" value="1">Java</label>
                    <label> <input type="checkbox" name="mycheckbox" value="2">Python</label>
                    <label> <input type="checkbox" name="mycheckbox" value="3">JavaScript</label>
                </li>
                
                <!-- radio -->
                <li>
                    <label> <input type="radio" name="myradio" value="1">初中</label>
                    <label> <input type="radio" name="myradio" value="2">高中</label>
                    <label> <input type="radio" name="myradio" value="3">大学</label>
                </li>
                
            </ul>

            <button type="submit">提交</button>
        </form>
        
    </body>
</html>