HTML下拉列表

来源：恒创科技编辑：恒创科技编辑部

2024-04-15 01:30:40

HTML下拉列表是一种常见的用户界面元素，它允许用户从预定义的选项中选择一个或多个值，下拉列表通常由一个文本输入框和一个包含选项的列表组成，当用户点击文本输入框时，选项列表会展开，用户可以从中选择一个选项。

创建HTML下拉列表的基本步骤如下：

1、使用<select>标签创建一个下拉列表容器。

2、使用<option>标签为下拉列表添加选项。

3、使用<optgroup>标签将选项分组。

4、使用<label>标签为下拉列表添加描述性文本。

下面是一个简单的HTML下拉列表示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>HTML下拉列表示例</title>
</head>
<body>
<h2>选择你的职业：</h2>
<form>
  <label for="jobs">职业：</label>
  <select id="jobs" name="jobs">
    <optgroup label="IT行业">
      <option value="web_developer">Web开发工程师</option>
      <option value="software_engineer">软件工程师</option>
    </optgroup>
    <optgroup label="金融行业">
      <option value="financial_analyst">金融分析师</option>
      <option value="accountant">会计师</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="提交">
</form>
</body>
</html>

在这个示例中，我们创建了一个包含两个分组（IT行业和金融行业）的下拉列表，每个分组都有两个选项，我们还为下拉列表添加了一个描述性文本“职业：”。

本文地址：https://www.henghost.com/jishu/52497/