HTML <select> 選單元素

在HTML網頁可使用選單元素<select>來表示下拉選單(drop-down menu)。

下面是一個簡單的<select>範例。

<label for="blood">選擇血型:</label>
<select id="blood" name="blood">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">AB</option>
    <option value="4">O</option>
    <option value="5">其他</option>
</select>

顯示如下。

選擇血型: A B AB O 其他

<select>選單的選項內容以<option>元素包起並置於<select>間。

<option>包夾的文字內容僅是用來顯示給使用者看的；<option>的value值才是提交時真正送出的內容。

<select>元素可使用size屬性來設定選項露出的數量。例如下面設定size="3"。

<label for="blood">選擇血型:</label>
<select id="blood" name="blood" size="3">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">AB</option>
    <option value="4">O</option>
    <option value="5">其他</option>
</select>

顯示如下。

選擇血型: A B AB O 其他

如果希望一開始就有預設好選項，在該選項的<option>加上selected屬性。

<label for="blood">選擇血型:</label>
<select id="blood" name="blood" size="3">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3" selected >AB</option> <!-- 此為預設的選項 -->
    <option value="4">O</option>
    <option value="5">其他</option>
</select>

選擇血型: A B AB O 其他

以上即為<select>的基本用法。

參考：

• The select element
• The option element