零基础HTML入门教程(17)——表单的单选框和复选框
生活随笔
收集整理的這篇文章主要介紹了
零基础HTML入门教程(17)——表单的单选框和复选框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本章目錄
- 1.任務目標
- 2.單選框radio
- 3.復選框checkbox
- 4.小結
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里面單選框和復選框也很常用，我們要熟練使用。
總結
以上是生活随笔為你收集整理的零基础HTML入门教程(17)——表单的单选框和复选框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LTE模块连接网络调试助手（花生壳映射公
- 下一篇： Editor's comments: