select元素創建一個列表框,用戶可以在列表框中選擇列表項。列表框可以把一類性質相同的數據項以組的方式展現給用戶,用戶在列表框中可以單選或多選列表框列出的數據項,每條數據項稱為列表項。
一方面列表框為用戶輸入數據提供了一種便捷方式,只要把已知的數據項列舉出來,用戶在列表框中選擇列表項就可以;另一方面可以把需要搜集的數據規範化,防止因用戶輸入數據的隨意性而造成後端處理數據的混亂。例如,在搜集用戶個人信息時,可能需要用戶輸入職業信息,後端程序需要按照職業信息對用戶進行職業分類。在這種情況下,採用列表框元素就是比較好的獲取用戶數據的方式,可以預先規劃好職業信息,把規劃好的職業信息以列表框方式展現給用戶,用戶只需要選擇列表項就可以了,無需讓用戶輸入職業信息。
select元素使用select標籤,select標籤有兩個比較重要的屬性。一個屬性是multiple,multiple屬性用於設置select列表項是否允許用戶多選,multiple屬性值為true時,用戶可以選擇多個列表項,multiple屬性值為false時,用戶只能選擇一個列表項,;另外一個屬性是size,size屬性用於設置select列表框可顯示的列表項數目,當列表項數目超過size時,select列表框會自動創建縱向滾動條。
select列表框的列表項使用option標籤,option標籤放置在select標籤的起始標籤和結束標籤內,每個option標籤就是一個列表項。option標籤的常用屬性有value和selected。value屬性存儲該項的值,後端程序通過value屬性獲取該項的值;selected是個特殊屬性,只有屬性名沒有值,option標籤添加該屬性後,該項被默認選擇。
下面的HTML文檔展示了select元素的使用方法。
下圖是瀏覽器的顯示效果。從瀏覽器的顯示效果可以看出,當select屬性multiple設置為true時,用戶可以選擇多個列表項。選擇多個列表項的方法因作業系統不同而有所差別,對於Windows系統按住 Ctrl 按鈕來選擇多個列表項,對於Mac系統按住 command 按鈕來選擇多個選項。當需要用戶進行多選操作時,需要告知用戶多選選擇的操作方式。
例1:設計一個用戶信息登記網頁,用戶信息包括用戶姓名、年齡、性別、郵箱、愛好(可多選)、職業、個人簡介。
瀏覽器顯示效果如下圖所示。在上面的網頁代碼中,當select標籤沒有設置multiple屬性時,默認是單選。在實際應用中,如果需要用戶多選,建議使用檢查框元素。