表单进阶（2）--复选框

叶不休

已于 2024-03-09 21:17:12 修改

阅读量387

点赞数 7

分类专栏：前端文章标签：前端 css html5 前端框架 windows xhtml

于 2024-02-25 22:08:48 首次发布

本文链接：https://blog.csdn.net/weixin_58694594/article/details/136288240

版权

前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

radio：单选框
checkbox：多选框
语法：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
type：选择是单选框 || 多选框
value：提交数据到服务器的值（暂时不懂）
name：1）单选框要求name属性值相同
2）多选框没有要求
3）checked：即checked="checked",认为该选项已经选中，用户不能操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>表单进阶-复选框（多选）</h1>
    <div>
        <div>抽烟喝酒默认选中：</div>
        <div>
            <input type="checkbox" name="aaa" checked>抽烟
            <input type="checkbox" name="aaa" checked>喝酒
            <input type="checkbox" name="aaa" >烫头
        </div>
    </div>

    <div>
        <div>你的擅长技术：</div>
        <div>
            <!-- 点击文字也可以选中用：lable -->
            <!-- type="radio"是圆圈，checkbox是方框 -->
            <input type="radio" name="bbb" id="html">
            <label for="html">html</label>
            <input type="checkbox" name="bbb" id="css">
            <label for="css">css</label>
            <input type="checkbox" name="bbb" id="js">
            <label for="js">js</label>
        </div>
    </div>
</body>
</html>

叶不休

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
表单进阶（2）--复选框

语法：3）checked：即checked="checked",认为该选项已经选中，用户不能操作。value：提交数据到服务器的值（暂时不懂）name：1）单选框要求name属性值相同。type：选择是单选框 || 多选框。checkbox：多选框（多选）radio：单选框（单选）
复制链接

扫一扫