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 設定
無。