HTML 中的下拉列表
- 王林原创
- 2024-09-04 16:38:38570浏览
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>
如上面的语法所示，是用于创建下拉列表的标签。
使用代码设置背景颜色或悬停颜色：
.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 中到底如何工作。
- 名称：此属性有助于为控件分配名称，该名称将发送到服务器进行识别并获取所需的值。
- Multiple：如果属性设置为“multiple”，则用户可以从选择列表中选择多个值。
- Size： size 属性用于定义下拉列表周围特定大小的滚动框。它对于显示列表中的几个可见选项也很有帮助。
- 值：此属性将显示选择列表中的一个选项被选中。
- 选定的属性在页面加载的最开始点启用，以显示列表中已选择的列表项。
- 标签：标签属性是标记选项值的另一种方法。
- 禁用：如果我们想显示带有禁用选项的下拉列表，可以在 HTML 选择列表中使用禁用属性。
- onChange：每当用户要从下拉列表中选择任何选项时，都会在选择项目时触发该事件。
- onFocus：每当用户将鼠标悬停在选择列表上以从列表中选择一个选项时，都会触发一个事件来选择该项目。
- 表单：该属性用于定义与选择字段相关的一个或多个表单。
- 禁用：我们应该借助此属性来保持下拉列表对用户禁用。
- required：每当填写某些表单时，我们希望表明在实际发送表单之前，需要此字段从其列表中选择任何值，因此在这种情况下，我们定义用户需要从列表中选择任意一个值。
HTML 代码示例
以下示例将展示下拉列表的具体使用方式：
示例#1
代码：
<head> <title>DropDown List</title> </head> <body> <h4>Seven Wonders of the world</h4> <form> <select name = "dropdown"> <option value = "taj" selected>Taj Mahal</option> <option value = "china">Great Wall of China</option> <option value = "chirst" required>Christ the Redeemer Satue</option> <option value = "machu" disabled>Machu Picchu</option> <option value = "chichen">Chichen Itza</option> <option value = "colossem">The Roman Colosseum</option> <option value = "petra">Petra</option> </select> </form> </body>
上面的示例包含不同的选项，如禁用、选定、必需等，这些选项显示在输出屏幕中。
输出：
示例#2
代码：
<html>
<body>
<form id="dropdowndemo">
<select id="multiselectdd">
<option>Mumbai</option>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
<option>Latur</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here .Please press ctrl key and select multiple options at a time. </p>
<script>
function multipleFunc() {
document.getElementById("multiselectdd").multiple = true;
}
</script>
</body>
</html>
如下图所示，从下拉列表中选择多个选项，按给定按钮并按 CTRL 键选择多个选项。
输出：
示例 #3
代码：
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>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>
</body>
</html>
下拉列表将在悬停效果上打开。
输出：
结论
我们可以得出结论，下拉列表用于从选择列表中选择一个选项。它用于一次选择单个或多个选项。用户可以根据自己的选择从列表中选择一个选项，因此变得更加用户友好。上面列出的属性与选择标签一起使用，以通过下拉列表执行各种选择操作。
推荐文章
这是 HTML 中的下拉列表指南。在这里，我们讨论下拉列表如何在 HTML 中工作及其代码实现示例。您还可以浏览我们的其他相关文章以了解更多信息 –
- HTML 样式属性
- HTML 的 10 大优势
- HTML 框架
- HTML 布局
以上是HTML 中的下拉列表的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn