全新改进的HTML5表单创建

经历了12年之久，万维网的核心语言（HTML或超文本标记语言）终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期，HTML5的网页设计师和程序员已经就有关最新功能展开了热烈讨论。

根据W3C，HTML5新特性的目的是在改善嵌入诸如视频的多媒体支持，提供更好的用户体验和更简单的编程。虽然HTML4中已经取得了巨大成功，（甚至被认为最成功的标记格式已经发布）在互联网世界的每个人都耐心等待，浏览器更新时得到最新的HTML版本。随着时间推移，人们都很纳闷，还等什么呢？事实上HTML5已经被很多浏览器支持，比如Safari, Chrome, FireFox, Opera, 以及其他主流浏览器。即使是IE9也准备好了支持新的HTML5。 HTML5的好处是，它是向后兼容的，因而，如果你乐于更新你的网站，现在你就可以。只是有几个浏览器不完全兼容HTML5。

升级到HTML5是相当容易的，因为它与HTML4兼容。事实上，我们没有理由摒弃HTML4的所有，因为HTML5只是一个简单的增加一堆新而酷的功能添加到HTML4核心语言。升级（如果你是这样认为）到HTML5是非常简单的。你所需要做的的是修改你的DOCTYPE。这种新的更新有助于让事情变得简单，而在HTML4中有你可以使用不同的文档类型，使得这一点更加棘手。你现在就可以更新你所有的网站，它们不会崩溃，因为所有HTML4的标签在HTML5还是100％支持的。

HTML5的表单定义了十几个新的输入类型和特性，这些新增元素可以让程序员可以过个好日子。

输入框占位符

我觉得这是HTML5新特性中我最爱的。所有开发人员都使用JavaScript和jQuery做输入框占位符，而在HTML5中，开发人员可以非常容易的显示一个占位符。什么是占位符？占位符就是出现在输入框的提示文本，当你点击输入栏位，它就自动消失。你可以把用户应该输入的文本样例在文本框提示出来。一个例子，如果你有一个电话号码输入框，你可以设置占位符（XXX）XXX – XXXX，点击它们时就会消失。我相信你已经看过很多。

支持情况如下（本人开发过Android，是支持的——译者注）

IE      FF     Safari     Chrome   Opera     iphone   Android

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

自动焦点事件

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

支持情况

FF   IE     Safari   Chrome  Opera   iphone  Android

-    4+       4+     3+         10+         -             -

HTML 新定义13个输入类型

电子邮件
我要说的第一个输入框是电子邮件地址。那些不支持新类型的旧版浏览器也只是把它们看作一个文本框，99%的用户不会注意到这个变化，直到他们提交表单（此时会有表单验证）。iPhone的用户应该知道在那些邮件地址的输入框，当输入@和a的时候会出现一个简单容易的键盘。如果你用过iPhone,你懂的。

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

在过去要得到匹配的数字，你不得不使用jquery这样的脚本来帮助验证输入。HTML5增加了数字类型。还增加了一些额外的属性（可选）：

Min：指定输入框可接受的最小输入数字。Max：你猜对了，就是允许输入的最大数字。 Step:属性输入域合法的间隔 ，默认是1.

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

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

日历表

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

搜索

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

颜色

HTML5还定义类型的颜色，它可以让你选择一种颜色，返回hexademical值。Opera11是唯一支持这种类型的浏览器。不过应该不会有很多人使用这个类型，所以不支持也不是什么大问题。
表单验证
上面我们谈到有关这些新的输入类型，如电子邮件，日期，数量等HTML5新元素中，最令人兴奋的新特性莫过于表单验证。大多数开发人员都做了表单验证，无论是客户端或服务器端（我们两个都做！）。也许HTML5的表单验证器可能无法取代你的服务器端验证，但它肯定能最终取代你的客户端验证。 JavaScript验证的问题是，用户很容易绕过它，可以很容易绕过它只需禁用JavaScript。现在HTML5，你不用有此担心。下面是Chrome12的一个例子。所有的浏览器和操作系统对于错误有不同的显示方式，不过这是一个例子，让你看清错误可能发生的样子。

所有的错误都是HTML5原生提示的，并没有使用JavaScript。

IE    FF    Safari   Chrome    Opera    Iphone  Andriod

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

每个开发人员都知道这些更新对缩短开发周期和增强的用户体验都是至关重要。一旦所有的浏览器接受了HTML5，新一代的网站将超过任何人的期望。

那么你有了它。你可以HTML5中找到一个快速入门指南。如果你可以理解这篇文章的任何东西，请记住，HTML5不是什么可怕的麻烦。它将大大有助于开发者，而只要你有准备所有HTML4网站已经可以升级了！

编译：webdesignledger.com
编译：ArSui

© 推荐 for 互联网的那点事, 2011. | Permalink | No comment | Add to del.icio.us
Post tags: HTML5

你可能也喜欢：
华丽丽的HTML5新特性	12个优秀的 HTML5 网站设计案例欣赏	HTML5 到底是什么？	HTML5的视频格式之争	HTML5如何改变互联网
无觅

Feed enhanced by Better Feed from Ozh