在使用表單提交資料的時候,為了減少使用者的一些操作,使用選擇框是一個好主意。本章為大家介紹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如何實現表單的選擇框效果?單選框與多選框的實作(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!