HTML 標籤詳解

一、基本用法

<select>標籤是HTML表單元素中的一種，它用來創建下拉列表框。用戶可以通過這個下拉列表框從多個選項中選擇一個選項。

<select>標籤需要與<option>標籤一起使用來創建選項列表。在<select>標籤中，可以設置以下屬性：

<select name="fruit">
  <option value="apple">蘋果</option>
  <option value="orange">橙子</option>
  <option value="banana">香蕉</option>
</select>

二、多選列表

在<select>標籤中添加multiple屬性，可以創建多選列表框。用戶可以通過按住Ctrl鍵（Windows系統）或Command鍵（Mac系統）來選擇多個選項。同時，可以通過設置size屬性來改變多選列表中可見選項的數量。以下是一個例子：

<select name="fruit" multiple size="4">
  <option value="apple">蘋果</option>
  <option value="orange">橙子</option>
  <option value="banana">香蕉</option>
  <option value="watermelon">西瓜</option>
  <option value="grape">葡萄</option>
</select>

三、禁用選項

通過在<option>標籤中添加disabled屬性，可以禁用所有或部分選項，使得用戶無法選擇。例如：

<select name="fruit">
  <option value="apple">蘋果</option>
  <option value="orange" disabled>橙子（已售完）</option>
  <option value="banana">香蕉</option>
</select>

四、組合使用

以上三種用法可以組合起來使用，創建一個更加強大的下拉列表框。例如：

<select name="city" multiple>
  <optgroup label="中國">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
  </optgroup>
  <optgroup label="美國">
    <option value="newyork">紐約</option>
    <option value="losangeles">洛杉磯</option>
    <option value="chicago">芝加哥</option>
  </optgroup>
</select>

五、CSS樣式

通過為<select>標籤和<option>標籤添加CSS樣式，可以實現個性化的外觀效果。例如，我們可以改變下拉列表框的背景顏色和選項文本顏色：

<style>
  select {
    background-color: #f1f1f1;
    color: #000000;
    border: none;
    border-radius: 4px;
  }
  option {
    background-color: #ffffff;
    color: #000000;
  }
</style>

<select name="fruit">
  <option value="apple">蘋果</option>
  <option value="orange">橙子</option>
  <option value="banana">香蕉</option>
</select>