HTML教程
HTML5教程
HTML参考手册

HTML中如何使用下拉列表?

HTML列表框

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

语法

要创建列表框,请使用HTML元素 <select> ,其中包含两个属性 Name Size Name 属性用于定义调用列表框的名称,而 size 属性用于指定显示其包含多少选项的数值。
<select Name="Name_of_list_box" Size="Number_of_options">
  <option> 选项 1 </option>
  <option> 选项 2 </option>
  <option> 选项 3 </option>
  <option> 选项 N </option>
</select>

示例:

示例1:请考虑以下创建简单列表框的示例。
<!DOCTYPE html>
<html>
<title>下拉选项示例</title>
<body>
选项: <input type="text" Placeholder="请选择..."/>
<br>
<br>
<select name="selectName" size="5">
    <option value="1"> 选项 1 </option>
    <option value="2"> 选项 2 </option>
    <option value="3"> 选项 3 </option>
    <option value="4"> 选项 4 </option>
    <option value="5"> 选项 5 </option>
    <option value="6"> 选项 6 </option>
</select>
</body>
</html>
输出:
 HTML列表框
示例2:以下示例使用 multiple 属性在列表中选择多个选项。我们可以按住ctrl键从列表框中选择多个选项。
<!DOCTYPE html>
<html>
<title>下拉列表多项选择示例</title>
<body>
选项: <input type="text" Placeholder="请选择..."/>
<br>
<br>
<select name="selectName" size="5" multiple="multiple">
    <option value="1"> 选项 1 </option>
    <option value="2"> 选项 2 </option>
    <option value="3"> 选项 3 </option>
    <option value="4"> 选项 4 </option>
    <option value="5"> 选项 5 </option>
    <option value="6"> 选项 6 </option>
</select>
</body>
</html>
输出:
 HTML列表框
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4