元素介紹

想象一下我們想要用戶輸入一個(gè)字符串，例如他們的名字，我們可能會(huì)用到元素，這樣子用戶就可以隨意的輸入他們的內(nèi)容。想象一下假如我們需要用戶輸入的是他們的國(guó)家居住地，我們更喜歡使用元素，這個(gè)將會(huì)限制可選的結(jié)果(有時(shí)候也許是好的)，并且還存在著一個(gè)潛在的巨大用戶選擇。

但如果我們想要用戶自由輸入的同時(shí)又有一些建議選項(xiàng)，這里就是的用處了。

示例代碼

datalist包含元素，類似于元素，然而并不是獨(dú)立控制，相反它是附加在上的list，類似于下面的這段代碼：

Select your preferred code editor:

這段代碼里面使用到了控制著一個(gè)list的新屬性，這是告訴瀏覽器加載一個(gè)id為上面list的值的這個(gè)列表值或者來(lái)自datalist的建議。

瀏覽器效果

根據(jù)官方W3C的文檔，datalist還可以用于下面這些

Data & Time (including Month etc.), Range and more.

更多的屬性

我們還可以給它的option添加一個(gè)label屬性

Select your preferred code editor:

兼容性

支持最新IE10、Firefox、Chrome和Opera，不支持IOS和Android，你可以在這里查看最新支持：canIUse

更多資源

演示

總結(jié)

以上是生活随笔為你收集整理的html5 datalist属性,HTML5 元素 datalist 介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。