HTML 中的 Select 标签

引言

在 HTML 中，通过 select 标签，我们可以在创建表单时创建下拉列表，用户可以从给定的选项中选择一个。如果开发者允许，用户也可以从给定的选项中选择多个。我们只能在 HTML 表单中使用 select 标签。在接收用户信息时，我们可以通过选择下拉菜单来节省空间。

我们可以在 <select> 标签的开始和结束标签之间放置选中的元素。下面是 select 标签的实现示例。

示例 1

输出

在上面的代码中，我们创建了一个简单的 HTML 下拉菜单。默认情况下，第一个选项会显示在网页上。当用户点击它时，会显示所有选项。

在代码的第一部分，我们创建了一个 <label> 标签，其中包含介绍 select 元素的文本。使用 <label> 标签是开发者的最佳实践。<label> 标签与包含 <label> 属性的前一个下拉菜单相关联。我们可以通过 ID 选择器来选择该元素。

在接下来的步骤中，我们创建了 select 标签。select 标签的开始标签包含两个属性。一个是 name，另一个是 ID 属性。通过 name 属性，我们可以为下拉元素指定名称。通过 ID 属性，我们可以定位选中的元素。

在第三步中，我们在 select 标签内提供了选项列表。每个 option 标签都有一个 value 属性。它会在表单保存过程中收集信息并存储在服务器上。

HTML Select 属性

select 标签接受 HTML 中所有可用的全局属性。它还有许多其他属性。这些属性如下。

1. Autocomplete

通过此属性，我们可以让浏览器自动为用户选择选项。

2. Autofocus

为 select 标签激活 autofocus 会在页面加载时自动将其聚焦。

3. Disabled

通过此属性，我们可以禁用表单标签中的整个下拉选项。如果我们禁用 select 标签，则用户无法与该标签进行交互。

示例 2

输出

注意：当用户点击下拉选项时，不会发生任何事情。

我们也可以将 disabled 属性应用于单个选项。让我们看下面的示例。

示例 3

输出

形式

我们可以通过 <form> 标签与 <select> 标签关联表单。我们也可以在 form 标签外部使用 <select> 标签。我们也可以使用 ID 作为属于 <form> 标签的表单值。

多次

默认情况下，HTML 提供仅从下拉列表中选择一个选项的功能。但经过一些修改，用户也可以同时选择多个选项。它将显示一个可滚动的滚动条，而不是下拉选项。如果用户想一次选择多个选项，则用户应按 Windows 上的 ctrl 或 shift 键，或 macOS 上的 command 或 shift 键。让我们看下面的示例。

示例 4

输出

为了更好的替代方案，我们应该选择复选框来实现这一点。

• Name: 我们可以使用 name 属性将下拉菜单分配给服务器以发送数据。如果用户未选择任何属性，则 name 属性不会将任何数据发送到服务器。
• Required: 当我们将 required 属性应用于任何 select 标签时，该输入标签就成为必填字段。没有必填字段的数据，表单就不会将数据发送到服务器。
• Size: 通过 size 属性，可以在下拉列表中显示多少个项目？它会显示而无需滚动列表。让我们通过一个例子来理解这一点。在下面的例子中，我设置了 size 为 3。

示例 5

输出

其他 HTML Select 技巧

我们还可以通过多种方式自定义下拉菜单。让我们讨论一些方法。

1. 更改 HTML 并选择默认选项。

<input> 标签会自动选择嵌套在 HTML 中的第一个 <option> 标签。我们想将另一个选项设置为默认的第一个选项。我们可以通过下面的例子来实现。在下面的例子中，我们将第二个选项设为默认选项。

示例

输出

2. 向 HTML 添加占位符文本

通过占位符，我们可以防止列表显示为默认选项。而不是显示默认选项，我们可以将其显示为“请选择一个”。为此，我们必须做一些事情。第一件事是，我们将占位符文本写为一个 <option> 元素，第二件事是向此元素添加 disabled 和 selected 属性。

示例

输出

3. 对 HTML select 项目进行分组。

我们还可以将所有响应项目在 HTML 中分成不同的组。如果我们这样做，它将有助于处理特别大的下拉列表。我们可以通过 <optgroup> 来实现。在此标签内，我们必须在每个组中包含 <select> 标签。然后，我们必须在每个 <optgroup> 标签中添加 <label> 属性。然后，我们必须在 <optgroup> 标签内编写 <option> 标签。让我们通过一个例子来理解这一点。

示例

输出

如何在表单中使用 HTML Select

根据 HTML 的约定，我们可以在 form 标签内使用 <select> 标签。如果我们这样做，那么用户就可以输入信息，也可以提交表单。我们可以将 <select> 标签嵌套在 form 标签内。让我们通过一个例子来讨论。

示例

输出

示例

我们也可以在 form 标签外部编写 <select> 标签。我们可以像下面的代码一样将 <select> 标签关联到一个表单。

输出

HTML Select：下拉列表的简便解决方案

当需要创建 HTML 下拉选项时，使用 HTML <select> 标签非常简单。它可以处理开发人员所需的功能。它还可以为开发人员节省空间。