[转]值得关注的HTML5表单新特性_前端技术_日志_DTOP

[转]值得关注的HTML5表单新特性

来源：[转]值得关注的HTML5 表单新特性发布时间：2011-10-04 23:44:31 浏览次数：次【字体：小大】

HTML5 表单新特性：等待了12年之久，我们迎来了HTML5主要修订版本。虽然此版本仍处于测试阶段并且没有宣布正式推出的日期，HTML5的网页设计师和程序员已经就开始关注，并对最新功能展开了热烈讨论。

        HTML5新特性的目的是改善嵌入，比如视频和音频等多媒体的支持，为开发者和终端用户供简单的编程和更好的用户体验。现在互联网世界都在等待，浏览器更新时能支持HTML5的新版本。HTML5已经被很多浏览器支持，比如Safari, Chrome, FireFox, Opera, IE9，它是向后兼容的，但是现在的浏览器不能完全兼容HTML5。

       网站升级到HTML5是相当容易的，因为它兼容HTML4。你只需要修改你的DOCTYPE。这种新的更新有助于让事情变得简单，所以你现在就可以更新你所有的网站，它们不会崩溃，因为所有HTML4的标签在HTML5还是100％支持的。

        HTML5的表单定义了十几个新的输入类型和特性，这些新增元素可以让程序员更加简单的进行编程。下面我们就来讲讲这些新的特性。

一、输入框占位符

HTML4中开发人员都使用JavaScript和jQuery做输入框占位符，而在HTML5中，开发人员可以非常容易的显示一个占位符。什么是占位符？占位符就是出现在输入框的提示文本，当你点击输入栏位，它就自动消失。你可以把用户应该输入的文本样例在文本框提示出来。不如，有一个E-mail输入框，你可以设置占位符XXX@XXX.COM，点击它们时就会消失。 HTML5 输入框占位符

IE FF Safari Chrome Opera iphone Android

- 3.7+ 4+ 4+ 11+ 4+ -

二、自动焦点事件

        HTML5只要加载一个网页，网页自动将焦点移到特定的输入框，和JavaScript一样。区别是什么？由于现在只是一个HTML标记，用户可以很容易地在他们的浏览器禁用此属性。并非所有浏览器都支持自动对焦功能，但浏览器不只是简单地忽略该属性。如果你想所有浏览器都行得通，只需添加新的HTML5自动对焦属性，然后检测浏览器是否支持自动对焦。如果可以就不必使用自动对焦的脚本，如果没有的话，就要添加自动对焦的脚本。

FF   IE   Safari   Chrome Opera   iphone Android

- 4+   4+   3+ 10+   -     -

三、HTML 新定义的输入类型

1、电子邮件

我要说的第一个输入框是电子邮件地址。那些不支持新类型的旧版浏览器也只是把它们看作一个文本框，99%的用户不会注意到这个变化，直到他们提交表单（此时会有表单验证）。 HTML5 电子邮件

2、网址

再说说网址输入框。如果需要输入网址，期望输入的就像。现在在网址类型输入框会出现像iPhone里面一样的一个可变化的虚拟键盘用户可以很方便输入斜线和.com。同样的，在提交表单之前用户对这些毫不知情。

3、数字

HTML4要得到匹配的数字，就得使用jquery脚本来帮助验证。HTML5增加了数字类型。还增加了一些额外的属性（可选）：Min：指定输入框可接受的最小输入数字。Max：就是允许输入的最大数字。 Step:属性输入域合法的间隔，默认是1. HTML5 数字

如上图，只允许输入数字（大多数情况下不会注意到这些，直到提交的时候提示错误），只有0，2，4合法（6不合法因为step是10，合法的是0，10，20..）。

4、数字滑动条

HTML5允许你使用一个新的类型叫range，输入框变成一个滑动条。你的网站表单可以使用滑动条了，它的属性标记和数字类型一样，只是把类型设置type='number'改成type='range'。 HTML5 数字滑动条

5、日历表

迄今为止最好的新增元素，名为date和datetime的日期选择器类型（还有其他额外的date/time类型，如时间，星期，月份，以及本地日历）。很多JavaScript框架如jQuery UI和YIU已经具备了这些控件，但增加一个日历选择器还是挺烦人的。 HTML5定义一个新的本地日期选择器，不必包括使用页面上的脚本。截至目前，Opera是一个唯一完全支持此功能的，对于其他浏览器，你可以做一个备用脚本以备该浏览器不支持。不过，最终，所有的浏览器都会更新的。

6、搜索

HTML5增加了搜索输入框类型。这没什么，但对一些用户来说是很好的变化。它可以简单的把输入框自动圆边，当你开始输入时，它右边会有一个小X。目前并不是所有的浏览器支持。 HTML5 搜索

7、颜色

HTML5还定义类型的颜色，它可以让你选择一种颜色，返回hexademical值。Opera11是唯一支持这种类型的浏览器。不过应该不会有很多人使用这个类型，所以不支持也不是什么大问题。

8、表单验证

         最令人兴奋的新特性莫过于表单验证。大多数开发人员都做了表单验证，无论是客户端或服务器端。也许HTML5的表单验证器可能无法取代你的服务器端验证，但它肯定能最终取代你的客户端验证。 JavaScript验证的问题是，用户很容易绕过它，可以很容易绕过它只需禁用JavaScript。现在HTML5，你不用有此担心，错误都是HTML5原生提示的，未使用JavaScript。

IE FF Safari   Chrome Opera Iphone Andriod

- 4+ 5+   10+ 9+ - -

9、必需字段

HTML5的表单验证并不仅仅局限于验证字段的类型，它还允许调用一个新的额外的标记，required。这个新属性允许开发人员验证输入框是否填写，无需使用JavaScript。 HTML5 必需字段

总结:上面这些更新对缩短开发周期和增强的用户体验都是至关重要。一旦所有的浏览器接受了HTML5，新一代的网站将超过任何人的期望。HTML5不是什么麻烦，它将大大有助于开发者，提高用户体验度。

网站内容由Css3-Html5之家整理转载

前端技术