零基础HTML入门教程(17)——表单的单选框和复选框
生活随笔
收集整理的這篇文章主要介紹了
零基础HTML入门教程(17)——表单的单选框和复选框
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本章目錄
- 1.任務(wù)目標(biāo)
- 2.單選框radio
- 3.復(fù)選框checkbox
- 4.小結(jié)
1.任務(wù)目標(biāo)
我們上一小結(jié)學(xué)習(xí)了，密碼輸入框和文本輸入框，我們這一小結(jié)學(xué)習(xí)復(fù)選框和單選框。
2.單選框radio
單選框用于從若干選項(xiàng)中選擇其中一個(gè)，例如性別只能從男、女中選擇一個(gè)：
<!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"他表示單選框 ，就是只能選一個(gè)選項(xiàng)。必須帶上name="sex"因?yàn)橐粠峡梢远噙x而且還不能取消--><label><input type="radio" name="sex">男</label><label> <input type="radio" name="sex" checked>女 </label> <!--checked他是在 inout typr="radio"里面用的代表默認(rèn)值--> </body></html>效果如下
3.復(fù)選框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>新時(shí)代你的思想多選</b><br><!--inout typr="checkbox"他表示多選可以選多個(gè)，lable加上可以不用點(diǎn)那個(gè)框選擇，點(diǎn)擊圖片或文字也可以選擇，若不只能點(diǎn)擊框選擇--><label> <input type="checkbox">堅(jiān)持黨的正確領(lǐng)導(dǎo) </label><label> <input type="checkbox">堅(jiān)持三個(gè)代表重要思想 </label><label> <input type="checkbox">堅(jiān)持可持續(xù)發(fā)展觀 </label><label> <input type="checkbox">反對(duì)法律</label></html>效果如下
4.小結(jié)
我們這一小節(jié)學(xué)習(xí)了單選框和復(fù)選框，我相信在大家，注冊(cè)賬號(hào)或者填寫(xiě)信息的時(shí)候很常見(jiàn)，在我們html里面單選框和復(fù)選框也很常用，我們要熟練使用。
總結(jié)
以上是生活随笔為你收集整理的零基础HTML入门教程(17)——表单的单选框和复选框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： LTE模块连接网络调试助手（花生壳映射公
- 下一篇： 直接用TXT文档写HTML编码出现中文乱