datalist Tag

Posted on Edited on In Views: Disqus:

 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <input id="ageID" name="ageNAME" list="ageRanges_2" />
    <datalist id="ageRanges">
        <option value="兩歲以下"></option>
        <option value="2-7"></option>
        <option value="8-12"></option>
        <option value="13-18"></option>
        <option value="成人"></option>
    </datalist>
    <datalist id="ageRanges_2">
        <option value="志學之年"></option>
        <option value="而立之年"></option>
        <option value="不惑之年"></option>
        <option value="知天命"></option>
        <option value="耳順之年"></option>
    </datalist>
</body>
</html>

執行畫面

 

說明：

1、datalist tag 是屬於 HTML5 所規範的。

2、datalist tag 不支援 IE9 以前的瀏覽器。

3、datalist tag 預設的 CSS 屬性是 display: none;。

4、datalist tag 具有自動完成特性，如下圖。