html怎么實現(xiàn)表單的選擇框效果-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比義烏網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式義烏網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋義烏地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

一、選擇框種類與語法

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

語法：

<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)表單的選擇框效果

從上例可以看出：

當type="radio"時，選擇框定義為單選框；

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

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

當設置 checked="checked" 時，該選項被默認選中,無論單選框還是復選框都可使用，如在單選框中：

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

三、html復選框樣式

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

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怎么實現(xiàn)表單的選擇框效果

從上例可以看出：

當type="checkbox"時，選擇框定義為復選框；

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

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

四、選擇框的name屬性

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

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

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

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

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

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

網(wǎng)站名稱：html怎么實現(xiàn)表單的選擇框效果-創(chuàng)新互聯(lián)
當前網(wǎng)址：http://muchs.cn/article26/cospjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、手機網(wǎng)站建設、軟件開發(fā)、服務器托管、全網(wǎng)營銷推廣、搜索引擎優(yōu)化

廣告

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

成都定制網(wǎng)站建設