HTML 中的选项标签

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

中使用标签。

语法与示例

以下语法可帮助我们确定选项标签在网页或 HTML 中的确切定义位置。

语法：

<select>
<option value=""> option1 </option>
<option value=""> option2 </option>
<option value=""> option3 </option>
<option value=""> option4 </option>
</select>

如上语法所示，是用于创建数据列表的标签。选择标签中包含的标签是选择列表的属性值或属性，该值将用于显示天气选项被选择、禁用或具有任何其他属性。 option1,2….将是名称。

在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

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

代码：

<title>Option tag in HTML</title>


<h4 id="List-of-IIT-colleges-in-INDIA">List of IIT colleges in INDIA</h4>

IIT Madras IIT Delhi IIT Bombay IIT  Kharagpur IIT Kanpur IIT Roorkee IIT Guwahati IIT Hyderabad IIT Indore IIT Bhubaneswar IIT Tirupati IIT Bhilai IIT Goa IIT Jammu IIT Dhanbad IIT Palakkad IIT Dharwad, Est

输出：

示例#2

显示的示例使用 selected、disabled、

等值的标签

代码：

<title>Option tag in HTML</title>


<h4 id="Select-your-favourite-Bakery-product-from-the-list">Select your favourite Bakery product from the list</h4>

Butterscotch Cake Dark Chocolate Cake Fruit Cake Rasmali Cake Cupcakes Veg Puff Anda Puff Crunchy Biscuits Chocolate Biscuits Choco Lava Cake White Bread Brown Bread Muffin Bread Roll Brownie Pastry Veg Grill Sandwich

输出：

示例#3

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

代码：

<h2 id="Top-IT-training-Institutes-in-Pune">Top IT training Institutes in Pune </h2>

ABCIS Learning MindScripts Technologies Sysap technologies IclassPune   IIHT Magneto Academy Certification Guru I Cert Global Technogeeks

Multiple options can be selected here. Press ctrl key and select multiple option from the list.

<script> function multipleFunc() { document.getElementById("multiselectopt").multiple = true; } </script>

输出：

结论

从以上所有信息中，我们得知选择列表中或数据列表中的标签负责根据用户选择选择选项。人们可以从下拉列表中选择一个或多个选项。如果列表中有多个选项，我们可以将其分为 组。元素。

以上是HTML 中的选项标签的详细内容。更多信息请关注PHP中文网其他相关文章！