HTML 下拉列表选项

介绍

HTML <option> 标签用于在 HTML 表单的下拉列表中定义选项。它与 <select> 标签及其变体（如 <datalist> 和 <optgroup>）一起使用。该标签帮助用户从一系列选项中进行选择。本实验将指导你如何使用 <option> 标签实现一个 HTML 下拉列表。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

创建一个 元素

在你喜欢的文本编辑器中创建一个名为 index.html 的 HTML 文件。

首先创建一个基本的 HTML 表单：

<form></form>

创建一个 元素并添加选项

在 <form> 元素内部，添加一个 <select> 元素，这将创建一个下拉列表。

<form>
  <select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</form>

在这里，我们在 <select> 标签内添加了三个 <option> 标签，并将 value 属性分别设置为 "option1"、"option2" 和 "option3"。

添加提示文本

让我们添加一个提示文本。在 <select> 标签内，添加以下代码：

<select>
  <option value="" disabled selected>Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

在这里，我们添加了一个新的 <option> 标签，并设置了以下属性：

• value=""：将值设置为空字符串。
• disabled：禁用该选项，使其无法被选择。
• selected：用于指示下拉列表的默认选择。
• <option> 标签内的文本作为提示信息。

添加提交按钮

我们需要一个提交按钮来提交表单。在 <select> 标签后添加以下代码：

<form>
  <select>
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <br /><br />

  <input type="submit" value="Submit" />
</form>

保存文件并在 Web 浏览器中运行，以查看下拉列表的实际效果。

总结

在本实验中，我们学习了如何使用 HTML <option> 标签创建一个下拉列表。我们首先创建了一个 HTML 表单，然后添加了一个 <select> 元素，并在其中使用 value 属性添加了选项，接着添加了提示文本。最后，我们添加了一个提交按钮以提交表单。<option> 标签在创建动态 HTML 表单中起着至关重要的作用。