• 目录

input:checkbox标签

阅读量: 734 编辑

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>


  • 目录