HTML <select> 標簽

定義和用法

<select> 元素用于創建下拉列表。

<select> 元素最常用于表單中，用于收集用戶輸入。

提交表單后，需要 name 屬性引用表單數據（如果省略 name 屬性，下拉列表中的數據將不會被提交）。

<select> 元素內的 <option> 標簽 定義下拉列表中的可用選項。

需要使用 id 屬性將下拉列表與標簽（label）相關聯。

提示：始終添加 <label> 標簽 以獲得最佳可訪問性實踐！

另請參閱：

HTML DOM 參考手冊：Select 對象

CSS 教程：設置表單樣式

實例

例子 1

創建一個包含四個選項的下拉列表：

<label for="cars">請選擇一個汽車品牌：</label>
<select name="cars" id="cars">
  <option value="audi">奧迪</option>
  <option value="byd">比亞迪</option>
  <option value="geely">吉利</option>
  <option value="volvo">沃爾沃</option>
</select>

親自試一試

例子 2

將 <select> 與 <optgroup> 標簽一起使用：

<label for="cars">請選擇一個汽車品牌：</label>
<select  name="cars" id="cars">
  <optgroup label="中國車">
    <option value="byd">比亞迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="德國車">
    <option value="mercedes">奔馳</option>
    <option value="audi">奧迪</option>
  </optgroup>
</select>

親自試一試

屬性

屬性 值 描述
autofocus autofocus 規定下拉列表應在頁面加載時自動獲得焦點。
disabled disabled 規定應禁用下拉列表。
form 表單 id 定義下拉列表所屬的表單。
multiple multiple 規定可以一次選擇多個選項。
name 名稱 定義下拉列表的名稱。
required required 規定在提交表單之前用戶必須選擇一個值。
size 數字 定義下拉列表中可見選項的數量。

全局屬性

<select> 標簽還支持 HTML 中的全局屬性。

事件屬性

<select> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

無。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持