html中datalist标签的详细介绍

原创 国哥笔记  2019-04-19 20:31  阅读 469 views 次

本篇将介绍的是html<datalist>标签的用法,有兴趣的朋友可以学习一下!

在html的升级版本html5中新增了很多实用的标签,这些标签都是为了让代码更语义化或者让常用功能的实现更简单。接下来要介绍就是一个html5版本中新增的一个标签,即<datalist>标签。

“datalist”作为英文单词有“选项列表”的意思,那它作为html中的标签又是用来做什么的呢?我们就一起来看看吧!

一、<datalist>标签定义及用法

在html中,<datalist>标签是html5新增标签,是使用来定义选项列表。选项列表里边的数据是预先定义好的,用户可以将它作为输入数据。
<datalist>标签通常是使用来实现输入框的自动下拉提示,让用户的输入更加快捷简单。当用户在输入框中输入数据的时候,下拉框会自动提示一些内容(根据你输入的部分),如果有你要输入的内容,你点击即可输入。

如果不使用<datalist>标签,当然也可以实现同样的功能。我们可以使用JavaScript语言来实现,只是代码量会增加,工作效率会降低。
<datalist>标签是和<input>标签以及多个<option>标签一起配合使用的,我们是使用<input>标签中的list属性来绑定<datalist>标签,而<option>标签是<datalist>标签中的选项列表。

二、<datalist>标签语法格式

<input list="MyDatalist">

<datalist id="MyDatalist"><option value="值1"> <option value="值2">……</datalist>

说明:value属性的值就是下拉提示的内容。

三、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中datalist标签的详细介绍</title>
</head>
<body bgcolor="burlywood">
<input list="d">
<datalist id="d">
<option value="html">
<option value="css">
<option value="JavaScript">
<option value="php">
<option value="java">
</datalist>
</body>
</html>

运行结果:

好了,关于html中<datalist>标签的介绍就这就结束了,希望对大家有帮助!

 

本文地址:https://www.ggbiji.com/html-datalist-2.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情