HTML教程-HTML 列表框
列表框是 HTML 文档中的一个图形控件元素,用 <select> 标签包裹,允许用户从列表中选择一个或多个选项。
语法
要创建一个列表框,使用 <select> 元素,并设置两个属性:name 和 size。name 属性用于定义列表框的名称,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>浏览器支持
| 元素 | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<select> | 支持 | 支持 | 支持 | 支持 | 支持 |