HTML <datalist>元素包含了一組 <option>元素,這些元素表示其它表單控件可選值; <datalist>標(biāo)記是一個HTML5元素,它定義 <input>標(biāo)記的建議值列表。這些建議值將在輸入控件中顯示為下拉列表,并且當(dāng)用戶將數(shù)據(jù)輸入到輸入控件中時,可用的選項將被過濾。此標(biāo)記通常也稱為 <datalist&
下面是一個 <input> 元素,<datalist> 中描述了其可能的值:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 datalist標(biāo)簽的使用(菜鳥教程 (cainiaoplus.com))</title> </head> <body> <label for="tutorial_choice">Tutorials: </label> <input list="tutorial_types" name="tutorial_choice" id="tutorial_choice"> <datalist id="tutorial_types"> <option value="HTML"> <option value="CSS"> <option value="SQL"> </datalist> </body> </html>測試看看 ?/?
在此HTML5文檔示例中,我們使用了<datalist>標(biāo)簽為<input>標(biāo)簽創(chuàng)建建議值列表。建議使用3個值(HTML,CSS和SQL),這些選擇將顯示為下拉列表,供用戶選擇。
<datalist>標(biāo)記具有以下瀏覽器的基本支持:
IEFirefoxOperaChromeSafari
HTML <datalist>元素位于<body>標(biāo)記內(nèi)。<datalist>標(biāo)記通常位于<form>標(biāo)記內(nèi)。
<datalist>標(biāo)簽包含一組<option>標(biāo)簽,這些標(biāo)簽為關(guān)聯(lián)的<input>標(biāo)簽提供了可能的值。
<datalist> 標(biāo)簽規(guī)定了 <input> 元素可能的選項列表。
<datalist> 標(biāo)簽被用來在為 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表,里邊的選項是預(yù)先定義好的,將作為用戶的輸入數(shù)據(jù)。
請使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。
<datalist> 標(biāo)簽是 HTML5 中的新標(biāo)簽。
<datalist> 標(biāo)簽支持 HTML 的全局屬性。
<datalist> 標(biāo)簽支持 HTML 的事件屬性。