零基础HTML入门教程(17)——表单的单选框和复选框

最新推荐文章于 2024-05-24 18:59:06 发布

程序员大宁

最新推荐文章于 2024-05-24 18:59:06 发布

阅读量3.5k

点赞数 2

分类专栏： HTML篇文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_61808806/article/details/128207891

版权

HTML篇专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本章目录

1.任务目标

我们上一小结学习了，密码输入框和文本输入框，我们这一小结学习复选框和单选框。

2.单选框radio

单选框用于从若干选项中选择其中一个，例如性别只能从男、女中选择一个：

<!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>Document</title>
</head>

<body>
  <form action="#" method="get">
    <b>性别</b>
    <br>
     <!--inout typr="radio"他表示单选框 ，就是只能选一个选项。必须带上name="sex"因为要不带上可以多选而且还不能取消-->
    <label><input type="radio" name="sex">男</label>
    <label> <input type="radio" name="sex" checked>女 </label> <!--checked他是在 inout typr="radio"里面用的代表默认值-->
</body>

</html>

效果如下
在这里插入图片描述

3.复选框checkbox

代码如下

<!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>Document</title>
</head>

<body>
  <form action="#" method="get">
    <b>新时代你的思想多选</b>
    <br>
     <!--inout typr="checkbox"他表示多选可以选多个，lable加上可以不用点那个框选择，点击图片或文字也可以选择，若不只能点击框选择-->
    <label> <input type="checkbox">坚持党的正确领导 </label>
    <label> <input type="checkbox">坚持三个代表重要思想 </label>
    <label> <input type="checkbox">坚持可持续发展观 </label>
    <label> <input type="checkbox">反对法律</label>

</html>

效果如下
在这里插入图片描述

4.小结

我们这一小节学习了单选框和复选框，我相信在大家，注册账号或者填写信息的时候很常见，在我们html里面单选框和复选框也很常用，我们要熟练使用。

程序员大宁

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
零基础HTML入门教程(17)——表单的单选框和复选框

我们上一小结学习了，密码输入框和文本输入框，我们这一小结学习复选框和单选框。单选框用于从若干选项中选择其中一个，例如性别只能从男、女中选择一个：效果如下代码如下效果如下我们这一小节学习了单选框和复选框，我相信在大家，注册账号或者填写信息的时候很常见，在我们html里面单选框和复选框也很常用，我们要熟练使用。
复制链接

扫一扫