html5 datalist属性,HTML5 元素 datalist 介绍
元素介紹
想象一下我們想要用戶輸入一個(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)題。
- 上一篇: html hover图片效果,CSS第9
- 下一篇: css点击a标签显示下划线_好程序员HT