HTML select 标签

你可以使用 HTML select 标签创建下拉菜单，以便用户可以选择他们想要的值。它是收集要发送到服务器的数据的重要功能。

select 标签通常位于一个表单元素中，要选择的项目编码在另一个标签 中。它也可以是一个独立的元素，通过 form 属性与一个表单相关联。

在本教程中，我将向你介绍如何使用 select 标签创建下拉菜单，以便你可以开始使用它来收集编码项目中的数据。我还将介绍如何设置 select 标签的样式。

在深入研究如何使用 select 标签创建下拉菜单之前，我们需要讨论 select 标签所具有的属性。

这些是它的属性：

要使用 select 标签创建下拉菜单，你首先需要一个 form 元素。这是因为其中还有一个 submit 按钮（表单元素），以便将数据提交到服务器。

我添加了一些简单的 CSS 来使下拉菜单和按钮居中，并为正文设置浅灰色背景：

为了使其更加精细和易于访问，你还可以将选择框附加到标签元素，以便在单击标签文本时获得焦点。你可以使用以下代码执行此操作：

我把一个数字符号 (#) 作为 action 属性的值，所以当你点击提交按钮时你不会得到 404。

但是现在我们必须对 CSS 做一些改动：

结果显示如下：

它并没有就此结束。默认情况下会显示其中一个下拉项，如果用户在登陆页面时立即单击 submit 按钮，则将选择该下拉项。

但这不是一个好的用户体验。你可以通过将 “select a language” 作为下拉列表的第一项来避免它。

当用户点击选择框来选择一个项目时，下拉菜单也覆盖了提交按钮——这也影响了用户体验。

你可以使用 size 属性更改此设置，默认情况下将显示一定数量的项目，并在下拉列表中显示其他项目的滚动条。

这也可以让你摆脱虚拟的第一个项目，因为某些项目将自动对用户可见。

有了 multiple 属性，用户可以从下拉列表中选择多个项目。

这使 4 个项目默认可见。要选择多个项目，用户必须按住 shift 或 ctrl 键，然后用鼠标选择。

使用 select 和 标签可以做的还不止这些。你还可以使用 标签内的 元素制作多层选择框。

你可以将已经制作好的下拉菜单转换为多层选择框，如下所示：

select 元素的样式通常令人困惑，并且在浏览器中呈现不一致。但你可以尝试以下操作：

在上面的 CSS 代码片段中，我为选择框中的文本设置了以下外观：

选择框现在看起来更好：

当你在 HTML 中创建下拉列表和组合列表时，select 标签非常有用。

请记住，使用单选按钮，你只能从列表中选择一个项目——但使用复选框，你可以选择多个项目。select 更灵活，因为你可以将其设置为可选择单个项目或多个项目。

select 标签的一个问题是很难设置样式。一个合理的解决方案是使用一个 CSS 库，它提供了很好的实用程序类来设置表单和 select 元素的样式。

我希望本教程让你更加熟悉 select 标签，以便你可以开始在你的项目中使用它。

感谢你阅读本文！

原文：HTML Select Tag – How to Make a Dropdown Menu or Combo List，作者：Kolade Chris