HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

介绍这些新的输入类型:

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

telephone

color

1:email

在提交表单时会自动验证email的格式

效果:

2:url

在提交表单时会自动验证url的格式

效果:

3:number

可以限制输入的数字,step为上一个数字与下一个数字的间隔

效果:

4:range

滑动条,能过选择性的对限制范围内的数值进行设置

效果:

5:Date Pickers(数据检出器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

This is how Opera renders :

If you need a time to go with that date, Opera also supports :

If you only need a month + year (perhaps a credit card expiration date), Opera can render a :

Less common, but also available, is the ability to pick a specific week of a year with :

Last but not least, you can pick a time with :

其中图片中显示的UTC为世界统一时间

6:search

这里的datalist相当于下拉列表,可以进行选择

效果:

7:telephone

可输入一个电话号码

效果:

8:color

可以获取颜色

效果:

input标签表单类型的显示情况:

input html5 新特性,html5 input 新特性相关推荐

  1. html5学习笔记---01.HTML5介绍,02.HTML5的新特性

    2013/6/10 01.HTML5介绍 a.创梦技术qq交流群:CreDream:251572072 -------------------- a.创梦技术qq交流群:CreDream:251572 ...

  2. HTML5 和 CSS3 的新特性--HTML5 的新特性

    HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这 ...

  3. 页面显示 amp html6,浅谈HTML5 amp;amp; CSS3的新交互特性

    本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...

  4. 跟KingDZ学HTML5之九 HTML5新的 Input 种类

    好了,我们这节课讲解的可能有些难以测试,因为目前很多浏览器都不支持,这些新增加的标签,我也只能,尽可能的去找支持的浏览器给大家测试展示效果. HTML5中新增加了很多  Input 的种类. 1.&l ...

  5. html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  6. html5知识点:HTML5新特性

    最近几年web前端开发领域最热的话题当属HTML5,HTML5从根本上改变了开发商开发web应用的方式,从桌面浏览器到移动应用,这种语言和标准都正在影响并将继续影响着各种操作平台. 关于HTML5的介 ...

  7. HTML5有哪些表单新特性

    21. 检测属性支持 除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如: 22. Mark元素 把元素看做是高亮的作用,当我选择一段文字的时候,javascr ...

  8. web前端基础 html5+css3(十.html5css3新特性)

    1.html5新增的语义化标签(针对搜索引擎,提高优化) <header>:头部标签 <nav>:导航标签 <active>:内容标签 <section> ...

  9. HTML5对比HTML4带来的新变化

    HTML5入门 HTML5是HTML的最新版本,目标是更好地开发网络应用程序. HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性. 本文将对HTML5做一个大体的介绍. HTML5能做什么 ...

  10. 新的 HTML5 文档类型和字符集是,前端面试题--HTML5+CSS3(1)

    1.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

最新文章

  1. 怎样搞定分类表格数据?有人用TF2.0构建了一套神经网络 | 技术头条
  2. python名片管理系统视频_python视频学习笔记6(名片管理系统开发)
  3. SAP Spartacus store里引用的library是如何编译出来的
  4. C语言的条件编译#if, #elif, #else, #endif、#ifdef, #ifndef
  5. 计算机A级作文,关于被计算机的作文(共一篇)-疾风作文网
  6. 旷视科技印奇:孜孜不倦做硬件 看好3个应用场景
  7. duri oracle 连接字符串_C#连接Oracle数据库的连接字符串
  8. Ext JS学习第八天 Ext基础之 认识Ext.js 和Ext-more.js
  9. Squid 代理服务器
  10. 机器学习基础学习笔记
  11. Redis Lpush 命令
  12. 【视频插帧】XVFI: eXtreme Video Frame Interpolation
  13. 手机5款令人爱不释手的APP 好用到爆
  14. 微软与三维图形:抑制竞争和创新的案例研究
  15. 知识产权保护的内容有哪些?
  16. 红米note10和红米note9哪个值得买
  17. jquery-svg-pan-zoom实现svg拖拽放大
  18. outlook电子邮件解析_在Outlook中按会话对电子邮件进行排序
  19. 蓝牙5.2协议、主从一体、低功耗、工业级蓝牙模组BLE105新品上市
  20. FS4412开发板简介

热门文章

  1. 4.3. aliases
  2. GD2拖动验证码Thinkphp版
  3. 关于直播,所有的技术细节都在这里了(3)《转载》
  4. 关于Patter类和Match类
  5. Struts2的struts.xml的配置细节,OGNL,标签
  6. 转贴:Google Reader:信息背后的信息,无可替代的伟大
  7. Linux下mail服务器应用之邮件系统的安全性
  8. h3c ospf stub total stub nssa
  9. python数据变更邮件提醒_Python之Bilibili自动更新邮件提醒并任务栏图标「完整代码」...
  10. 详解python运行三种方式_详解python运行三种方式