HTML select option 下拉選單設計

HTML select option 下拉選單設計透過的是 HTML 表單的 select 標籤來製作,屬於 HTML 表單的標準功能,select option tag 的優點是可以將非常多的選項,全部收納在同一的下拉選單中,節省整個網頁表單的空間應用,不過 select option 只能單選,不能複選,所以當要製作一個複選題目的時候,select option 並非是個好選擇,通常會挑選 radio button 選項按鈕來處理複選的問題。HTML select option 的應用範圍廣泛,透過表單傳遞資料,同一個表單中可以有多組不同的 select option 讓網友選擇不同問題的答案,所有的主流瀏覽器都支援 HTML select option 功能,以下我們就從。

HTML select option 下拉選單語法
標準的 select option 下拉選單必須由 select tag 開頭,並在開頭處寫 name,讓後端接收資料的程式(例如 PHP)判斷該下拉選單的名稱,每一組 select option 裡面都可以有很多組 option,每一組 option 都是一個選項,透過 value 來設定每一個獨立的選項值,整個 select option 必須寫在 HTML From 表單中,否則無法透過表單傳遞資料給後端的程式。

HTML select option 下拉選單設計範例
範例的呈現樣貌
請選擇您的出生月分:
範例是一個簡單的 select option 應用,讓網友選擇自己的出生月分,各位可以看到我們在開頭的 select tag 內使用 name="year",這個 year 就是整個 select option 的名稱,接著有 12 個 option,每個 option 代表一個月份的選項,透過 value 來設定值,整組 select option 都必須寫在 HTML 的表單範圍內,也就是 form tag 內。

當網友填寫完我們設計的這個 HTML select option 並送出表單,後端的 PHP 程式就可以根據 name 來判斷是這個下拉選單,再根據 value 來判斷網友所選擇的月份是幾月。

如果想進一步認識 HTML 表單的設計規則,請參閱:HTML Form 表單設計

想找可多選的選單設計嗎?請參閱:HTML 表單中的 checkbox 核取方塊設計

更多 HTML 表單設計基礎
分享於 2014-10-04