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> | 支持 | 支持 | 支持 | 支持 | 支持 |