HTML <select> 元素表示一個(gè)控件,創(chuàng)建一個(gè)下拉列表,供用戶選擇。這些下拉值由 <select>標(biāo)簽內(nèi)的一系列 <option>標(biāo)簽定義。此標(biāo)簽通常也稱為 <select>元素。
創(chuàng)建帶有多個(gè)選項(xiàng)的下拉列表:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML select標(biāo)簽的使用(菜鳥教程 (cainiaoplus.com))</title> </head> <body> <label for="pet-select">Choose a pet:</label> <select name="pets" id="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select> </body> </html>測(cè)試看看 ?/?
IEFirefoxOperaChromeSafari
所有主流瀏覽器都支持 <select> 標(biāo)簽。
<select> 元素用來創(chuàng)建下拉列表。
<select> 元素中的 <option> 標(biāo)簽,這些標(biāo)簽提供下拉值列表,可用選項(xiàng)。
默認(rèn)情況下,<select>標(biāo)記中的第一個(gè)選項(xiàng)將顯示為所選項(xiàng)目。用戶可以在下拉列表中選擇另一個(gè)選項(xiàng)。
提示:<select> 元素是一種表單控件,可用于在表單中接受用戶輸入。
HTML5 增加了一些新的屬性。
New :HTML5 中的新增屬性。
屬性 | 值 | 描述 |
---|---|---|
autofocusHTML5 | autofocus | 規(guī)定在頁(yè)面加載時(shí)下拉列表自動(dòng)獲得焦點(diǎn)。 |
disabled | disabled | 當(dāng)該屬性為 true 時(shí),會(huì)禁用下拉列表。 |
formHTML5 | form_id | 定義 select 字段所屬的一個(gè)或多個(gè)表單。 |
multiple | multiple | 當(dāng)該屬性為 true 時(shí),可選擇多個(gè)選項(xiàng)。 |
name | text | 定義下拉列表的名稱。 |
requiredHTML5 | required | 規(guī)定用戶在提交表單前必須選擇一個(gè)下拉列表中的選項(xiàng)。 |
size | number | 規(guī)定下拉列表中可見選項(xiàng)的數(shù)目。 |
<select> 標(biāo)簽支持 HTML 的全局屬性。
<select> 標(biāo)簽支持 HTML 的事件屬性。
HTML DOM 參考手冊(cè): Select 對(duì)象