热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

HTML5<datalist>标签有哪些属性?HTML5<datalist>标签的具体用法了解一下。本篇文章主要讲解了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。


推荐阅读
  • Windows 7 64位系统下Redis的安装与PHP Redis扩展配置
    本文详细介绍了在Windows 7 64位操作系统中安装Redis以及配置PHP Redis扩展的方法,包括下载、安装和基本使用步骤。适合对Redis和PHP集成感兴趣的开发人员参考。 ... [详细]
  • 本文介绍了如何利用 Spring Boot 和 Groovy 构建一个灵活且可扩展的动态计算引擎,以满足钱包应用中类似余额宝功能的推广需求。我们将探讨不同的设计方案,并最终选择最适合的技术栈来实现这一目标。 ... [详细]
  • 在项目部署后,Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查,我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]
  • C#设计模式学习笔记:观察者模式解析
    本文将探讨观察者模式的基本概念、应用场景及其在C#中的实现方法。通过借鉴《Head First Design Patterns》和维基百科等资源,详细介绍该模式的工作原理,并提供具体代码示例。 ... [详细]
  • 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式,涵盖常见属性及跨浏览器兼容性问题。发布时间:2020-09-14 14:46:29;来源:亿速云;阅读量:58;作者:小新。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • Nginx 反向代理与负载均衡实验
    本实验旨在通过配置 Nginx 实现反向代理和负载均衡,确保从北京本地代理服务器访问上海的 Web 服务器时,能够依次显示红、黄、绿三种颜色页面以验证负载均衡效果。 ... [详细]
  • 本文深入探讨了SQL数据库中常见的面试问题,包括如何获取自增字段的当前值、防止SQL注入的方法、游标的作用与使用、索引的形式及其优缺点,以及事务和存储过程的概念。通过详细的解答和示例,帮助读者更好地理解和应对这些技术问题。 ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
  • 嵌入式开发环境搭建与文件传输指南
    本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境,并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]
  • 本文介绍了如何使用JavaScript的Fetch API与Express服务器进行交互,涵盖了GET、POST、PUT和DELETE请求的实现,并展示了如何处理JSON响应。 ... [详细]
  • 简化报表生成:EasyReport工具的全面解析
    本文详细介绍了EasyReport,一个易于使用的开源Web报表工具。该工具支持Hadoop、HBase及多种关系型数据库,能够将SQL查询结果转换为HTML表格,并提供Excel导出、图表显示和表头冻结等功能。 ... [详细]
  • 探索新一代API文档工具,告别Swagger的繁琐
    对于后端开发者而言,编写和维护API文档既繁琐又不可或缺。本文将介绍一款全新的API文档工具,帮助团队更高效地协作,简化API文档生成流程。 ... [详细]
  • 深入解析Serverless架构模式
    本文将详细介绍Serverless架构模式的核心概念、工作原理及其优势。通过对比传统架构,探讨Serverless如何简化应用开发与运维流程,并介绍当前主流的Serverless平台。 ... [详细]
  • 本文探讨了如何解决PHP文件无法写入本地文件的问题,并解释了PHP文件中HTML代码无效的原因,提供了一系列实用的解决方案和最佳实践。 ... [详细]
author-avatar
天凉好个秋骄阳_213
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有