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.累积预扣法:本期应预扣预缴税…

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元】

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

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

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

让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…

让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;电视端有“爱投屏”即可流畅使用。步骤如下&…

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

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

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

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

html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...

通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧)。我们要做什么&#xff1f;下面是最终代码&#xff0c;也就是我们将要最终实现的演示&#xff1a;基础准备对于这个实现&#xff0c;我们需要一个简单的 div &#xff0c;并且样式类名为 ball &#xff1a;我…

定时器中断实验 编写程序使定时器0或者定时器1工作在方式1,定时50ms触发蜂鸣器。

编写程序使定时器0或者定时器1工作在方式1&#xff0c;定时50ms触发蜂鸣器。 程序&#xff1a; #include<reg51.h> sbit fmP2^3; unsigned char cnt; int main(void) { TMOD0x01; TH0(65536-46083)/256; TL0(65536-46083)%256; cnt0; TR01; EA1; ET01; while(1); } void …

iOS打开沙盒html,iOS WKWebView加载本地/沙盒HTML及css、images

注意这里加载的是本地的不是沙盒里的,加载沙盒的方法在最下面。先上代码&#xff1a;NSString *path [[NSBundle mainBundle] pathForResource:“local.html" ofType:nil];[_wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];注意&am…

用python做频数分析_使用Python进行描述性统计

2 使用NumPy和SciPy进行数值分析 2.1 基本概念1 from numpy import array 2 from numpy.random import normal, randint 3 #使用List来创造一组数据 4 data [1, 2, 3] 5 #使用ndarray来创造一组数据 6 data array([1, 2, 3]) 7 #创造一组服从正态分布的定量数据 8 data norm…

串行口实验 编写程序利用串口调试助手通过串口给实验板发送数据(数据范围0x00-0xfe),单片机将接受到的数据加1后再发送给PC机。

编写程序利用串口调试助手通过串口给实验板发送数据&#xff08;数据范围0x00-0xfe&#xff09;&#xff0c;单片机将接受到的数据加1后再发送给PC机。 程序&#xff1a; #include<reg51.h> #define uchar unsigned char #define uint unsigned int uchar temp; int main…

中学生 学python_中小学生为什么要学Python编程

中小学生为什么要学Python编程&#xff1f;未来是人工智能的时代&#xff0c;有理由相信Python将发挥更大的作用。教育部下发的《2018年度普通高等学校本科专业备案和审批结果的通知》显示&#xff0c;新增备案本科专业79个、新增审批本科专业19个。 呼声极高的人工智能专业被列…