HTML 中的选项标签-html教程-PHP中文网

语法与示例

HTML 中 Option 标签的属性

示例#3

结论

首页

web前端

html教程

HTML 中的选项标签

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:24 PM

html html5 HTML Tutorial HTML Properties HTML tags

选项标签是 HTML 中最有用的元素，它在下拉列表中用于从选择列表中选择特定的用户首选项。一次，一个用户可以从给定列表中选择一个或多个选项。这是 HTML 中选项标签的主要好处。 <选项>元素始终包含在元素，而对于多个选项选择，我们可以使用 HTML 的一个名为的属性，无论用户要通过脚本调用 datalist 或将数据发送到服务器，然后

语法与示例

以下语法可帮助我们确定选项标签在网页或 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 中 Option 标签的属性

;标签支持的具体属性如下：

disabled: 该属性用于设置布尔值，形式为 true 和 false。如果设置为 true，则列表中的选项将被禁用；否则为假。
label: 假设我们想给一些文本作为标签，那么可以将其放入选项标签中。它将被视为该元素的值。
selected:在网页设计中，有些情况下我们希望在显示视图中显示已经选中的选项。因此，通过为选项设置选定的属性，可以在列表中显示选定的选项。只能显示列表中选定的一项。
值：还可以为选择列表中的选项设置值。

选项 HTML 中的标记

示例

以下是 HTML 中选项标签的不同示例：

示例#1

这是选择列表的简单示例，包括

代码：

<!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>

登录后复制

输出：

HTML 中的选项标签

示例#2

显示的示例使用 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>

登录后复制

输出：

HTML 中的选项标签

示例#3

在此示例中，我们将从数据列表中选择多个选项。

代码：

<!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 中的选项标签