列表框是 HTML 文档中的一个图形控件元素,用 <select> 标签包裹,允许用户从列表中选择一个或多个选项。

语法

要创建一个列表框,使用 <select> 元素,并设置两个属性:namesizename 属性用于定义列表框的名称,size 属性用于指定列表框中显示的选项数量。

<select name="列表框名称" size="选项数量">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项N</option>
</select>

示例:

示例 1: 下面是一个创建简单列表框的示例。

<!DOCTYPE html>
<html>
<head>
  <title>列表框示例</title>
</head>
<body>
  客户名称: <input type="text" placeholder="请输入客户名称"><br><br>
  <select name="Cars" size="5">
    <option value="Mercedes">奔驰</option>
    <option value="BMW">宝马</option>
    <option value="Jaguar">捷豹</option>
    <option value="Lamborghini">兰博基尼</option>
    <option value="Ferrari">法拉利</option>
    <option value="Ford">福特</option>
  </select>
</body>
</html>

示例 2: 下面是一个使用 multiple 属性的示例,可以选择列表中的多个选项。在列表框中按住 Ctrl 键可以选择多个选项。

<!DOCTYPE html>
<html>
<head>
  <title>带有 multiple 属性的列表框示例</title>
</head>
<body>
  客户名称: <input type="text" placeholder="请输入客户名称"><br><br>
  <select name="Cars" size="5" multiple="multiple">
    <option value="Mercedes">奔驰</option>
    <option value="BMW">宝马</option>
    <option value="Jaguar">捷豹</option>
    <option value="Lamborghini">兰博基尼</option>
    <option value="Ferrari">法拉利</option>
    <option value="Ford">福特</option>
  </select>
</body>
</html>

浏览器支持

元素ChromeIEFirefoxOperaSafari
<select>支持支持支持支持支持

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML面试题, HTML笔试题, HTML编程思想