html5 datalist標籤的用法是什麼？這裡有datalist標籤的用法實例-H5教程-PHP中文網

html5 datalist標籤的用法是什麼？這裡有datalist標籤的用法實例

寻∝梦

發布： 2018-09-03 17:33:54

原創

5661 人瀏覽過

本篇文章主要為大家講述了關於html5 datalist標籤的用法及html5 datalist標籤的用法實例。本文說了兩個常用的選項框的實例供大家選擇觀看，以下就讓我們一起來看這篇文章吧

#我們先來看看html5 datalist標籤的用法：

標籤定義選項清單。請與input元素配合使用該元素，來定義input可能的值。

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標籤的用法是什麼？這裡有datalist標籤的用法實例

##這是沒任何動作的效果，是一個輸入框，現在我們再來看看把滑鼠移上去之後點擊的效果：

html5 datalist標籤的用法是什麼？這裡有datalist標籤的用法實例

你看，效果出來了。這就是html5 datalist標籤的基礎用法。

input輸入框的list屬性值是datalist的id，這樣datalist才能和input輸入框關聯。 datalist本身並不會顯示，只有在需要配合input輸入時才會自動顯示出來。

再來個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>

登入後複製

效果如圖所示：

html5 datalist標籤的用法是什麼？這裡有datalist標籤的用法實例