選項(xiàng)標(biāo)籤是 HTML 中最有用的元素,它在下拉清單中用於從選擇清單中選擇特定的使用者首選項(xiàng)。一次,一個(gè)使用者可以從給定清單中選擇一個(gè)或多個(gè)選項(xiàng)。這是 HTML 中選項(xiàng)標(biāo)籤的主要好處。 元素始終包含在
語法與範(fàn)例
以下語法可協(xié)助我們確定選項(xiàng)標(biāo)籤在網(wǎng)頁或 HTML 中的確切定義位置。
文法:
<select>
<option value=""> option1 </option>
<option value=""> option2 </option>
<option value=""> option3 </option>
<option value=""> option4 </option>
</select>
如上語法所示,是用來建立資料清單的標(biāo)籤。
在CSS的幫助下,我們可以賦予我們的選擇清單效果,能夠設(shè)定相對、絕對等位置,能夠設(shè)定寬度並執(zhí)行許多其他功能。下拉清單的位置定義為兩個(gè)值,相對位置用於在選擇清單按鈕正下方顯示清單內(nèi)容。借助位置:絕對;
範(fàn)例:
這將限制使用者從選擇清單中選擇單一選項(xiàng)。
<select name="State">
<option value="MH">Maharashtra</option>
<option value="GJ"> Gujarat </option>
<option value="MP"> Madhya Pradesh </option>
<option value="RJ">Rajasthan </option>
<option value="AP">Andhra Pradesh </option>
</select>
同樣,眾所周知,我們也可以在選擇清單中根據(jù)選擇選擇多個(gè)選項(xiàng)。
文法:
<select multiple>
<option value=""> option1 </option>
<option value=""> option2 </option>
<option value=""> option3 </option>
<option value=""> option4 </option>
</select>
相同語法的例子如下:
<select name="laptops" multiple>
<option value="hp">HP</option>
<option value="dell">Dell</option>
<option value="lv">Lenovo</option>
<option value="sony">Sony </option>
</select>
HTML 中 Option 標(biāo)籤的屬性
;標(biāo)籤支援的具體屬性如下:
-
disabled: 此屬性用於設(shè)定布林值,形式為 true 和 false。如果設(shè)定為 true,則清單中的選項(xiàng)將被停用;否則為假。
-
label: 假設(shè)我們想給一些文字作為標(biāo)籤,那麼可以將其放入選項(xiàng)標(biāo)籤中。它將被視為該元素的值。
-
selected:在網(wǎng)頁設(shè)計(jì)中,有些情況下我們希望在顯示視圖中顯示已選取的選項(xiàng)。因此,透過為選項(xiàng)設(shè)定選定的屬性,可以在清單中顯示選定的選項(xiàng)。只能顯示清單中選定的一項(xiàng)。
-
值:也可以為選擇清單中的選項(xiàng)設(shè)定值。
?選項(xiàng)?HTML 中的標(biāo)記
範(fàn)例
以下是 HTML 中選項(xiàng)標(biāo)籤的不同範(fàn)例:
範(fàn)例#1
這是選擇清單的簡單範(fàn)例,包括
代碼:
<!DOCTYPE html>
<html>
<head>
<title>Option tag in HTML</title>
</head>
<body>
<h4>List of IIT colleges in INDIA</h4>
<form>
<select name = "dropdown">
<option value = "im" >IIT Madras</option>
<option value = "id" >IIT Delhi</option>
<option value = "ib" >IIT Bombay </option>
<option value = "ikh" >IIT? Kharagpur</option>
<option value = "ikn">IIT Kanpur</option>
<option value = "ir" >IIT Roorkee</option>
<option value = "ig" >IIT Guwahati</option>
<option value = "ih">IIT Hyderabad </option>
<option value = "ii">IIT Indore</option>
<option value = "ib">IIT Bhubaneswar</option>
<option value = "it" >IIT Tirupati</option>
<option value = "ib">IIT Bhilai</option>
<option value = "ig">IIT Goa</option>
<option value = "ij" >IIT Jammu</option>
<option value = "idb">IIT Dhanbad </option>
<option value = "ip">IIT Palakkad</option>
<option value = "idhe">IIT Dharwad, Est</option>
</select>
</form>
</body>
</html>
輸出:

範(fàn)例#2
顯示的範(fàn)例使用 selected、disabled、
等值的標(biāo)籤
代碼:
<!DOCTYPE html>
<html>
<head>
<title>Option tag in HTML</title>
</head>
<body>
<h4>Select your favourite Bakery product from the list</h4>
<form>
<select name = "dropdown">
<optgroup label="Cakes">
<option value = "BS" >Butterscotch Cake</option>
<option value = "DC" >Dark Chocolate Cake</option>
<option value = "FC" >Fruit Cake</option>
<option value = "RC" >Rasmali Cake</option>
</optgroup>
<option value = "cc">Cupcakes</option>
<option value = "vp" required>Veg Puff</option>
<option value = "ap" disabled>Anda Puff</option>
<option value = "cb">Crunchy Biscuits </option>
<option value = "cob">Chocolate Biscuits</option>
<option value = "clc">Choco Lava Cake</option>
<option value = "wb" >White Bread</option>
<option value = "bb">Brown Bread</option>
<option value = "mf" selected>Muffin</option>
<option value = "br" >Bread Roll</option>
<option value = "bw">Brownie </option>
<option value = "ps">Pastry</option>
<option value = "vgs">Veg Grill Sandwich</option>
</select>
</form>
</body>
</html>
輸出:

範(fàn)例#3
在此範(fàn)例中,我們將從資料清單中選擇多個(gè)選項(xiàng)。
代碼:
<!DOCTYPE html>
<html>
<body>
<h2>Top IT training Institutes in Pune </h2>
<form id="multidd">
<select id="multiselectopt">
<option> ABCIS Learning </option>
<option> MindScripts Technologies </option>
<option> Sysap technologies </option>
<option> IclassPune</option>
<option>? IIHT</option>
<option> Magneto Academy </option>
<option> Certification Guru </option>
<option> I Cert Global </option>
<option> Technogeeks </option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here. Press ctrl key and select multiple option from the list.</p>
<script>
function multipleFunc() {
document.getElementById("multiselectopt").multiple = true;
}
</script>
</body>
</html>
輸出:

結(jié)論
從以上所有資訊中,我們得知
以上是HTML 中的選項(xiàng)標(biāo)籤的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!