使用HTML5构建下一代的Web Form

HTML语言作为如今编程最为广泛的语言,具有易用、快捷、多浏览平台兼容等特点,但是随着时代的进步,HTML的标准却停滞不前,这一次还在不断开发中的[color=#444444 !important]HTML5标准的更新可以说给这门标记语言带来了新的生命力。本文将着重讨论HTML5中的Web Forms 2.0, 即表单的部分。
表单是网页中常见的控件(集)。小到网站注册登录,大到一个企业的数据管理系统,都基本上有表单的身影。表单之所以如此重要,主要是因为它担负大量的用户和网页后台数据更新交互的任务。Web开发人员,对于网页表单可以说又爱又恨,爱的是它方便的收集、组织数据的功能,恨的是它的功能很大程度上也就仅此而已。一些在最终网站用户看起来稀松平常的功能,比如说输入类型检查、表单校验、错误提示等等,开发人员无不需要花费大量精力利用 JavaScript和DOM编程来满足这些天然所需的功能点,而随着Ajax的流行,出现的一些JavaScript的工具库,比如Dojo, YUI等都提供了方便的JavaScript Widget或者API来减轻开发人员的负担。

HTML5的表单新特性
HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进:
1.新的控件类型
◆还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框,Email输入框等。

<LI class="alt"><input type="url"></< SPAN>input> 

  • <input type="email"></< SPAN>input> 

◆当然还有非常重要的日期输入框,要知道使用JavaScript和CSS来“手工”制作一个日期输入框还是非常花功夫的,类似Dojo,YUI这样的类库也无不在这个widget上面大做文章。

  • <input type="date"></< SPAN>input> 

◆作为我痛苦记忆的一部分,我经常记得我们开发人员要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!

详细说明:http://html5.662p.com/thread-43-1-1.html

使用HTML5构建下一代的Web Form

时间: 2024-08-03 01:33:53

使用HTML5构建下一代的Web Form的相关文章

HTML5 web Form表单验证实例

HTML5 web Form 的开发实例! index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5表单验证</title> 6 <link rel="stylesheet" type="text/css" href="../css/style.

HTML5 WebSocket:下一次Web通信革命揭幕

让我们一起来了解HTML 5对当前Web通信的改变.HTML 5 Web Socket通过在Web上的一个单一Socket定义了一个全双工通信信道为Web通信带来了显著的改善. [51CTO译文]关于HTML 5的各种前沿技术应用51CTO已经报道过很多,比如HTML 5的视频音频元素.HTML 5 Web SQL Database.HTML5 File API以及如何从零开始构建一个HTML 5页面等等.这些都是HTML 5对当前Web开发标准技术的升级或扩展.今天,51CTO带您了解HTML

利用HTML5开发Android(4)---HTML5本地存储之Web Storage

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管

Visual Studio 2010没有AJAX Web Form 模板

Visual Studio 2010没有AJAX Web Form 模板 今天在VS 2010中尝试着实现ASP.NET AJAX的功能,其中有一个要求是"向现有的网站添加一个新AJAX Web窗体".但是我在新建项的界面并没有找到对应的"AJAX Web窗体".实际界面如下: 后面发现原因"Visual Studio 2010 没有AJAX Web Form 模板,因此,实际上是使用Web 窗体模板,创建Web 窗体,在窗体上添加ScriptManage

Asp.net web form url route使用总结

asp.net web form 使用URL路由 注不是mvc中的路由 一.前台控件使用路由,通过表达式生成url地址,注意给路由参数赋值,防止使用了其他路由表达式值方式1:<asp:HyperLink ID="hlSupply" NavigateUrl='<%$RouteUrl:routename=TechSupplySearch,areacode=,techfield=%>'                runat="server">技

Brunch:快捷的HTML5构建工具

Brunch,一个超快的HTML5构建工具.它可以(官方介绍): 编译你的脚本,模板,样式,链接它们, 将脚本和模板封装进common.js/AMD模块里,链接脚本和样式, 为链接文件生成源地图,复制资源和静态文件, 通过缩减代码和优化图片来收缩输出,看管你的文件更改, 并且通过控制台和系统提示通知你错误. 其实说白了就是:Brunch是一款HTML5应用软件的汇编程序,他可以适用于任何架构.数据库.编程语言,样式表,模板和后台技术. 更关键的是他是开源的,所以小伙伴们可以开心的快速构建自己的h

Html5之高级-13 Web存储API (两个存储系统、sessionStorage、localStorage)

一.两个存储系统 两个存储系统 - 万维网最初的设想,是作为展示信息的一种方式.信息处理是后来才出现的,但是Web的实质并没有变---信息在服务器上处理,然后显示给用户.因为系统没有利用计算机资源,所以复杂操作都是在服务器上完成的 - 对于任何程序来说,能够实现数据存储是必备功能之一,并且在需要的时候能够提供数据.但在过去的Web用户端,没有能够支持数据存储的有效机制 - cookie曾用来在客户端存储少量信息,但受其性质所限,cookie只能存储一些短的字符串 - 在 HTML5中提供了 We

Html5之高级-14 Web Socket(概述、API、示例)

一.Web Socket 概述 Web Socket 简介 - Web Socket 是 HTML5 提供的在 Web应用程序中客户端与服务器端之间进行的非 HTTP 的通信机制 - Web Socket 实现了用 HTTP 不容易实现的服务器端的数据推送等智能通讯技术 Web Socket 的特点 - Web Socket 可以在服务器与客户端之间建立一个非 HTTP 的双向连接 - 这个连接时实时的,也是永久的 - 服务器端可以主动推送消息 - 服务器端不再需要轮询客户端的请求 - 服务器端

ASP.NET Web API实践系列01,以ASP.NET Web Form方式寄宿

创建一个空的ASP.NET Web Form项目. 右键项目,添加新项,创建Web API控制器类,TestController. 删除掉TestController默认的内容,编写如下: using System.Web.Http; namespace WebApplication1 { public class TestController : ApiController { [AcceptVerbs("Get")] public string SayHello() { retur