码迷,mamicode.com
首页 > Web开发 > 详细

HTML5的表单新特性(2)

时间:2015-12-20 17:25:26      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

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,点击它们时就会消失。

技术分享 


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%的用户不会注意到这个变化,直到他们提交表单(此时会有表单验证)。

技术分享 

2、网址

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

3、数字

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

技术分享 

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

4、数字滑动条

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

技术分享 

5、日历表

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

6、搜索

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

技术分享 

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的表单新特性(2)

标签:

原文地址:http://www.cnblogs.com/yanshaoke/p/5061189.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!