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

小編給大家分享一下html怎么實(shí)現(xiàn)表單的選擇框效果，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)與策劃設(shè)計(jì),齊齊哈爾網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:齊齊哈爾等地區(qū)。齊齊哈爾做網(wǎng)站價(jià)格咨詢:18980820575

一、選擇框種類與語(yǔ)法

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

語(yǔ)法：

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

效果圖：

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

從上例可以看出：

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

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

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

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

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

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

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

html復(fù)選框代碼 ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復(fù)選框</title>
	</head>
	<body>
		<form name="form" method="post" action="">
		              你喜歡什么運(yùn)動(dòng)？<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怎么實(shí)現(xiàn)表單的選擇框效果

從上例可以看出：

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

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

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

四、選擇框的name屬性

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

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

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

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

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

看完了這篇文章，相信你對(duì)html怎么實(shí)現(xiàn)表單的選擇框效果有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)題目：html怎么實(shí)現(xiàn)表單的選擇框效果
文章出自：http://bm7419.com/article2/jdjsoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、企業(yè)建站、外貿(mào)建站、云服務(wù)器、網(wǎng)站營(yíng)銷、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名