html如何實現表單的選擇框效果？單選框與多選框的實作（程式碼實例）
- 青灯夜游原創
- 2018-09-12 11:16:4517295瀏覽
在使用表單提交資料的時候，為了減少使用者的一些操作，使用選擇框是一個好主意。本章為大家介紹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>效果圖：
三、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如何實現表單的選擇框效果？單選框與多選框的實作（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn