HTML 中的下拉列表

HTML 中的下拉列表是构建表单或显示选择列表的重要元素，用户可以从中选择一个或多个值。 HTML 中的这种选择列表称为下拉列表。它是使用 创建的带有 的标签价值。它允许用户根据自己的选择选择任何选项。当您知道选项值时，使用下拉列表始终是一个好习惯，以便可以将任何值设置为默认属性，而其他值将作为选项值。

HTML 中下拉列表的语法

让我们看看如何创建下拉列表：

语法：

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

示例：

<select name="color">
<option value="red">Red</option>
<option value="purple">Purple </option>
</select>

如上面的语法所示，是用于创建下拉列表的标签。 select 标签中包含的标签是选择列表的一个或多个属性值，该值将用于显示该选项是否被选中、禁用或具有任何其他属性。option1,2...将是名称。在 CSS 的帮助下，我们可以为选择列表添加效果，能够设置相对、绝对等位置，能够设置宽度并执行许多其他功能。

使用代码设置背景颜色或悬停颜色：

.dropdown a:hover{
Background-color: color_name;
}

下拉列表的位置定义为两个值： 位置：用于在选择列表按钮正下方显示列表内容的相对值。借助位置：绝对；

Min-width 是用于为下拉列表指定特定宽度的属性之一。我们可以通过将宽度设置为100%来将其设置为与我们的下拉按钮一样长。上述语法是针对单个属性选择而定义的；现在，我们将看到如何从项目列表中选择多个选项。

语法：

<select multiple>
<option value="">option1</option>
<option value="">option2</option>
</select>

示例：

<select name="subject" multiple>
<option value="math">Math</option>
<option value="english">English</option>
<option value="science">Science</option>
<option value="biology">Biology</option>
</select>

下拉列表在 HTML 中如何工作？

现在学习语法后，我们将了解下拉列表在 HTML 中到底如何工作。 中使用了一些属性。标签，如下：

1. 名称：此属性有助于为控件分配名称，该名称将发送到服务器进行识别并获取所需的值。
2. Multiple：如果属性设置为“multiple”，则用户可以从选择列表中选择多个值。
3. Size： size 属性用于定义下拉列表周围特定大小的滚动框。它对于显示列表中的几个可见选项也很有帮助。
4. 值：此属性将显示选择列表中的一个选项被选中。
5. 选定的属性在页面加载的最开始点启用，以显示列表中已选择的列表项。
6. 标签：标签属性是标记选项值的另一种方法。
7. 禁用：如果我们想显示带有禁用选项的下拉列表，可以在 HTML 选择列表中使用禁用属性。
8. onChange：每当用户要从下拉列表中选择任何选项时，都会在选择项目时触发该事件。
9. onFocus：每当用户将鼠标悬停在选择列表上以从列表中选择一个选项时，都会触发一个事件来选择该项目。
10. 表单：该属性用于定义与选择字段相关的一个或多个表单。
11. 禁用：我们应该借助此属性来保持下拉列表对用户禁用。
12. required：每当填写某些表单时，我们希望表明在实际发送表单之前，需要此字段从其列表中选择任何值，因此在这种情况下，我们定义用户需要从列表中选择任意一个值。

HTML 代码示例

以下示例将展示下拉列表的具体使用方式：

示例#1

代码：

<title>DropDown List</title>


<h4 id="Seven-Wonders-of-the-world">Seven Wonders of the world</h4>

Taj Mahal Great Wall of China Christ the Redeemer Satue Machu Picchu Chichen Itza The Roman Colosseum Petra

上面的示例包含不同的选项，如禁用、选定、必需等，这些选项显示在输出屏幕中。 

输出：

示例#2

代码：

Mumbai Pune Nagpur Solapur Latur

Multiple options can be selected here .Please press ctrl key and select multiple options at a time.

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

如下图所示，从下拉列表中选择多个选项，按给定按钮并按 CTRL 键选择多个选项。

输出：

示例 #3

代码：

<style>
.dropdownbtn {
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color: darkblue;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: blue;}
</style>


<h2 id="Hover-Dropdown-Demo">Hover Dropdown Demo</h2>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Links</a>
<a href="#">Dropdown list</a>
<a href="#">Input Field</a>
<a href="#">Button</a>
<a href="#">Radio Buttons</a>
</div>
</div>

下拉列表将在悬停效果上打开。

输出：

结论

我们可以得出结论，下拉列表用于从选择列表中选择一个选项。它用于一次选择单个或多个选项。用户可以根据自己的选择从列表中选择一个选项，因此变得更加用户友好。上面列出的属性与选择标签一起使用，以通过下拉列表执行各种选择操作。

推荐文章

这是 HTML 中的下拉列表指南。在这里，我们讨论下拉列表如何在 HTML 中工作及其代码实现示例。您还可以浏览我们的其他相关文章以了解更多信息 –

1. HTML 样式属性
2. HTML 的 10 大优势
3. HTML 框架
4. HTML 布局

以上是HTML 中的下拉列表的详细内容。更多信息请关注PHP中文网其他相关文章！