详细介绍HTML5表单的新功能

开发 前端
当下掀起一股HTML5学习热潮,越来越多的人尝试用HTML5来制作网页游戏等丰富的Web应用。既然,HTML5这么的受人欢迎,我们今天介绍一下HTML5表单的新功能,帮助你更好的理解和学习它。

HTML5 是下一代 Web 语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能,并将***下一代 Web 实现类似桌面的应用体验。下面介绍HTML5表单的新功能。

HTML语言作为如今编程最为广泛的语言,具有易用、快捷、多浏览平台兼容等特点,但是随着时代的进步,HTML的标准却停滞不前,这一次还在不断开发中的HTML5标准的更新可以说给这门标记语言带来了新的生命力。

表单是网页中常见的控件(集)。小到网站注册登录,大到一个企业的数据管理系统,都基本上有表单的身影。表单之所以如此重要,主要是因为它担负大量的用户和网页后台数据更新交互的任务。Web开发人员,对于网页表单可以说又爱又恨,爱的是它方便的收集、组织数据的功能,恨的是它的功能很大程度上也就仅此而已。

一些在最终网站用户看起来稀松平常的功能,比如说输入类型检查、表单校验、错误提示等等,开发人员无不需要花费大量精力利用 JavaScript和DOM编程来满足这些天然所需的功能点,而随着Ajax的流行,出现的一些JavaScript的工具库,比如Dojo, YUI等都提供了方便的JavaScript Widget或者API来减轻开发人员的负担。

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。HTML5 主要在以下几个方面对目前的Web表单做了改进:

一、表单结构更自由

XHTML中需要放在form之中的诸如input/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。

二、新的控件类型

1.email输入类型:

  1. <input type="email" name="email"></input> 

 

此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.

2.url输入类型:

  1. <input type="url" ></input> 

 

上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://

3.日期时间相关输入类型:

  1. <input type="date"></input> 
  2. <input type="time"></input> 
  3. <input type="month"></input> 
  4. <input type="week"></input> 

 

这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样。

4.number输入类型:

  1. <input type="number"></input> 

 

此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值。

5.search输入类型:

  1. <input type="search"></input> 

 

此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。

6.tel输入类型:

  1. <input type="tel"></input> 

 

此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别。

7.color输入类型:

  1. <input type="color"></input> 

 

此类型可让用户通过颜色选择器选择一个颜色值,并反馈到value中。

三、新的表单属性

1.placeholder属性

  1. <input type="text" placeholder="点击我会以清除"></input> 

这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.

2.require/pattern属性

  1. <input type="text" name="require" required=""></input> 
  2. <input type="text" name="require1" required="required"></input> 
  3. <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input> 

 

表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果。

3.autofocus属性

  1. <input type="text" autofocus="true"></input> 

 

默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus()。

4.list属性

  1. <input type="text" list="ilist"> 
  2. <datalist id="ilist"> 
  3. <option label="a" value="a"></option> 
  4. <option label="b" value="b"></option> 
  5. <option label="c" value="c"></option> 
  6. </datalist> 
  7. </input> 

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容。

5.max/min/step属性:

  1. <input type="range" max="100" min="1" step="20"> 

 

限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入***值最小值,或者在range中设定拖动阶梯。

6.autocomplete属性:

  1. <input type="text" autocomplete="on"> 

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

7.data属性

  1. <select data="http://domain/getmyoptions"></select> 

 

要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!

8.XML Submission编码格式

我们一般常见的是Web Form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式,数据送到服务器端,可以方便的存取。HTML5提供一种新的数据格式:XML Submission,即application/x-www-form+xml。简单的举例说,服务器端将直接接收到XML形式的表单数据。

HTML5对表单控件的更新,无疑是很振奋人心的。相信随着标准的深入开发以及浏览器对HTML5支持程度的进一步提升,设计一个简单易用的表单的工作,将变得非常轻松。

本文地址:http://www.yiiyaa.net/1350

【编辑推荐】

  1. Web移动应用 HTML5 CSS和JavaScript
  2. 3款新鲜的CSS3&HTML5框架
  3. HTML5中div section article的区别
  4. HTML5笔记之为什么需要HTML5
  5. 在IE中使用HTML5功能需要注意的几点
责任编辑:于铁 来源: yiiyaa.net
相关推荐

2011-02-24 11:10:40

2012-08-08 17:13:43

Word 2013

2011-02-23 14:57:41

webweb开发HTML

2010-08-25 11:32:34

2013-01-24 10:26:04

HTML5HTML 5HTML5的未来

2012-03-26 10:14:25

JavaJava 8

2011-05-13 17:36:05

HTML

2012-07-24 10:59:36

ExcelOffice

2023-03-16 09:00:00

HTML5HTML语言

2014-08-26 10:54:20

2011-07-07 14:14:41

PHP模版

2013-08-21 13:19:33

HTML5CSS3表单设计

2011-07-25 16:32:08

HTML 5

2011-07-15 09:10:44

HTML 5CSS3

2011-10-20 16:05:23

思杰XenServer服务器

2013-10-21 15:24:49

html5游戏

2011-05-13 17:41:40

2011-01-14 17:53:33

HTML5cssweb

2010-04-06 09:47:38

2011-07-08 11:19:51

jspaction
点赞
收藏

51CTO技术栈公众号