HTML5 input新增的几种类型（数字、日期、颜色选取、范围）

CodeAE

你可能已经听说过，HTML5里引入了几种新的input类型。在HTML5之前，大家熟知的有

input类型包括：text(输入框)，hidden(隐藏域)，submit(提交按钮)等。
新增的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类型效果图

[Html/CSS] HTML5 input新增的几种类型（数字、日期、颜色选取、范围）

相关帖子

excel数字显示e+17怎么恢复？excel数字变成了小数点+E+17的解决方法

excel数字下拉递增怎么设置？

iOS不必现崩溃的点对点解析以及治理

excel怎么设置日期格式固定输入日期格式设置方法

Excel数字变成井号怎么办？Excel数字变成井号的解决方法

数字文件夹无法删除解决方法

HTML5 placeholder美化input背景提示文字

CodeAE LV9