完善：HTML5表单新特征简介与举例.docVIP

完善：HTML5表单新特征简介与举例 编辑点评：本文将向您讲述HTML5表单的新特征并辅以实例。 　　一、前言一撇 　　其实关于HTML5的表单特征早在去年你必须知道的28个HTML5特征、窍门和技术一文中就有所介绍（在第十一项），不过，有些遗憾的是，此部分的介绍是以视频形式展示的，其实，是视频还好啦，关键是TouTuBe视频，需要越狱观看。得，像我这样安分守已的良民，除了看空姐，其他情况都是懒得fan墙的，所以这部分视频展示的内容，其实就是个空。 　　所以，这里打个补丁，把这部分内容完善下。本文的大致内容有：　　# input type=number /　　# input type=range /　　# input type=date / 以及其他时间选择器控件　　# input type=color / 颜色选择器　　# input type=search /　　# datalist元素和list属性 　　# HTML5表单验证与CSS3的暧昧关系 　　二、HTML5表单新特征 　　1. type=number 　　type=number的HTML表单元素可以让你以按键的方式改变文本框中的值，这种效果在window系统中经常见到，例如： 　　懒惰的人宁可躺在椅子上点点鼠标也不元素坐起来按键盘，所以，相比键盘输入，点击输入也是有市场的。这就是为何HTML5表单中有数值选择控件。 　　大致HTML代码如下： 人数：input type=number value=1 / 　　如果加上点合适的宽度限制，则在Chrome浏览器下效果（估计UI与系统主题相关）如下： 　　目前还支持的浏览器就是Opera 11了，不过Opera下的上下增减数值的按钮长得有些歪瓜裂枣，很有抽象派的风格。 　　您可以狠狠地点击这里：HTML5表单之nubmer控件demo 　　2. type=range　　range中文意义值区域范围，这类效果在window系统中也屡见不鲜，如下截图： 　　HTML5中有类似效果的input控件，只要定义其type为range就可以了，so easy! 拖动范围：input type=range value=50 / 　　默认情况下的value范围是0~100，所以呢，value=50，则拖动条就在区域范围的中间。如下图所示： 　　我的Firefox目前版本3.6，尚未支持此特性。不过，Chrome，Opera，以及Safari4下均有效果，只是毕竟不是同一个爸爸，所以模样上还有有些差异的，这里就不展示这些差异了。 　　您可以狠狠地点击这里：HTML5表单之range控件demo 　　在一开始提到的你必须知道的28个HTML5特征、窍门和技术一文中最后一项，也就是第二十八项的精湛效果实例就是在range类控件上实现的效果，里面还涉及到了min，max属性，以及step属性，是个非常值得观摩学习体验的例子。 　　3. type=date以及其他时间控件　　这是时间选择器控件，以后选择时间久不要去折腾什么js插件了，直接一个date属性，然后，你就可以边和咖啡边和旁边扫地的老太太交流代码了。不信，你看： 选择日期：input type=date value=2011-01-04 / 　　结果在支持的浏览器下，例如Opera下，就有如下效果： 　　这不活脱脱的一个时间选择器嘛！ 　　除了长相有些磕碜，其他还是挺让人欣喜的。 　　时间类空间，不仅有date类型的，还有time类型，还有datetime，week，month。 　　显然，顾名思意，date类型是选择日期，time类型是选择时间，datetime是日期时间一起选，而week是选择星期，month实现选择月份。 　　您可以狠狠地点击这里：HTML5表单时间类空间demo 　　我测试了番，设置刚把Safari升级到5.0版本，发现，目前而言，就Opera浏览器支持这类时间控件。效果分别如下：　　type=time时效果有些类似type=number，可以通过点击切换事件，默认每点一次，时间切换1分钟，鼠标长按也是有效的。 选择时间：input type=time value=22:52 / 　　选择时间： 　　type=week下，鼠标经过的时候，每一行（代表一周）的日期背景色会集体变暗，如下图： 　　而type=month的时候，是整月的背景色变深，如下图： 　　两者选择后的数据值如下： 　　4. type=color　　这是颜色选择器控件，相当的给力。使用很简单，如下： 选取颜色：input type=color value=#34538b / 　　结果在Opera浏览器下默认效果如下： 　　默认input控件有个圆圆的颜