HTML5每日一练之input新增加的六种时间类型应用
今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的。
注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器
1、Date类型:
- <form>
- <input id="w3cfuns_date" name="w3cfuns.com" type="date"/>
- <input type="submit" value="提交"/>
- </form>
复制代码
如果在之前,我们使用js+css+dom才能实现日历选择日期的效果,在HTML5中,我们只需要设置input为date类型即可,提交表单的时候也不需要我们验证数据了,它已经帮我们实现了。
运行效果如下图:
<ignore_js_op>
2、Time类型:
- <form>
- <input id="w3cfuns_time" name="w3cfuns.com" type="time"/>
- <input type="submit" value="提交"/>
- </form>
复制代码
此类型是一个专门用来输入时间的文本框,在提交的时候检查是否输入了有效的时间。
运行效果如下图:
<ignore_js_op>

3、DateTime类型:
- <form>
- <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
- <input type="submit" value="提交"/>
- </form>
复制代码
datetime类型的input元素是专门用来输入UTC日期和实践的文本框,在提交的时候,对日期和时间进行有效的检查。
运行效果如下图:
<ignore_js_op>

4、DateTime-Local类型:
- <form>
- <input id="w3cfuns_datetime-local" name="w3cfuns.com" type="datetime-local"/>
- <input type="submit" value="提交"/>
- </form>
复制代码
此类型与datatime类型差不多,只不过是用来输入本地的日期和时间。
运行效果如下图:
<ignore_js_op>

5、Month类型:
- <form>
- <input id="w3cfuns_month" name="w3cfuns.com" type="month"/>
- <input type="submit" value="提交"/>
- </form>
复制代码
month是一种专门输入月份的文本框,在日历中,你只能选择某一个月,不能选择某一天。
运行效果如下图:
<ignore_js_op>

6、Week类型:
- <form>
- <input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
- <input type="submit" value="提交"/>
- </form>
复制代码
week是专门用来输入周(星期)的文本框,W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周,同样不能选择某一天。
运行效果如下图:
<ignore_js_op>

HTML5每日一练之input新增加的六种时间类型应用的更多相关文章
- HTML5每日一练之input新增加的5种其他类型1种标签应用
今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...
- HTML5每日一练之input新增加的URL类型与email类型应用
1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...
- HTML5每日一练之figure新标签的应用
igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...
- HTML5每日一练之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...
- HTML5每日一练之progress标签的应用
progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...
- HTML5每日一练之OL列表的改良
在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...
- HTML5每日一练之视频标签的应用
与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...
- html5 javascript 新增加的高级选择器更精准更实用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 在Android4.4上新增加keycode
keycode是android定义好的,但是有时候无法满足需要,进行定制化难免会涉及到新增加keycode.分成两部分,驱动和framework,这里主要讲解framework部分: 一.驱动部分: ...
随机推荐
- hdu 4952 Number Transformation (找规律)
题目链接 题意:给你个x,k次操作,对于第i次操作是:要找个nx,使得nx是>=x的最小值,且能整除i,求k次操作后的数 分析: 经过打表找规律,会发现最后的x/i,这个倍数会趋于一个固定的值, ...
- sdut 2840 Best string Orz~ (dp)
题目 题意:有n1个o, n2个r, n3个z, n4个~, 求有多少种组合使 组合出来的字符串的任意前缀都满足 o的个数>=r的个数, r的个数>=z的个数 …………………… 思路:递推 ...
- Android系列之Fragment(一)----Fragment加载到Activity当中
Android上 的界面展示都是通过Activity实现的,Activity实在是太常用了.但是Activity也有它的局限性,同样的界面在手机上显示可能很好看, 在平板上就未必了,因为平板的屏幕非常 ...
- ionic preparing for ios 9
http://blog.ionic.io/preparing-for-ios-9/ Preparing for iOS 9 Tweet By Max on September 12, 2015 i ...
- Java [Leetcode 112]Path Sum
题目描述: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding ...
- 移动开发之浅析cocos2d-x的中文支持问题
题记:这阵子一直在学习cocos2d-x,其跨平台的特性确实让人舒爽,引擎的框架概念也很成熟,虽然相应的第三方工具略显单薄,但也无愧是一件移动开发的利器啊,有兴趣的朋友有时间就多了解吧. 使用引擎的过 ...
- win7和centos双系统安装
几年之前为了安装xp和linux的双系统曾折腾了好多天,今天为了安装这个win7和centos双系统,也折腾了两天多,哦,我的天,安装个双系统,怎么这么麻烦呢? 没有来得及整理,先铺上草稿,供同志们参 ...
- HDU 5878 I Count Two Three
I Count Two Three Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- Python 3 加密简介
导读 Python 3 的标准库中是没多少用来解决加密的,不过却有用于处理哈希的库.在这里我们会对其进行一个简单的介绍,但重点会放在两个第三方的软件包:PyCrypto 和 cryptography ...
- 同行评审 Peer Review
周五的课上,章老师给我们上了一节关于同行评审(Peer Review)的课程,让我了解了以前并不熟悉的这一过程.课上我们就姚思丹同学项目组做的项目,分组进行了审查. 首先介绍一下同行评审(Peer R ...