一、選擇框種類與語(yǔ)法

html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。

語(yǔ)法：

 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=  你是否喜歡運(yùn)動(dòng)？ br /  input type= radio name= radio value= 喜歡 / 喜歡 input type= radio name= radio value= 不喜歡 / 不喜歡 input type= radio name= radio value= 無(wú)所謂 / 無(wú)所謂 /form  /body  /html 

效果圖：

從上例可以看出：

當(dāng)type= radio 時(shí)，選擇框定義為單選框；

name屬性： 定義單選按鈕的名稱，單選按鈕都是以組為單位使用的，在同一組中的單選項(xiàng)都必須用同一個(gè)名稱；

value屬性： 定義單選按鈕的值，在同一組中域值必須是不同。

當(dāng)設(shè)置 checked= checked 時(shí)，該選項(xiàng)被默認(rèn)選中,無(wú)論單選框還是復(fù)選框都可使用，如在單選框中：

三、html復(fù)選框樣式

復(fù)選框主要是讓網(wǎng)頁(yè)瀏覽者在一組選項(xiàng)里可以同時(shí)選擇多個(gè)選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有唯一的一個(gè)名稱。

html復(fù)選框代碼 ：

 !DOCTYPE html  html  head  meta charset= UTF-8  title 復(fù)選框 /title  /head  body  form name= form method= post action=  你喜歡什么運(yùn)動(dòng)？ 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 

效果圖：

從上例可以看出：

當(dāng)type= checkbox 時(shí)，選擇框定義為復(fù)選框；

name屬性： 定義復(fù)選框的名稱，在同一組中的復(fù)選框使用不同的名稱，但也可以定義為同一個(gè)名稱（數(shù)組），例：name[]；

value屬性：定義復(fù)選框的值，在同一組中域值必須是不同。

四、選擇框的name屬性

在HTML表單中，無(wú)論是一組單選按鈕（radio）還是一組復(fù)選框（checkbox）其中都要包含著name屬性。這是為了方便在處理頁(yè)面獲取表單傳遞的值。

一組單選按鈕（radio）：因?yàn)閚ame屬性里的值是相同，所以只有一個(gè)能被選中，在處理頁(yè)面就直接獲取，如$_GET[ name ]；

一組復(fù)選框（checkbox）：一般將name屬性里的值設(shè)置為name[]，如果被選中，則在數(shù)組name[]中添加一個(gè)元素，在處理頁(yè)面將如下獲取值:

if(!empty($_POST[ name ])){for($i=0; $i count($_POST[ name $i++){echo $array[$i]. br / }

這樣就可以收集到表單復(fù)選框（checkbox）里傳遞來(lái)的多個(gè)不同數(shù)據(jù)。

以上就是html如何實(shí)現(xiàn)表單的選擇框效果？單選框與多選框的實(shí)現(xiàn)（代碼實(shí)例）的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。