選項標籤是 HTML 中最有用的元素，它在下拉清單中用於從選擇清單中選擇特定的使用者首選項。一次，一個使用者可以從給定清單中選擇一個或多個選項。這是 HTML 中選項標籤的主要好處。 元素始終包含在
以下語法可協助我們確定選項標籤在網頁或 HTML 中的確切定義位置。
文法：
<select> <option value=""> option1 </option> <option value=""> option2 </option> <option value=""> option3 </option> <option value=""> option4 </option> </select>
如上語法所示，是用來建立資料清單的標籤。
在CSS的幫助下，我們可以賦予我們的選擇清單效果，能夠設定相對、絕對等位置，能夠設定寬度並執行許多其他功能。下拉清單的位置定義為兩個值，相對位置用於在選擇清單按鈕正下方顯示清單內容。借助位置：絕對;
範例：
這將限制使用者從選擇清單中選擇單一選項。
<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>
同樣，眾所周知，我們也可以在選擇清單中根據選擇選擇多個選項。
文法：
<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 中選項標籤的不同範例：
這是選擇清單的簡單範例，包括
代碼：
<!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>
輸出：
顯示的範例使用 selected、disabled、
等值的標籤代碼：
<!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>
輸出：
在此範例中，我們將從資料清單中選擇多個選項。
代碼：
<!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>輸出：
從以上所有資訊中，我們得知
以上是HTML 中的選項標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
