HTML5中datalist标签的使用

最新推荐文章于 2023-10-25 20:50:03 发布

星月昭铭

最新推荐文章于 2023-10-25 20:50:03 发布

阅读量6.5k

点赞数 1

分类专栏：前端文章标签： html5新标签 html5 datalist

本文链接：https://blog.csdn.net/weixin_43373239/article/details/101846497

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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>