六、下拉選單

六、表單下拉選單 select option

(一)HTML 表單有項功能爲下拉選單：

即 select option 元素，像是網站提供給會員註冊或報名的表單，常常可以見到讓網友下拉選擇生日、居住縣市區，或是線上購物時，選購商品的規格，都可以使用 select option 來設計，優點是選項可以很多，而且可以節省表單版面空間。每一組 select option 下拉選製作的都是單選，若要製作復選功能，通常會採用核取方塊 checkbox。

(二)下拉選單 select option 基本語法

<select name="選單名稱"><option value="選項值"></option></select>

標準的下拉選單是由 <select> 標籤開始，到 </select> 結束，中間的 <option> 則是每個選項，可以很多組，用 value 來判斷網友所選擇的項目，每個 option 的 value 都應該不同才有意義。

(三)下拉選單 select option 範例

<form>

<select name="請選擇">

　<option value="Taipei">台北</option>

　<option value="Taoyuan">桃園</option>

　<option value="Hsinchu">新竹</option>

　<option value="Miaoli">苗栗</option>

　</select>

</form>

上面範例的下拉選單一個名稱叫做「請選擇」，裡面共有三個選擇，透過 value 判斷網友所選擇的是那個選項，當網友選擇好並送出表單，後端的程式就可以接收此結果。若要呈現當網頁一開起，預設選擇好某個選項，可以在其中一個開頭的 <option> 增加 selected 參數，寫法像這樣 <option value="" selected> 即可，每組下拉選單只可以用一個預設選項。