热门标签 | 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。


推荐阅读
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • 本文探讨了在不使用服务器控件的情况下,如何通过多种方法获取并修改页面中的HTML元素值。除了常见的AJAX方式,还介绍了其他可行的技术方案。 ... [详细]
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
  • This document outlines the recommended naming conventions for HTML attributes in Fast Components, focusing on readability and consistency with existing standards. ... [详细]
  • 在现代网络环境中,两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效,但其配置复杂、步骤繁琐,难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc,它不仅简化了操作流程,还提供了强大的加密和跨平台支持。 ... [详细]
  • 网络运维工程师负责确保企业IT基础设施的稳定运行,保障业务连续性和数据安全。他们需要具备多种技能,包括搭建和维护网络环境、监控系统性能、处理突发事件等。本文将探讨网络运维工程师的职业前景及其平均薪酬水平。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
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社区 版权所有