html:(19):单选框，复选框，下拉列表框
生活随笔
收集整理的這篇文章主要介紹了
html:(19):单选框，复选框，下拉列表框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用單選框、復選框，讓用戶選擇
在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>1、type:
?? 當 type="radio" 時，控件為單選框
?? 當 type="checkbox" 時，控件為復選框
2、value：提交數據到服務器的值（后臺程序PHP使用）
3、name：為控件命名，以備后臺程序 ASP、PHP 使用
4、checked：當設置 checked="checked" 時，該選項被默認選中
如下面代碼：
注意：代碼中的<label>標簽在本章 5-9 中有講解。
在瀏覽器中顯示的結果：
注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
<!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><label>男</label><input type="radio" value="1" name="gender" /><label>女</label><input type="radio" value="2" name="gender" /> </form> </body> </html>運行結果
使用下拉列表框，節省空間
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：
講解：
1、value：
2、selected="selected"：
設置selected="selected"屬性，則該選項就被默認選中。
在瀏覽器中顯示的結果：
<!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='運動'>運動</option><option value='購物'>購物</option></select> </form> </body> </html>運行結果
總結
以上是生活随笔為你收集整理的html:(19):单选框，复选框，下拉列表框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 推荐一款数据恢复软件（迅龙数据恢复）
- 下一篇： java学习（34）：巩固练习