选项标签是 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中文网其他相关文章!