本章目录
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里面单选框和复选框也很常用,我们要熟练使用。