HTML - <select> 标签

HTML <select> 标签用于在在线表单中创建下拉列表。用户可以从列表中选择一个或多个选项。在 <select> 标签内，它由<option> 标签组成。

为了识别和提交表单，需要像名称和 ID 这样的属性。JavaScript 可以提高功能，而 CSS 可以应用样式。通过在不同设备上进行测试，可以保证一致的用户体验。

语法

<select>
  ....
</select>

属性

HTML select 标签支持 HTML 的全局和事件属性。以及一些特定的属性，如下所示。

属性	值	描述
disabled	disabled	禁用输入控件。按钮不会接受用户的更改。它也不能接收焦点，并且在按 Tab 键时会被跳过。
autofocus	autofocus	指定在页面加载时下拉列表应自动获得焦点。
form	form_id	指定一个或多个表单。
multiple	multiple	设置后，它指定可以一次选择多个项目
name	name	为输入控件分配名称。
required	required	在提交表单之前，用户需要选择一个值，否则将无法继续。
size	数字	定义下拉列表中可见项目的数量

HTML select 标签示例

下面的示例将说明 select 标签的使用。在什么情况下、如何使用它来创建可选择项目，以及我们如何使用 CSS 样式化该 select 部分。

使用 select 标签创建下拉列表

在下面的程序中，我们使用 HTML <select> 标签来创建一个选项列表（下拉列表）。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <!--create a select tag-->
   <p>Simple select element</p>
   <select>
      <option value="">--Chose your option--</option>
      <option value="">HTML</option>
      <option value="">CSS</option>
      <option value="">JavaScript</option>
   </select>
   <button>Submit</button>
</body>
</html>

在表单元素中选择项目

以下是 HTML <select> 标签的另一个示例。在这里，我们使用 <select> 标签创建了一个“select”元素，以在“form”元素内定义选项列表。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <!--create a form-->
   <h3>HTML "select" element example</h3>
   <form> Name: <input type="text">
      <br> Email: <input type="email">
      <br> Mobile: <input type="number">
      <br> Language: <select>
      <option value="">--Choose language--</option>
      <option value="">Hindi</option>
      <option value="">English</option>
      </select>
      <button>Submit</button>
   </form>
</body>
</html>

禁用 Select 元素

在这个程序中，我们使用 HTML <select> 标签来定义选项列表。我们使用“disabled”属性禁用“select”元素。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <!--create a select tag-->
   <p>HTML 'select' element with 'disabled' attribute</p>
   <label for="">Choose your country:-</label>
   <select disabled>
      <option value="">India</option>
      <option value="">United state</option>
      <option value="">Australia</option>
      <option value="">Germany</option>
   </select>
</body>
</html>

样式化 Select 元素

在这个示例中，我们使用 HTML <select> 标签定义选项列表。我们使用 CSS 来样式化创建的 select 元素。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
      select {
         width: 200px;
         height: 30px;
         border: 2px solid blue;
         border-radius: 10px;
         padding: 5px;
      }

      select option {
         color: green;
      }
   </style>
</head>
<body>
   <!--create a select tag-->
   <p>HTML 'select' element with CSS</p>
   <label for="">Choose your favorite computer language:-</label>
   <select>
      <option value="">HTML</option>
      <option value="">JavaScript</option>
      <option value="">Java</option>
      <option value="">Python</option>
      <option value="">C++</option>
   </select>
</body>
</html>

支持的浏览器

标签
select	是	是	是	是	是

html_tags_reference.htm

打印页面