HTML5中datalist标签的使用

我不是女神ヾ 2023-08-17 17:29 122阅读 0赞

datalist是html5中出现的新标签，它需要配合input输入框来使用，它的作用就是定义了input可能要输入的值（可以被快捷选择），  
定义一个datalist的标签需要给他一个id，input就是根据id来与其绑定的，datalist中的option就是和列表一样，里面的每个数据都是可被用户所选择的

<datalist id="name">
    	<option value="张居正">张居正</option>
    	<option value="王阳明">王阳明</option>
    </datalist>

现在定义一个input输入框，input标签通过list的属性与datalist绑定，属性值就是datalist的id值

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="text" list="name" />
    		<datalist id="name">
    			<option value="张居正">张居正</option>
    			<option value="王阳明">王阳明</option>
    		</datalist>
    	</body>
    </html>

运行截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]  
这样在输入的时候就可以让用户选择可能要输入的值了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]: /images/20230808/c749399a06a741b8b3a3e895f0dcd54f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5新增标签的使用

HTML5新增的标签 1、<article> 标记定义一篇文章 2、<header> 标记定义一个页面或一个区域的头部 3、 <nav> 标

缺乏、安全感/ 2023年10月17日 08:13/ 0 赞/ 147 阅读

相关 HTML5中datalist标签的使用

datalist是html5中出现的新标签，它需要配合input输入框来使用，它的作用就是定义了input可能要输入的值（可以被快捷选择），定义一个datalist的标签

我不是女神ヾ/ 2023年08月17日 17:29/ 0 赞/ 123 阅读

相关 HTML5新增的标签及使用

HTML5和HTML其实是很相似的，但是有些内容有发生了改变，今天我学习了一下HTML5发现还是挺好学的，只要有html+css基础就可以，今天知识看了下新的标签。一、定

梦里梦外;/ 2023年07月22日 04:57/ 0 赞/ 24 阅读

相关 HTML5探索之datalist研究

最近一个项目需要用到类似淘宝，百度搜索时的自动检索方案。自然想到了使用datalist标签。但是遇到一个bug，经过两天研究。小有结果给大家分享下~~ 首先看bug吧！~

Dear 丶/ 2022年10月02日 14:43/ 0 赞/ 207 阅读

相关 html5 中新的datalist 自动下拉提示输入框

在日常的页面制作中，为了方便用户输入，经常可以在一个输入文本框中，当用户输入内容时，自动下拉提示建议用户的输入，这叫autocomplete或者autosuggestio

川长思鸟来/ 2022年08月19日 13:12/ 0 赞/ 243 阅读

相关 Html5中的＜section＞标签

本文导读：<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个s

曾经终败给现在/ 2022年08月02日 14:37/ 0 赞/ 216 阅读

相关 Html5 标签

1.新的文档类型声明(DTD) HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html> 都是正确的，因为HTML

叁歲伎倆/ 2022年06月14日 07:50/ 0 赞/ 223 阅读

相关 html中object标签的使用

在html中，`<object>`标签是用来定义一个嵌入的对象，经常用来在页面中添加多媒体（图像、音频、视频、`Java applets、ActiveX、PDF、Flash`等

「爱情、让人受尽委屈。」/ 2021年06月26日 16:06/ 0 赞/ 565 阅读

相关如何使用HTML5中video标签

如何使用HTML5中video标签 HTML5 video标签的详细用法用于播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样做的好处是...

小灰灰/ 2020年06月09日 15:36/ 0 赞/ 1088 阅读

相关 HTML <datalist> 选项列表

`< datalist>`标签通常与`< input>`标签配合使用，HTML5新增。大家知道所有新功能的出现都是由需求推动的，各行各业都是如此。首先介绍一下`<...

小灰灰/ 2020年05月16日 17:21/ 0 赞/ 752 阅读