html5 datalist标签的用法

最新推荐文章于 2025-06-11 08:08:42 发布

原创最新推荐文章于 2025-06-11 08:08:42 发布 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#datalist

前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了HTML5中datalist标签的使用方法及其与input标签的配合方式。通过示例代码展示了如何创建下拉提示选项，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5 datalist标签的用法

datalist介绍：
datalist一般不会独行江湖，它需要与input标签的搭配使用，就像label标签与input标签搭配使用一样。既然与input标签搭配使用，那么这两个标签之间必定存在着“特殊的关系”，不然input与datalist就互不相认了，那么如何才能让他们建立起来这种关系呢？这个时候我们需要一个新的属性list（注意，不是for），list与for的用法一样，list的值设置为表单元素的 id，这样他们便会自动关联了。

Chrome对此标签支持不好，Firefox和Opera可很好的支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 datalist标签的用法</title>
</head>
<body>
<input list="w3cfuns-search" />
<datalist id="w3cfuns-search">
        <option value="W3C标准">
        <option value="W3C规则">
        <option value="W3C验证">
        <option value="前端开发">
        <option value="前端开发网">
        <option value="2天驾驭DIV+CSS">
        <option value="W3CSchool">
</datalist> 
</body>
</html>