html5之input类型

html5拥有很多新的表单输入类型，这些类型提供更好的输入控制和验证，以前我们需要自己通过脚本去控制的功能，现在标签已经帮我们完成了。这里我将详细介绍input类型为：date、datetime、datetime-local、time、month、week、email、number、range、search、tel、url、color的用法！
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。建议使用Opera浏览器测试

date类型

date类型允许你从一个时机选择期选择一个日期，以前我们都是使用JS时间插件完成的功能，现在已经如此简单！代码如下：

    生日: 

效果：

date类型.png

注意:低版本的火狐和IE不支持该属性，建议使用Opera浏览器测试！

datetime类型

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

效果：

datetime类型.png

注意:建议使用Opera浏览器测试！

datetime-local类型

datetime-local 类型允许你选择一个日期和时间 (无时区)。此类型与datatime类型差不多，只不过是用来输入本地的日期和时间。

time类型

time 类型允许你选择一个时间，在提交的时候检查是否输入了有效的时间。代码如下：

    选择时间: 

效果：

time类型.png

注意:建议使用Opera浏览器测试！

month类型

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

效果：

month类型.png

注意:建议使用Opera浏览器测试！

week类型

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

效果：

week类型.png

注意:建议使用Opera浏览器测试！

email类型

email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效。代码如下：

    

         E-mail: 
        
    

注意: Internet Explorer 9 及更早IE版本不支持type="email" 。

number类型

number 类型用于应该包含数值的输入域。我们还能够设定对所接受的数字的限定，step为上一个数字与下一个数字的间隔，value - 规定默认值。代码如下：

range类型

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。step - 规定合法的数字间隔，value - 规定默认值。代码如下：

search类型

search 类型用于搜索域，比如站点搜索或 Google 搜索。一般是语义话，代码如下：

tel类型

tel可输入一个电话号码,大部分浏览器不支持，代码如下：

url类型

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证是否符合url标准。代码如下：

    

        添加您的主页: 
        
    

color类型

color 类型用在input字段主要用于选取颜色，代码如下：

    

         选择你喜欢的颜色: 
        
    

效果：

color类型.png

注意:建议使用Opera浏览器测试！