html5新增的type类型,html5新增的type类型

html5新增了很多的input类型,省去了前端开发者写javascript,调用插件等一系列麻烦的操作,下面介绍一些新增的类型。注释直接写在HTML代码里了:

H5中新增的input标签

/*search类型专用于“搜索”,可以在输入后点击“X”直接清空输入框*/

search----

/*tel类型用于输入电话号码,在pattern里写正则,title写提示错误信息*/

tel----

/*url类型用于匹配url,要求输入须为http://或https://开头*/

url----

/*email类型要求输入必须是邮箱格式,使用required属性则要求必填,multiple属性则允许输入多个,输入多个时使用西文字符,分割*/

email----

/*datetime类型貌似各浏览器暂不支持,按照H5规范应该是输入时间日期类型,可以自己写个正则去验证*/

datetime----

/*date类型要求输入年月日,不用使用插件,可以调用出选择年月日的面板*/

date----

/*month类型要求输入年月,同上*/

month----

/*week类型要求输入X年第X周,同上*/

week----

/*time类型要求输入X时X分,同上*/

time----

/*number类型要求输入整数,用min和max控制大小,step控制“跳数”*/

number-----

/*range类型提供了一个滑动条,以step为跳数,max和min控制大小,根据匹配的output标签的id来控制默认的大小,看下面的图就明白了*/

range----

50

/*color类型要求输入颜色,会自动调用颜色选择窗,很方便*/

color----

/*file类型可以使用multiple控制是否选择多个,accept控制选择的文件类型*/

file----

0818b9ca8b590ca3270a3433284dd417.png

这些新增的input类型在chrome和opera浏览器里支持得比较好,但是各浏览器表现出来可能各有差异。这些类型大部分时为移动端服务等 像这些input 验证 在小屏幕终端 就能直接呼出不同的键盘,提交表单前验证节省流量

另外:form标签还有一个属性:formnovalidate。使用该属性可以取消该表单里的所有验证,个人感觉没什么用。在H5规范里input标签里有个novalidate属性,可以单独地取消某个input的验证,然后各浏览器并不支持,移动端现在也不支持,当初w3c写在了H5的规则里希望能有这种属性,可能以后会支持吧,个人感觉好像没什么卵用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html提交表单使用python计算_教你使用Python实现新个税计算器

自从采用新个税计算方法后,每个月发工资你是否真的清楚扣多少税?今天跟大家分享下如何计算,希望大家喜欢。计税方法科普个税方法这里需要知道的知识点:1.个税起征点调到 5000;2.累积预扣法:本期应预扣预缴税…

qos和被qos是什么意思

QoS QoS(Quality of Service,服务质量)指一个网络能够利用各种基础技术,为指定的网络通信提供更好的服务能力,是网络的一种安全机制, 是用来解决网络延迟和阻塞等问题的一种技术。 被QoS 说白了就是在网…

html的表单标记格式,HTML表单标签

表单:专门用来搜集用户信息元素:在HTML中 标签、标记、表单都是指HTML中的标签如: a标签、a标记、a元素表单元素:也是HTML中的一些标签,只是它们比较特殊,有特殊的外观的默认的功能表单格式:常见…

axure 小程序 lib_使用maven和fat jar/war运行应用程序的对比

简介上篇文章我们介绍了Spring boot的fat jar/war包,jar/war包都可以使用 java -jar 命令来运行,而maven也提供了mvn spring-boot:run 命令来运行应用程序,下面我们看看两者有什么不同。Spring Boot Maven Plugin上篇文章我们提到了Spring Bo…

VLAN端口转发原则

VLAN端口转发原则 1.Access端口转发原则 当Access端口收到帧时 如果该帧不包含802.1Q tag header,将打上端口的PVID; 如果该帧包含802.1Q tag header,交换机不作处理,直接丢弃。 当Access端口发送帧时 剥离802.1Q tag header…

新版opencv兼容旧版_【标准换版】关于家用和类似用途电器用外置电源适配器、充电器和内置开关电源产品认证执行新版标准的通知...

各相关认证企业:GB4343.1-2018《家用电器、电动工具和类似器具的电磁兼容要求 第1部分:发射》标准(以下简称“新版标准”)已发布,并将于2020年6月1日实施,新版标准自实施之日起替代GB4343.1-2009标准&#…

html万花筒照片代码,怎样拍出万花筒效果

ipadair相机怎么拍出万花筒的效果我这边是ipad3,不过应该和air差不多,有一个photo booth,里面有个万花筒效果照相,点那个进去照相就好了。制作前的准备工作 尽量使用最简单的工具 1 镜子:你可以去玻璃店购买些镜子的边…

delay 芯片时序output_【第二章 STA概念 上】静态时序分析圣经翻译计划

本文由知乎赵俊军授权转载,知乎主页为https://www.zhihu.com/people/zhao-jun-jun-19本章节介绍CMOS技术的基础知识以及执行静态时序分析所涉及的术语。2.1 CMOS逻辑设计2.1.1 基本MOS结构MOS晶体管(NMOS和PMOS)的物理实现如图2-1所示。源极(source)和漏极(drain)区…

html播放七牛云视频,直传七牛云视频播放商业版【价值199元】

福利:本资源正在众筹中,如贴内有下载链接则已众筹成功可下载资源,否则暂无资源,你可以在官方购买此资源后,用于【交换】魔趣吧内已发布的其他你需要的极品资源!这样你既可以买到自己想要的资源,…

数码管显示实验一 编写程序让8只数码管同时显示零

编写程序让数码管同时显示零 此实验是共阳极写法 程序&#xff1a; #include <reg51.h> unsigned char segment[] {0xff,0x7f,0xbf,0xdf,0xef,0xf7,0xfb,0xfd,0xfe}; unsigned char k0; int main(void) { TMOD0x00; TL0(8192-2000)%32; TH0(8192-2000)/256; TR01; EA1…

andpods授权码订单号分享_微信OAuth2授权登录

前言 第三方登录是应用开发中的常用功能&#xff0c;通过第三方登录&#xff0c;我们可以更加容易使用户登录我们的应用或者网站。很多网站都提供了第三方登录的功能&#xff0c;在他们的官网中&#xff0c;都提供了如何接入第三方登录的文档。但是&#xff0c;假如不同的网站文…

让8只数码管初始显示零,每隔大约1s加一显示,到数码管显示9后,再从一开始显示

让8只数码管初始显示零&#xff0c;每隔大约1s加一显示&#xff0c;到数码管显示9后&#xff0c;再从一开始显示 用延时函数实现加一显示 程序&#xff1a; #include <reg51.h> void delay(unsigned char n); int main(void) { unsigned char led[]{0xC0,0xF9,0xA4,0xB…

计算机项目经理专业,IT项目经理的对口专业

IT项目经理的对口专业IT项目经理是从事IT计算机相关的项目管理人员&#xff0c;IT项目经理需要具有一定的专业能力和管理能力&#xff0c;是一个较为高端的职位。有朋友问&#xff1a;IT项目经理的对口专业是什么?下面我们给大家介绍一下。如今&#xff0c;在互联网蓬勃发展的…

让8只数码管从左往右显示1、2、3、4、、、8

编写实验学习数码管动态显示&#xff0c;让8只数码管从左往右显示1,2&#xff0c;3,4&#xff0c;&#xff0c;&#xff0c;8 程序&#xff1a; #include <reg51.h> unsigned char led[]{0xF9,0xA4,0xB0,0x99,0x92,0x82,0xF8,0x80};//0-9的字型码 unsigned char segment[…

miracast投屏软件下载_手机画面如何投屏到电视?

投屏方法详解&#xff0c;拆解步骤&#xff0c;视频演示&#xff0c;讲到你会用为止&#xff01;安卓手机Miracast镜像安卓手机Miracast镜像可谓刚需&#xff0c;这种镜像方式的一大优点就是手机端不用再另装其他软件&#xff0c;电视端有“爱投屏”即可流畅使用。步骤如下&…

iec61131 3 html5,IEC61131-3{ed3.0}标准资料.doc

IEC61131-3{ed3.0}标准资料IEC 61131-3?Edition 3.0 2013-02INTERNATIONALSTANDARDNORMEINTERNATIONALEProgrammable controllers –Part 3: Programming languagesAutomates programmables –Partie 3: Langages de programmationTHIS PUBLICATION IS COPYRIGHT PROTECTEDCop…

外部中断实验 编写程序学习外部中断的电平触发方式。无中断时发光让发光二极管从左到右依次点亮,有外部中断请求时,4位数码管从0000开始加1显示(加到9999后复位为0000),同时蜂鸣器报警。

编写程序学习外部中断的电平触发方式。无中断时发光让发光二极管从左到右依次点亮&#xff0c;有外部中断请求时&#xff0c;4位数码管从0000开始加1显示(加到9999后复位为0000)&#xff0c;同时蜂鸣器报警。 程序&#xff1a; #include<reg51.h> #define uchar unsigne…

flash一个按钮控制动画_PLC三组灯用一个按钮控制

今天作一个PLC小练习用一个按钮控制三组或三个灯,以达到控制灯的亮度,由PLC组成一个控制器,每按一次按钮增加一组灯亮,三组灯全亮后,每按一次按钮,灭一组灯(为了使每组灯亮的时间尽量相等,要求先亮的灯先灭),如果按下按钮的时间超过2S,则灯全灭.模拟练习设M600.0是按钮1M800.0是…

51单片机外部中断实验 设置中断优先级寄存器,当有外部中断0请求中断时,中断程序执行发光二极管程序,在此过程中,外部中断1也有中断请求,外部中断0的中断程序将被中断去执行外部中断1的中断程序(数码管

设置中断优先级寄存器&#xff0c;当有外部中断0请求中断时&#xff0c;中断程序执行发光二极管程序&#xff0c;在此过程中&#xff0c;外部中断1也有中断请求&#xff0c;外部中断0的中断程序将被中断去执行外部中断1的中断程序&#xff08;数码管加1显示程序&#xff09;。 …

下载 6g 概念及愿景白皮书_6G,到底有多6?6G概念及愿景白皮书正式发布!

近日赛迪智库正式发布《6G概念及愿景白皮书》白皮书从6G愿景、6G应用场景6G网络性能指标、6G潜在关键技术国际组织和各国6G研究进展等方面展开讨论并提出加快我国推进6G研发的相关建议以为业界在面向2030网络及6G研究方面提供重要参考话又说回来6G究竟是个啥6G&#xff0c;即第…