HTML5中如何使用<datalist>标签-成都快上网建站

HTML5中如何使用<datalist>标签

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

成都创新互联是专业的浮山网站建设公司,浮山接单;提供成都网站制作、成都做网站、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行浮山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

HTML5标签的定义和用法:

标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

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

请使用 input 元素的 list 属性来绑定 datalist。

HTML5标签属性和说明:

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

AlternatingItemTemplate获取或设置 DataList 中交替项的模板Attributes获取web控件的所有属性值.

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

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

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

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

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

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

Controls列表控件中的子控件的集合.

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

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

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

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

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

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

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

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

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

Height获取或设置

HTML 标签实例:

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



  

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

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

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

请输入您最喜欢的科目:


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

2.HTML5标签用在邮箱补全上:

html代码:

请输入您的邮箱:

js代码:

function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("

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

HTML 4.01 与 HTML 5 之间的差异:

标签是 HTML 5 中的新标签。

浏览器支持:

所有主流浏览器都支持 标签,除了 Internet Explorer 和 Safari。

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


网页名称:HTML5中如何使用<datalist>标签
链接地址:http://kswjz.com/article/jsjjsh.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流