一、選擇框種類與語法

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如何實現表單的選擇框效果？單選框與多選框的實現（代碼實例）的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。