html5 datalist標籤的用法是什麼？這裡有datalist標籤的用法實例
- 寻∝梦原創
- 2018-09-03 17:33:545710瀏覽
本篇文章主要為大家講述了關於html5 datalist標籤的用法及html5 datalist標籤的用法實例。本文說了兩個常用的選項框的實例供大家選擇觀看，以下就讓我們一起來看這篇文章吧
#我們先來看看html5 datalist標籤的用法：
datalist及其選項不會被顯示出來，它只是合法的輸入值清單。
請使用input元素的list屬性來綁定datalist。
可用性：datalist:可選擇可輸入的清單（比select下拉清單方便，只能）
現在來看個html5 datalist標籤的實例：
下面是一個input 元素，datalist 中描述了其可能的值：
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="PHP中文网"> <option value="html"> <option value="寻梦"> </datalist>
這個在瀏覽器中顯示如下：
再來個html5 datalist標籤的用法實例：
在Web設計中,經常會用到如輸入框的自動下拉提示,這將大大方便用戶的輸入。在以前，如果要實現這樣的功能，必須要求開發者使用一些Javascript的技巧或相關的框架進行ajax調用，需要一定的程式設計工作量。但隨著HTML5的慢慢普及，開發者可以使用其中的新的datalist標記就能快速開發出十分漂亮的autocomplete元件的效果html5 datalist標籤的程式碼實例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset="utf-8">
</head>
<p>
浏览器版本：<input list="words">
</p>
<datalist id="words">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">
<option value="Maxthon">
</datalist>
</body>
</html>效果如圖所示：
html空格程式碼怎麼寫？ html空格程式碼的表現方式總結
html中col標籤中的漢字如何居中？ html col標籤的基本使用(內有實例)
以上是html5 datalist標籤的用法是什麼？這裡有datalist標籤的用法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn