小編給大家分享一下html怎么實現表單的選擇框效果，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
一、選擇框種類與語法
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怎么實現表單的選擇框效果有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
