html5 php list,HTML5<datalist>标签有哪些属性?HTML5<datalist>标签的具体用法(附实例)...

HTML5标签有哪些属性?HTML5标签的具体用法了解一下。本篇文章主要讲解了HTML5标签的具体用法和作用,还有HTML5标签的一部分属性介绍

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标签的具体用法(附实例)的详细内容,更多请关注php中文网其它相关文章!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值