今天介绍一下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>

复制代码

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

 

2、Time类型:

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

复制代码

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

3、DateTime类型:

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

复制代码

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

运行效果如下图:
<ignore_js_op>

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类型差不多,只不过是用来输入本地的日期和时间。

运行效果如下图:
<ignore_js_op>

5、Month类型:

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

复制代码

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

运行效果如下图:
<ignore_js_op>

6、Week类型:

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

复制代码

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

运行效果如下图:
<ignore_js_op>

HTML5每日一练之input新增加的六种时间类型应用的更多相关文章

  1. HTML5每日一练之input新增加的5种其他类型1种标签应用

    今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...

  2. HTML5每日一练之input新增加的URL类型与email类型应用

    1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...

  3. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

  4. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  5. HTML5每日一练之progress标签的应用

    progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...

  6. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  7. HTML5每日一练之视频标签的应用

    与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...

  8. html5 javascript 新增加的高级选择器更精准更实用

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. 在Android4.4上新增加keycode

    keycode是android定义好的,但是有时候无法满足需要,进行定制化难免会涉及到新增加keycode.分成两部分,驱动和framework,这里主要讲解framework部分: 一.驱动部分: ...

随机推荐

  1. struts2中利用POI导出Excel文档并下载

    1.项目组负责人让我实现这个接口,因为以前做过类似的,中间并没有遇到什么太困难的事情.其他不说,先上代码: package com.tydic.eshop.action.feedback; impor ...

  2. linux下操作PostgreSQL的常用命令

    一般性: \copyright 显示PostgreSQL的使用和发行许可条款          \g [文件] or; 执行查询 (并把结果写入文件或 |管道) \h [名称] SQL命令语法上的说明 ...

  3. Support Library官方教程(2)各支援包的特性详介(含表)*

    快速阅读 包名  作用  位置 是否有资源 v4 提供了最多的api <sdk>/extras/android/support/v4/ y Multidex 把DEX文件生成apk < ...

  4. bzoj1564

    嗯,这是一道简单题 注意二叉搜索树的子树中序一定是连续的 又因为取值修改是任意的并且修改代价与权值无关 不难想到把权值离散化,然后按找数据值排序,然后dp f[i][j][w]表示从i~j的节点构成一 ...

  5. jquery live hover绑定方法

    $(".select_item span").live({ mouseenter: function() { $(this).addClass("hover") ...

  6. 利用ffmpeg解码h264流的代码

    这里也直接给出代码: h264dec.h: #pragma once #include "tdll.h" #include "avcodec.h" #inclu ...

  7. POJ 1423 Big Number

    题意:求n阶乘的位数. 解法:斯特林公式,,然后取log10就是位数了,因为精度问题需要化简这个式子,特判1. 代码: #include<stdio.h> #include<iost ...

  8. list用法详解

    在这里感谢大牛们的奉献!此致敬礼! 本文转载自百度文库.作者如下.其中下面的count, count_if等函数的使用有些陈旧,如在编译时遇到问题,请百度. 标准模板库(STL)介绍 作者:Scott ...

  9. <转>Python运行的17个时新手常见错误小结

    1)忘记在 if , elif , else , for , while , class ,def 声明末尾添加 :(导致 “SyntaxError :invalid syntax”) 该错误将发生在 ...

  10. Cadence关闭StartPage的方法

    Cadence 16.5开始,打开原理图工具 Orcad Capture 时,总是会弹出startpage 页面,关闭它的方法: 解决方法如下: (1) View---Toolbar----Comma ...