明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html如何完成表單的選擇框效果？單選框與多選框的完成（代碼案例）

發(fā)表時間：2023-09-01 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]在使用表單提交數(shù)據(jù)的時候，為了減少用戶的一些操作，使用選擇框是一個好主意。本章給大家介紹html如何實現(xiàn)表單的選擇框效果？單選框與復(fù)選框的實現(xiàn)（代碼實例）。通過單選框代碼和復(fù)選框代碼實例，實現(xiàn)單選框樣式和多選框樣式，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。一、選擇框種類與語法...
在使用表單提交數(shù)據(jù)的時候，為了減少用戶的一些操作，使用選擇框是一個好主意。本章給大家介紹html如何實現(xiàn)表單的選擇框效果？單選框與復(fù)選框的實現(xiàn)（代碼實例）。通過單選框代碼和復(fù)選框代碼實例，實現(xiàn)單選框樣式和多選框樣式，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、選擇框種類與語法

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

語法：

<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)動？<br />
		     <input type="radio" name="radio" value="喜歡"/>喜歡
		     <input type="radio" name="radio" value="不喜歡"/>不喜歡
		     <input type="radio" name="radio" value="無所謂"/>無所謂
		</form>
	</body>
</html>

效果圖：

1.jpg

從上例可以看出：

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

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

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

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

2.jpg

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

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

html復(fù)選框代碼 ：

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

效果圖：

3.jpg

從上例可以看出：

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

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

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

四、選擇框的name屬性

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

一組單選按鈕（radio）：因為name屬性里的值是相同，所以只有一個能被選中，在處理頁面就直接獲取，如$_GET['name']；

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

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

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

以上就是html如何實現(xiàn)表單的選擇框效果？單選框與多選框的實現(xiàn)（代碼實例）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。