HTML <select> 標籤
示例
建立一個包含四個選項的下拉列表
<label for="cars">選擇一輛車:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">賓士</option>
<option value="audi">Audi</option>
</select>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<select>
元素用於建立下拉列表。
<select>
元素最常用於表單中,用於收集使用者輸入。
提交表單後,需要 name
屬性來引用表單資料(如果省略 name
屬性,則不會提交下拉列表中的任何資料)。
需要 id
屬性來將下拉列表與標籤關聯起來。
<select>
元素內部的 <option> 標籤定義了下拉列表中的可用選項。
提示:為最佳可訪問性實踐,請務必新增 <label> 標籤!
瀏覽器支援
元素 | |||||
---|---|---|---|---|---|
<select> | 是 | 是 | 是 | 是 | 是 |
屬性
Attribute | 值 | 描述 |
---|---|---|
autofocus | autofocus | 指定頁面載入時下拉列表應自動獲得焦點 |
disabled | disabled | 指定下拉列表應被停用 |
form | form_id | 定義下拉列表所屬的表單 |
multiple | multiple | 指定可以一次選擇多個選項 |
name | name | 為下拉列表定義名稱 |
required | required | 指定使用者在提交表單前必須選擇一個值 |
大小 | 數字 | 定義下拉列表中可見選項的數量 |
全域性屬性
<select>
標籤還支援 HTML 中的全域性屬性。
事件屬性
<select>
標籤還支援 HTML 中的事件屬性。
更多示例
示例
使用 <select> 和 <optgroup> 標籤
<label for="cars">選擇一輛車:</label>
<select name="cars" id="cars">
<optgroup label="瑞典汽車">
<option value="volvo">沃爾沃</option>
<option value="saab">薩博</option>
</optgroup>
<optgroup label="德國汽車">
<option value="mercedes">賓士</option>
<option value="audi">奧迪</option>
</optgroup>
</select>
自己動手試一試 »
相關頁面
HTML DOM 參考:Select 物件
CSS 教程: 表單樣式
預設 CSS 設定
無。