全新改进的 HTML5 表单创建

小卒过河
 小卒过河
发布于 2011年07月23日
收藏 25

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有关最新功能展开了热烈讨论。 根据W3C,HTML5新特性的目的是在改善嵌入诸如视频的多媒体支持,提供更好的用户体验和更简单的编程。虽然HTML4中已经取得了巨大成 功,(甚至被认为最成功的标记格式已经发布)在互联网世界的每个人都耐心等待,浏览器更新时得到最新的HTML版本。随着时间推移,人们都很纳闷,还等什 么呢?事实上HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, 以及其他主流浏览器。即使是IE9也准备好了支持新的HTML5。 HTML5的好处是,它是向后兼容的,因而,如果你乐于更新你的网站,现在你就可以。只是有几个浏览器不完全兼容HTML5。

HTML5 Logo

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

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

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

place holder in HTML 5

  支持情况如下(本人开发过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,你懂的。

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

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

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

Number input type in HTML 5

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

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

Range Type in HTML 5
日历表

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

搜索

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

Seach type in html5

颜色

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。

Required Fields in HTML 5

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

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

编译:webdesignledger.com
编译:ArSui

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:全新改进的 HTML5 表单创建
加载中

最新评论(16

new-object
new-object
一直担心,未来 IE8、9 会不会像现在的 IE6 一样困扰着我们,阻碍 HTML5 甚至互联网的发展。
angel zhang
angel zhang

引用来自“孤云长风”的评论

IE9好多不支持,有些只有Opera支持,哎,对于现在来说,开发员用这些还早着呢,特别在这个IE 6盛行的中国。领导一句要兼容IE 6,你神马HTML5啊,浮云。

顶!!
Liuxz-aaa
Liuxz-aaa
等咱做领导时,全NND换HTML5!
Erasin
Erasin
必须支持...
h
heronote
学习HTML5,但在产品中尽量使用HTML4标准支持的Input类型,不给自己找麻烦!
分享:HTML5标准参考手册:
http://www.heronote.com/files/HTML5.htm
高东
高东
不知道像那些检错的提示信息是不是可以自己制定,如果不行的话,基本上没什么作用,还不如用js。其实以上这些功能现在的html4+js已经可以做了。我觉得在现在这种浏览器支持度不高的情况下,html5前途比较迷茫。
mark35
mark35
不知道是否可以用JS来调用提交验证,因为有时候并非使用页面来提交表单,而是使用AJAX来提交。比如用JQUERY序列化表单内容然后ajax.post.
李永波
李永波

引用来自“mallon”的评论

还是Opera实在...

+
martintree
martintree

引用来自“dd”的评论

这个必须支持
FORM多少年没变化了

+1
返回顶部
顶部