溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html怎么實現(xiàn)表單的選擇框效果

發(fā)布時間：2020-09-14 14:54:00 來源：億速云 閱讀：327 作者：小新 欄目：web開發(fā)

小編給大家分享一下html怎么實現(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="">
		              你是否喜歡運動？<br />
		     <input type="radio" name="radio" value="喜歡"/>喜歡
		     <input type="radio" name="radio" value="不喜歡"/>不喜歡
		     <input type="radio" name="radio" value="無所謂"/>無所謂
		</form>
	</body>
</html>

效果圖：

html怎么實現(xiàn)表單的選擇框效果

從上例可以看出：

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

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

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

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

html怎么實現(xiàn)表單的選擇框效果

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

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

html復(fù)選框代碼 ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復(fù)選框</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怎么實現(xiàn)表單的選擇框效果

從上例可以看出：

當(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)表單的選擇框效果有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手