HTML5中如何使用& lt; datalist>标签

　　介绍

这篇文章主要介绍了HTML5中如何使用& lt; datalist>标签,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

<强> HTML5标签的定义和用法:

& lt; datalist>标签定义选项列表。请与输入元素配合使用该元素,来定义输入可能的值。

datalist及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用输入元素的列表属性来绑定datalist。

<强> HTML5标签属性和说明:

AlternatingItemStyle获取datalist控件中交替项的样式属性。

AlternatingItemTemplate获取或设置datalist中交替项的模板属性获取网络控件的所有属性值。

背景色获取或设置Web服务器控件的背景色。

BorderColor获取或设置网络控件的边框颜色。

边框样式获取或设置Web服务器控件的边框样式。

BorderWidth获取或设置Web服务器控件的边框宽度。

单元格边距获取或设置单元格的内容和单元格的边框之间的空间量。

单元格间距获取或设置单元格间的空间量。

控制列表控件中的子控件的集合。

DataKeyField获取或设置由数据源属性指定的数据源中的键字段。

DataKeys存储数据列表控件中每个记录的键值(显示为一行)。

数据成员获取或设置多成员数据源中要绑定到数据列表控件的特定数据成员。

数据源获取或设置源,该源包含用于填充控件中的项的值列表。

EditItemIndex获取或设置DataList控件中要编辑的选定项的索引号。

EditItemStyle获取DataList控件中为进行编辑而选定的项的样式属性。

EditItemTemplate获取或设置DataList控件中为进行编辑而选定的项的模板。

使获取或设置一个值,该值指示是否启用Web服务器控件。

HeaderTemplate获取或设置DataList控件的标题部分的模板。

高度获取或设置

<强> HTML & lt; datalist>标签实例:

下面是一个输入元素,datalist中描述了其可能的值:

& lt;输入id=癿yCar"列表=癱ars"/比; 　　& lt; datalist id=癱ars"祝辞 　　& lt;选项值=https://www.yisu.com/zixun/"宝马"> 　　<选项值=案Ｌ亍? 　　<选项值=拔侄帧? 　　

<强>我发现HTML5标签的两点具体用处,分享给大家:

最近做东西需要邮箱补全,接触到datalist,觉得蛮好用的.datalist是需要与输入标签配合使用,可以用在输入推荐,邮箱补全等场合。下面将简单记录相关用法。

<强> 1. HTML5标签用在输入推荐上:

& lt; p>请输入您最喜欢的科目:& lt;/p> 　　& lt;输入类型=皌ext"列表=癿ylist1"比; 　　& lt; datalist id=癿ylist1"祝辞 　　& lt;选项值=https://www.yisu.com/zixun/钡缏吩怼? 　　<选项值="数字电路”> 　　<选项值="模拟电路”> 　　<选项值="计算机原理”> 　　 　　

datalist的id需要与输入的列表属性一致,当准备输出时输入下方会自动出现选择的选项,datalist具有模糊查询的作用,比如在文本框中输入“路”,则推荐的内容为电路原理,数字电路以及模拟电路。

<强> 2. html5标签用在邮箱补全上:

html代码:

& lt; p>请输入您的邮箱:& lt;/p> 　　& lt;输入id=癳mailInput">函数suggestEmail () { 　　var邮件=$ (“# emailInput") .val (); 　　$ (“# mylist2")空虚(); 　　如果(email.indexOf (“@")在1){ 　　返回错误; 　　其他}{ 　　$ (“# mylist2") .append (“& lt;选项值=https://www.yisu.com/zixun/?电子邮件+“@qq.com”>“+ 　　“<选项值=啊?电子邮件+“@126.com”>“+ 　　“<选项值=啊?电子邮件+“@foxmail.com”>“+ 　　“<选项值=啊?电子邮件+“@163.com”>“+ 　　“<选项值=啊?电子邮件+“@gmail.com”>”) 　　} 　　}

输入标签的oninput属性可以检测到输入内容的变化,当输入框内容变化,出发js在datalist中追加选择。如果用户手动输入了@,就不需要提示了。

<强> HTML 4.01与HTML 5之间的差异:

& lt; datalist>标签是HTML 5中的新标签。

<强>浏览器支持:

所有主流浏览器都支持& lt; datalist>标签,除了ie和Safari。

感谢你能够认真阅读完这篇文章,希望小编分享HTML5中如何使用& lt; datalist>标签内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

HTML5中如何使用& lt; datalist>标签