5.1 元素 <select>
元素 <select>、<option> 和 <optgroup> 用於在 HTML 表單中創建
下拉式選單和多重選擇列表。憑藉這些元素，使用者可以從預定義的值集中選擇一個或多個選項。
元素 <select> 用於創建下拉選單。它包含一個或多個元素
<option>，代表可以選擇的選項。
使用範例：
HTML
<label for="country">Choose a country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</select>
<select> 的主要屬性
屬性 name: 設定表單項目的名稱，它將與選擇的值一起發送到伺服器。
HTML
<select name="country"></select>
屬性 id: 設定元素的唯一標識符，用於
與 <label> 元素關聯。
HTML
<select id="country" name="country"></select>
屬性 multiple: 允許使用者同時選擇多個選項。列表將顯示為多行。
HTML
<select name="fruits" id="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
屬性 size: 設定下拉選單中可見行的數量。這對於創建可滾動的列表很有用。
HTML
<select name="cities" size="4">
<option value="ny">New York</option>
<option value="la">Los Angeles</option>
<option value="chicago">Houston</option>
</select>
5.2 元素 <option>
元素 <option> 在 <select> 中用於定義每個使用者可以選擇的選項。
使用範例：
HTML
<select name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<option> 的主要屬性：
屬性 value: 確定當此選項被選擇時，將發送到伺服器的值。
HTML
<option value="red">Red</option>
屬性 selected: 指定此選項是否應被預設選中。
HTML
<option value="green" selected>Green</option>
屬性 disabled: 使此選項無法選擇。
HTML
<option value="blue" disabled>Blue</option>
5.3 元素 <optgroup>
元素 <optgroup> 用於在 <select> 中分組相關選項。
它允許將選項邏輯分成類別，使下拉選單更有組織和易於理解。
使用範例：
HTML
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
<optgroup> 的主要屬性：
屬性 label: 設定選項群組的標題。
HTML
<optgroup label="German Cars"></optgroup>
屬性 disabled: 使此群組中的所有選項無法選擇。
HTML
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars" disabled>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
使用 <select>、<option> 和 <optgroup> 的實用建議
-
邏輯分組: 使用
<optgroup>來邏輯分組相關選項： 這將使表單對使用者更友好。 -
多重選擇: 如果需要讓使用者選擇多個選項，使用在
<select>的屬性multiple。 -
可及性: 使用屬性
id和label來提升表單項目的可及性。正確 使用label改善所有使用者與表單的互動，包括使用輔助技術的使用者。 - 樣式化: 使用 CSS 來改善下拉選單和多重選擇列表的外觀。例如：
CSS
select {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
GO TO FULL VERSION