HTML 列表框

2025 年 3 月 25 日 | 阅读 3 分钟

列表框是 HTML 文档中的一个图形控制元素，允许用户从选项列表中选择一个或多个选项。HTML 列表框，也称为下拉列表或选择元素，提供了一种有用的方法，可以在网页上向客户端呈现选项列表。它们广泛用于表单，允许客户端从一组预定义的选择中选择一个或多个项目。在本文中，我们将探讨 HTML <select> 元素及其各种属性，以及说明其用途的实际示例。

语法

要创建列表框，请使用 HTML 元素 <select>，它包含两个属性 Name 和 Size。Name 属性用于定义调用列表框的名称，而 size 属性用于指定表示它包含多少个选项的数值。

<select Name="Name_of_list_box" Size="Number_of_options">
  <option> List item 1 </option>
  <option> List item 2 </option>
  <option> List item 3 </option>
  <option> List item N </option>
</select>

示例

示例 1： 考虑下面的示例，它创建一个简单的列表框。

代码

<!DOCTYPE html>  
<html>  
<title>
Example of List Box
</title>
<body>  
Customer Name:  <input type="text" Placeholder="Enter the Customer Name"/>
<br>
<br>
<select name="Cars" size="5">
    <option value="Merceders"> Merceders </option>
    <option value="BMW"> BMW </option>
    <option value="Jaguar"> Jaguar </option>
    <option value="Lamborghini"> Lamborghini </option>
    <option value="Ferrari"> Ferrari </option>
    <option value="Ford"> Ford </option>
</select>
</body>  
</html>  

输出

示例 2： 下面的示例使用多个属性来选择列表中的多个选项。我们可以通过按住 Ctrl 键从列表框中选择多个选项。

代码

<!DOCTYPE html>  
<html>  
<title>
Example of List Box with multiple attribute
</title>
<body>  
Customer Name:  <input type="text" Placeholder="Enter the Customer Name"/>
<br>
<br>
<select name="Cars" size="5" multiple="multiple">
    <option value="Merceders"> Merceders </option>
    <option value="BMW"> BMW </option>
    <option value="Jaguar"> Jaguar </option>
    <option value="Lamborghini"> Lamborghini </option>
    <option value="Ferrari"> Ferrari </option>
    <option value="Ford"> Ford </option>
</select>
</body>  
</html>  

输出

为 HTML 列表框添加样式

为 HTML 列表框设置样式可以改善 UI 并使其更具视觉吸引力。您可以使用 CSS 自定义下拉列表和所选项目的显示。在下面的模型中，<select> 元素具有固定的宽度、填充和无限的行半径，以创建干净且具有视觉吸引力的列表框。

代码

<style>
  select {
    width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>

<select>
  <option value = " option1 " > Option 1 </option>
  <option value = " option2 " > Option 2 </option>
  <option value = " option3 " > Option 3 </option>
</select>

处理 HTML 列表框事件

您可以通过处理更改事件等事件来捕获用户与列表框的交互。这允许您在客户端选择或更改选项时执行自定义操作。在此模型中，onchange 属性用于在客户端更改所选选项时调用 handleSelection 功能。

代码

<select id = " eventList " onchange = " handleSelection() ">
  <option value = " option1 " > Option 1 </option>
  <option value = " option2 " > Option 2 </option>
  <option value = " option3 " > Option 3 </option>
</select>

<script>
  function handleSelection() {
    var selectedOption = document.getElementById(" eventList ").value;
    alert(" Selected option : " + selectedOption );
  }
</script

结论

HTML 列表框是灵活的元素，在 Web 表单和 UI 中起着关键作用。了解其基本结构、启用多选、应用样式、动态填充选项以及处理事件将帮助您在 Web 应用程序中创建交互式且易于使用的下拉列表。探索这些指南以提升您的技能并创建有效的 UI。

下一主题将 JavaScript 添加到 HTML

HTML 列表框

语法

示例

为 HTML 列表框添加样式

处理 HTML 列表框事件

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 列表框

语法

示例

为 HTML 列表框添加样式

处理 HTML 列表框事件

结论

相关帖子

HTML 单选框标签

HTML 页眉图片

HTML 中的页眉和页脚

HTML 调查模板

Web 设计中的微交互

HTML 中的 ul 是什么意思

将 HTML 转换为 PDF

HTML 中的 Align 标签

如何在 HTML 中更改字体大小

哪个内联属性用于指定样式

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器