首頁  >  文章  >  web前端  >  html如何實現表單的選擇框效果?單選框與多選框的實作(程式碼實例)

html如何實現表單的選擇框效果?單選框與多選框的實作(程式碼實例)

青灯夜游
青灯夜游原創
2018-09-12 11:16:4517258瀏覽

在使用表單提交資料的時候,為了減少使用者的一些操作,使用選擇框是一個好主意。本章為大家介紹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如何實現表單的選擇框效果?單選框與多選框的實作(程式碼實例)

從上例可以看出:

當type="radio"時,選擇框定義為單選框;

name屬性: 定義單選按鈕的名稱,單選按鈕都是以群組為單位使用的,在同一組中的單選項都必須用同一個名稱;

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

當設定checked="checked" 時,該選項被預設選取,無論單選框或複選框都可使用,如在單選框中:

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>

效果圖:


html如何實現表單的選擇框效果?單選框與多選框的實作(程式碼實例)

#從上例可以看出:

當type="checkbox"時,選擇框定義為複選框;

name屬性: 定義複選框的名稱,在同一組中的複選框使用不同的名稱,但也可以定義為同一個名稱(陣列),例:name[];

value屬性:定義複選框的值,在同一組中域值必須是不同。

四、選擇框的name屬性

在HTML表單中,無論是一組單選按鈕(radio)或是一組複選框(checkbox)其中都要包含name屬性。這是為了方便在處理頁面取得表單傳遞的值。

一組單選按鈕(radio):因為name屬性裡的值是相同,所以只有一個能被選中,在處理頁面就直接獲取,如$_GET['name'];

一組複選框(checkbox):一般將name屬性裡的值設為name[],如果被選中,則在陣列name[]中新增一個元素,在處理頁面將如下取得值:

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

這樣就可以收集到表單複選框(checkbox)裡傳遞來的多個不同資料。

以上是html如何實現表單的選擇框效果?單選框與多選框的實作(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn