Chinaunix首页 | 论坛 | 博客
  • 博客访问: 188863
  • 博文数量: 62
  • 博客积分: 1477
  • 博客等级: 上尉
  • 技术积分: 475
  • 用 户 组: 普通用户
  • 注册时间: 2012-07-11 14:28
文章分类

全部博文(62)

文章存档

2012年(62)

我的朋友

分类: 系统运维

2012-07-13 10:12:41

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

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



1、Date类型:


点击(此处)折叠或打开

  1. <form>
  2.           <input id="w3cfuns_date" name="w3cfuns.com" type="date"/>
  3.           <input type="submit" value="提交"/>
  4.     </form>

Powered by


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




2、Time类型:


点击(此处)折叠或打开

  1. <form>
  2.           <input id="w3cfuns_time" name="w3cfuns.com" type="time"/>
  3.           <input type="submit" value="提交"/>
  4.     </form>

Powered by


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





3、DateTime类型:

点击(此处)折叠或打开

  1. <form>
  2.           <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
  3.           <input type="submit" value="提交"/>
  4.     </form>


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

运行效果如下图:
HTML5时间类型应用 - datetime





4、DateTime-Local类型:

点击(此处)折叠或打开

  1. <form>
  2.           <input id="w3cfuns_datetime-local" name="w3cfuns.com" type="datetime-local"/>
  3.           <input type="submit" value="提交"/>
  4.     </form>


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

运行效果如下图:
HTML5时间类型应用datetime-local





5、Month类型:

点击(此处)折叠或打开

  1. <form>
  2.           <input id="w3cfuns_month" name="w3cfuns.com" type="month"/>
  3.           <input type="submit" value="提交"/>
  4.     </form>


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

运行效果如下图:
HTML5时间类型应用 - month





6、Week类型:


点击(此处)折叠或打开

  1. <form>
  2.           <input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
  3.           <input type="submit" value="提交"/>
  4.     </form>

Powered by


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

运行效果如下图:
HTML5时间类型应用 - week



HTML5在此方面做的还算比较完善了,至于样式的定义,欢迎大家在此讨论!
阅读(1146) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~