• 目录

input：checkbox标签

阅读量: 199 编辑

input：checkbox标签

网页中的复选框。

一、语法

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

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

  • checkbox 就是复选框

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

  • type属性：checkbox是多选、radio是单选

    • 多选 checkbox ，同时可以选择多个

    • 单选 radio ，只能选择一个。是通过 name 来限制的，如果 一组radio 的 name属性值是一样的，那么这一组中就只能选择一个

  • name属性：用于form表单提交

  • value属性：对应的值

  • checked属性：默认选中

二、代码实战

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

新建 html 文件 16-checkbox.html ，编写下方程序，运行看看效果吧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>checkbox</title>
    </head>
    
    <body>
        <form action="/submit.do" method="get" >
            编程语言：
            <label><input value="1" type="checkbox" name="program">JavaScript</label>
            <label><input value="2" type="checkbox" checked name="program">Java</label>
            <label><input value="3" type="checkbox" name="program">C</label>

            <br/>

            性别：
            <label><input value="1" type="radio" checked name="gender">男</label>
            <label><input value="2" type="radio" name="gender">女</label>

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