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

列印頁面