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部分: 一.驱动部分: ...
随机推荐
- struts2中利用POI导出Excel文档并下载
1.项目组负责人让我实现这个接口,因为以前做过类似的,中间并没有遇到什么太困难的事情.其他不说,先上代码: package com.tydic.eshop.action.feedback; impor ...
- linux下操作PostgreSQL的常用命令
一般性: \copyright 显示PostgreSQL的使用和发行许可条款 \g [文件] or; 执行查询 (并把结果写入文件或 |管道) \h [名称] SQL命令语法上的说明 ...
- Support Library官方教程(2)各支援包的特性详介(含表)*
快速阅读 包名 作用 位置 是否有资源 v4 提供了最多的api <sdk>/extras/android/support/v4/ y Multidex 把DEX文件生成apk < ...
- bzoj1564
嗯,这是一道简单题 注意二叉搜索树的子树中序一定是连续的 又因为取值修改是任意的并且修改代价与权值无关 不难想到把权值离散化,然后按找数据值排序,然后dp f[i][j][w]表示从i~j的节点构成一 ...
- jquery live hover绑定方法
$(".select_item span").live({ mouseenter: function() { $(this).addClass("hover") ...
- 利用ffmpeg解码h264流的代码
这里也直接给出代码: h264dec.h: #pragma once #include "tdll.h" #include "avcodec.h" #inclu ...
- POJ 1423 Big Number
题意:求n阶乘的位数. 解法:斯特林公式,,然后取log10就是位数了,因为精度问题需要化简这个式子,特判1. 代码: #include<stdio.h> #include<iost ...
- list用法详解
在这里感谢大牛们的奉献!此致敬礼! 本文转载自百度文库.作者如下.其中下面的count, count_if等函数的使用有些陈旧,如在编译时遇到问题,请百度. 标准模板库(STL)介绍 作者:Scott ...
- <转>Python运行的17个时新手常见错误小结
1)忘记在 if , elif , else , for , while , class ,def 声明末尾添加 :(导致 “SyntaxError :invalid syntax”) 该错误将发生在 ...
- Cadence关闭StartPage的方法
Cadence 16.5开始,打开原理图工具 Orcad Capture 时,总是会弹出startpage 页面,关闭它的方法: 解决方法如下: (1) View---Toolbar----Comma ...