HTML5表单教程之input新增加的六种时间类型
2013-09-26 11:27
525 查看
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类型即可,提交表单的时候也不需要我们验证数据了,它已经帮我们实现了。
运行效果如下图:
2、Time类型:
<form> <input id="w3cfuns_time" name="w3cfuns.com" type="time"/> <input type="submit" value="提交"/> </form>
此类型是一个专门用来输入时间的文本框,在提交的时候检查是否输入了有效的时间。
运行效果如下图:
3、DateTime类型:
<form> <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/> <input type="submit" value="提交"/> </form>
datetime类型的input元素是专门用来输入UTC日期和实践的文本框,在提交的时候,对日期和时间进行有效的检查。
运行效果如下图:
4、DateTime-Local类型:
<form> <input id="w3cfuns_datetime-local" name="w3cfuns.com" type="datetime-local"/> <input type="submit" value="提交"/> </form>
此类型与datatime类型差不多,只不过是用来输入本地的日期和时间。
运行效果如下图:
5、Month类型:
<form> <input id="w3cfuns_month" name="w3cfuns.com" type="month"/> <input type="submit" value="提交"/> </form>
month是一种专门输入月份的文本框,在日历中,你只能选择某一个月,不能选择某一天。
运行效果如下图:
6、Week类型:
<form> <input id="w3cfuns_week" name="w3cfuns.com" type="week"/> <input type="submit" value="提交"/> </form>
week是专门用来输入周(星期)的文本框,W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周,同样不能选择某一天。
运行效果如下图:
HTML5在此方面做的还算比较完善了,至于样式的定义,欢迎大家讨论!
本文由 JS代码站 收集改动或原创丨www.sitejs.cn | 转载 请标明出处
本文原地址:http://www.sitejs.cn/sitejs-12729-1.html
相关文章推荐
- HTML5表单教程之input新增加的5种其他类型1种标签
- HTML5表单教程之4种自动验证属性
- HTML5教程之音频Audio标签应用
- HTML5 离线存储(三)
- HTML5教程之video标签的应用
- HTML5表单教程之Form新属性的应用
- Taking Advantage of HTML5 and CSS3 with Modernizr
- Adobe Edge 如何制作全背景图
- 尝试新的东西——HTML5——html5新型标签
- 【技术】HTMl5的cookie, sessionStorage和localStorage
- Web开发人员不可不知的10个HTML5工具
- AnyChart图表工具6.1.0版本 新增HTML5引擎
- HTML5学习教程
- HTML5中的SVG的介绍
- 翻译-你必须知道的28个HTML5特征、窍门和技术
- html5学习笔记 1 文档模板
- HTML5图片预览
- 2个比较成熟的HTML5可视化3D建模设计系统
- 用html5的canvas生成图片并保存到本地
- html5的变化