html:(19):单选框，复选框，下拉列表框
使用單選框、復(fù)選框，讓用戶選擇
在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。請(qǐng)看下面的例子:
語(yǔ)法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>1、type:
?? 當(dāng) type="radio" 時(shí)，控件為單選框
?? 當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框
2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
3、name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用
4、checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中
如下面代碼：
注意：代碼中的<label>標(biāo)簽在本章 5-9 中有講解。
在瀏覽器中顯示的結(jié)果：
注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>單選框、復(fù)選框</title> </head> <body> <form action="save.php" method="post" ><label>性別:</label><label>男</label><input type="radio" value="1" name="gender" /><label>女</label><input type="radio" value="2" name="gender" /> </form> </body> </html>運(yùn)行結(jié)果
使用下拉列表框，節(jié)省空間
下拉列表在網(wǎng)頁(yè)中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁(yè)空間。既可以單選、又可以多選。如下代碼：
講解：
1、value：
2、selected="selected"：
設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。
在瀏覽器中顯示的結(jié)果：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉列表框</title> </head> <body> <form action="save.php" method="post" ><label>愛好:</label><select><option value='看書'>看書</option><option value='旅游' selected="selected">旅游</option><option value='運(yùn)動(dòng)'>運(yùn)動(dòng)</option><option value='購(gòu)物'>購(gòu)物</option></select> </form> </body> </html>運(yùn)行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的html:(19):单选框，复选框，下拉列表框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 推荐一款数据恢复软件（迅龙数据恢复）
- 下一篇： java学习（34）：巩固练习