热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5每日一练之input新增加的六种时间类型应用

今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的。注意:此种类型的input在Opera10+中效果为佳,Chro

今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的。

注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器



1、Date类型:

  1.       
  2.       

如果在之前,我们使用js+css+dom才能实现日历选择日期的效果,在HTML5中,我们只需要设置input为date类型即可,提交表单的时候也不需要我们验证数据了,它已经帮我们实现了。
运行效果如下图:

 






2、Time类型:

  1.       
  2.       

此类型是一个专门用来输入时间的文本框,在提交的时候检查是否输入了有效的时间。
运行效果如下图:







3、DateTime类型:

  1.       
  2.       

datetime类型的input元素是专门用来输入UTC日期和实践的文本框,在提交的时候,对日期和时间进行有效的检查。

运行效果如下图:







4、DateTime-Local类型:

  1.       
  2.       

此类型与datatime类型差不多,只不过是用来输入本地的日期和时间。

运行效果如下图:







5、Month类型:

  1.       
  2.       

month是一种专门输入月份的文本框,在日历中,你只能选择某一个月,不能选择某一天。

运行效果如下图:







6、Week类型:

  1.       
  2.       

week是专门用来输入周(星期)的文本框,W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周,同样不能选择某一天。

运行效果如下图:


推荐阅读
author-avatar
明霞学
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有