input：checkbox标签

鹤川

发布于 2023-03-21 21:43:32

9900

发布于 2023-03-21 21:43:32

文章被收录于专栏：鹤川博客鹤川博客

input：checkbox标签

网页中的复选框。

一、语法

<label><inputtype="checkbox"value="1">Java</label>

<label><inputtype="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>
<htmllang="en">
    <head>
        <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <title>checkbox</title>
    </head>
  
    <body>
        <formaction="/submit.do"method="get">
            编程语言：
            <label><inputvalue="1"type="checkbox"name="program">JavaScript</label>
            <label><inputvalue="2"type="checkbox"checkedname="program">Java</label>
            <label><inputvalue="3"type="checkbox"name="program">C</label>

            <br/>

            性别：
            <label><inputvalue="1"type="radio"checkedname="gender">男</label>
            <label><inputvalue="2"type="radio"name="gender">女</label>

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023 年 02 月，如有侵权请联系 cloudcommunity@tencent.com 删除

网站