HTML5中新型input类型

标签: 技术技巧 html5 input type input类型 | 发表时间:2014-06-13 02:36 | 作者:歪脖骇客
出处:http://www.webhek.com

你可能已经听说过,HTML5里引入了几种新的input类型。在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等。而HTML5到来之后,新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等。网上之所以还没有大量的出现对这些新型的input类型的使用,是因为还有很多人在使用古老的IE6/IE8,只有当使用这些古老浏览器的人所占的比例可以忽略不计时,那就是HTML5主导天下之日,那天也是我们Web开发人员的新纪元的开始。

下面是这几种新型input类型的实例演示,可能在不同的浏览器上它们的样式会稍微有些变化,但基本的功能都是一样的。

html5中的新型input类型

数字型 type=”number”

<input type="number">

效果:

日期型 type=”date”

<input type="date">

效果:

颜色选择器 type=”color”

<input type="color">

效果:

范围 type=”range”

<input type="range">

效果:

需要注意的是,如果你使用的是谷歌浏览器或Opera浏览器,当你点击日期类型的输入框时,会弹出日历,让你选择日期,但如果你使用的是火狐浏览器,很遗憾,火狐浏览器还没有实现弹出日历的功能,因为HTML5规范里没有规定实现日历的方法,所以各浏览器自己决定如何实现,相信不久之后火狐浏览器/IE浏览器也会有自己的弹出式日历框。

谷歌浏览器中date类型效果图:

谷歌浏览器中date类型效果图

谷歌浏览器中date类型效果图

相关 [html5 中新 input] 推荐:

HTML5中新型input类型

- - WebHek
你可能已经听说过,HTML5里引入了几种新的input类型. 在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等. 而HTML5到来之后,新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等.

html中input上传多个文件

- - CSDN博客Web前端推荐文章
如何使用html上传多个文件呢. 我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 不过有一个问题,只支持IE10+,连IE9都不支持,o(︶︿︶)o . 其实方法很简单<input type="file" name="upload">这样只能选择一个文件,<input type="file" multiple name="upload">这样就可以选择多个文件了,怎么样,很方便吧.

动态添加input表单元素的js代码

- - haohtml's blog
//功能:在表单中input file控件. //参数:parentID---要插入input file控件的父元素ID. // inputID----input file控件的ID,这个一定要和name保持一致的,否则会出问题. // maxNum --- 最大数量 0为不限制. alert('最多只允许添加' + maxNum + '个');.

IE6/7下移除button、input 默认边框和去掉焦点线

- - CSDN博客推荐文章
<input type="button" value="提交" class="input_btn"> <div>. 通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签,然后将样式写在这个标签上,并且把button和input的默认样式都去除掉.

Math Input Panel – 手写数学公式 | 小众软件 > 办公软件

- chris - 小众软件
讨厌写论文,更讨厌论文里面还有大量的公式. 一会上标、一会下标、一会积分、一会微分,有时还伴有分数等等,一起存在的话人都死了. 毕竟 Word 没有 Latex 写公式来得爽快,可惜 Latex 在“中国高校”不通用. 今天意外发现(也许是我 OUT),原来 windows 自带手写输入公式的软件,名叫 Math Input Panel ,就在开始-附件-数学输入面板可以找到.

input 输入框获得/失去焦点时隐藏/显示文字

- - CSDN博客Web前端推荐文章
这个标题可能比较拗口不好理解,但是我相信所有的人都见过这个效果,大家可以看本站右上角的搜索输入框,默认显示着“输入搜索内容”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“输入搜索内容”的提示. 很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的:.

Input Director – 一套鼠标键盘控制多台电脑 | 小众软件 > 实用工具

- 林 - 小众软件
Input Director 是款 Windows 下的一套鼠标键盘控制多台电脑工具. 小众曾介绍过 Synergy – 教你在局域网中用一套键盘/鼠标控制多台电脑,可以在跨平台的环境下用一套鼠标键盘控制多台电脑. Input Director 有着异曲同工之效. 这类软件的最大用途在于一个办公桌上同时拥有多台电脑,只需要一套鼠标键盘就可以方便的操作两台电脑,甚至可以共享剪贴板(测似成功),互相拷贝文件(测试未成功).

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.