首頁 > web前端 > H5教程 > html5 datalist標籤使用範例(自動完成元件)

html5 datalist標籤使用範例(自動完成元件)

PHP中文网
發布: 2017-03-27 16:57:00
原創
2623 人瀏覽過

以前需要用JS寫一個自動完成元件(Suggest),很費力。 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>
登入後複製

datalist提供一個事先定義好的列表,透過id與input關聯,當在input內輸入時就會有自動完成(autocomplete)的功能,用戶將會看見一個下拉列表供其選擇。

html5 datalist標籤使用範例(自動完成元件)

Chrome/Firefox/Opera和IE10 均已支持,Safari直到版本7仍然不支援。

相關文章:

HTML5每日一練之datalist標籤自動補全的使用

datalist標籤

datalist標籤datalist標籤datalist標籤datalist標籤>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板