一、選擇框種類與語法
html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
二、html單選框樣式
html單選框代碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>單選框</title></head><body><form name="form" method="post" action=""> 你是否喜歡運動？<br /> <input type="radio" name="radio" value="喜歡"/>喜歡 <input type="radio" name="radio" value="不喜歡"/>不喜歡 <input type="radio" name="radio" value="無所謂"/>無所謂</form></body></html>
效果圖：
從上例可以看出：
當type="radio"時，選擇框定義為單選框；
name屬性： 定義單選按鈕的名稱，單選按鈕都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；
value屬性： 定義單選按鈕的值，在同一組中域值必須是不同。
當設置 checked="checked" 時，該選項被默認選中,無論單選框還是復選框都可使用，如在單選框中：
三、html復選框樣式
復選框主要是讓網頁瀏覽者在一組選項里可以同時選擇多個選項。每個復選框都是一個獨立的元素，都必須有唯一的一個名稱。
html復選框代碼 ：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>復選框</title></head><body><form name="form" method="post" action=""> 你喜歡什么運動？<br /> <input type="checkbox" name="checkbox" value="跑步" checked="checked"/>跑步 <input type="checkbox" name="checkbox" value="羽毛球"/>羽毛球 <input type="checkbox" name="checkbox" value="乒乓球"/>乒乓球 <input type="checkbox" name="checkbox" value="乒乓球"/>登山</form></body></html>
效果圖：
從上例可以看出：
當type="checkbox"時，選擇框定義為復選框；
name屬性： 定義復選框的名稱，在同一組中的復選框使用不同的名稱，但也可以定義為同一個名稱（數組），例：name[]；
value屬性：定義復選框的值，在同一組中域值必須是不同。
四、選擇框的name屬性
在HTML表單中，無論是一組單選按鈕（radio）還是一組復選框（checkbox）其中都要包含著name屬性。這是為了方便在處理頁面獲取表單傳遞的值。
一組單選按鈕（radio）：因為name屬性里的值是相同，所以只有一個能被選中，在處理頁面就直接獲取，如$_GET['name']；
一組復選框（checkbox）：一般將name屬性里的值設置為name[]，如果被選中，則在數組name[]中添加一個元素，在處理頁面將如下獲取值:
if(!empty($_POST['name'])){for($i=0; $i< count($_POST['name']); $i++){echo $array[$i].'<br />';}}這樣就可以收集到表單復選框（checkbox）里傳遞來的多個不同數據。
以上就是html如何實現表單的選擇框效果？單選框與多選框的實現（代碼實例）的詳細內容，更多請關注 其它相關文章！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
