HTML - select 标签

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

对于身份识别和表单提交，需要 name 和 id 等属性。JavaScript 可以改进功能，而 CSS 可以应用样式。通过在不同设备上进行测试，可以保证一致的用户体验。

语法


<select> .... </select>

属性

<select> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出。

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

<select> 标签的示例

下面的示例将说明select标签的用法。在哪里、何时以及如何使用它来创建可选择的项目，以及我们如何使用 CSS 为该选择部分设置样式。

<select> 标签的下拉列表

在下面的程序中，我们使用 <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>

在表单元素中选择项目

以下是 <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 元素

在这个程序中，我们使用 <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> 标签定义选项列表。我们正在使用 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>	Yes	Yes	Yes	Yes	Yes

打印本页