`
brofe
  • 浏览: 233475 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HTML5 将为前端开发省下很多事

阅读更多
原文链接:http://www.infoq.com/cn/articles/html5-web-form

作者 蒋博 发布于 2009年6月22日 上午4时52分

社区 Architecture, Java 主题 编程, 语言 标签 W3C, 标识语言
HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 发起的,最开始的名称叫做Web Application 1.0,而后这个标准吸纳了Web Forms 2.0的标准,并一同被W3C组织所采用,合并成为下一代的HTML5标准。

相关厂商内容
Adobe开发者技术日,7月16日上海,免费报名!

旺斯卡-阿里旺旺创意实践大赛热门作品点评
前言
HTML语言作为如今编程最为广泛的语言,具有易用、快捷、多浏览平台兼容等特点,但是随着时代的进步,HTML的标准却停滞不前,这一次还在不断开发中的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表单做了改进:

新的控件类型
还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框,Email输入框等。
<input type="url"></input><input type="email"></input>

当然还有非常重要的日期输入框,要知道使用JavaScript和CSS来“手工”制作一个日期输入框还是非常花功夫的,类似Dojo,YUI这样的类库也无不在这个widget上面大做文章。
<input type="date"></input>
作为我痛苦记忆的一部分,我经常记得我们开发人员要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!
<select data="http://domain/getmyoptions"></select>
改进的文件上传控件,你可以使用一个控件上传多个文件,自行规定上传文件的类型(accept),你甚至可以设定每个文件最大的大小(maxlength)。你看出它和一般操作系统提供的文件上传控件的区别了吗,反正我觉得基本一致了。在HTML5应用中,文件上传控件将变得非常强大和易用。
重复(repeat)的模型,HTML5提供一套重复机制来帮助我们构建一些重复输入列表,其中包括一些诸如add、remove、move-up,move-down的按钮类型,通过这一套重复的机制,开发人员可以非常方便的实现我们经常看到的编辑列表,这是一个很常见的模式,我们可以增加一个条目、删除某个条目、或者移动某个条目等等。
内建的表单校验系统,HTML5为不同类型的输入控件各自提供了新的属性,来控制这些控件的输入行为,比如我们常见的必填项required属性,以及为数字类型控件提供的max、min等。 而在你提交表单的时候,一旦校验错误,浏览器将不执行提交操作,而会显示相应的检验错误信息。 <input type="text" required></input><input type="number" min=10  max=100></input>
XML Submission,我们一般常见的是form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式,数据送到服务器端,可以方便的存取。HTML5将提供一种新的数据格式:XML Submission,即application/x-www-form+xml。简单的举例说,服务器端将直接接收到XML形式的表单数据。
<submission>    <field name="name" index="0">Peter</field>    <field name="password" index="0">password</field></submission>
实例分析
我将利用HTML5新的表单系统, 做一个简单的用户注册的界面,包括用户名,密码,出生日期,保密问题等内容,代码如下:

<! doctype html>
<html>
    <head>
        <style>
            p label {
                width: 180px;
                float: left;
                text-align: right;
                padding-right: 10px
            }
            table {
                margin-left: 80px
            }
            table td {
                border-bottom: 1px solid #CCCCCC
            }
            input.submit {
                margin-left: 80px
            }
        </style>
    </head>
    <body>
        <form action='/register' enctype="application/x-www-form+xml" method="post">
            <p>
                <label for='name'>ID(请使用Email注册)</label>
                <input name='name' required type='email'></input>
            </p>
            <p>
                <label for='password'>密码</label>
                <input name='password' required type='password'></input>
            </p>
            <p>
                <label for='birthday'>出生日期</label>
                <input type='date' name='birthday' />
            </p>
            <p>
                <label for='gender'>国籍</label>
                <select name='country' data='countries.xml'></select>
            </p>
            <p>
                <label for='photo'>个性头像</label>
                <input type='file' name='photo' accept='image/*' />
            </p>
            <table>
                <thead>
                    <td><button type="add" template="questionId">+</button> 保密问题</td>
                    <td>答案</td>
                    <td></td>
                </thead>
                <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3">
                    <td><input type="text" name="questions[questionId].q"></td>
<td><input type="text" name="questions[questionId].a"></td>
<td><button type="remove">删除</button></td>
                </tr>
            </table>
            <p>
                <input type='submit' value='send' class='submit' />
            </p>
        </form>
    </body>
</html>

由于目前HTML5标准仍然在开发中,不同的浏览器对HTML5特性的支持都相当有限。其中Opera在表单方面支持得比较好,本实例在Opera9上运行一切正常,效果图如下:


这个实例运用了一些HTML5的新的表单元素,比如email类型的输入框(ID),日期类型的输入框(出生日期)。并且使用了重复模型来引导用户填写保密问题,而在个性头像的上传中,通过限制文件类型,方便用户选择图片进行合乎规范的内容上传。而用户选择国籍的下拉选择输入框中,采用的是外联数据源的形式,外联数据源使用coutries.xml,内容如下:

<select xmlns="http://www.w3.org/1999/xhtml">
    <option>China</option>
    <option>Japan</option>
    <option>Korea</option>
</select>

并且form的enctype是application/x-www-form+xml,也就是HTML5的XML提交。所以一旦form校验通过,form的内容将会以XML的形式提交。你还会发现,在ID输入框如果没有值,或者输入了非email类型的字符串时,一旦试图提交表单,就会有提示错误的信息出现,而这都是浏览器内置的。

结语
HTML5对表单控件的更新,无疑是很振奋人心的。本文描述了一部分表单的新特性,还有一部分新特性同样很令人期待。相信随着标准的深入开发以及浏览器对HTML5支持程度的进一步提升,设计一个简单易用的表单的工作,将变得非常轻松。

参考资料
W3C HTML5 规范: http://www.w3.org/TR/html5/
HTML5 与 HTML4的差异:http://www.w3.org/TR/html5-diff/
Opera dev: Improve your forms with HTML5: http://dev.opera.com/articles/view/improve-your-forms-using-html5/
Comparison of layout engines(HTML5):
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

关于作者
蒋博,主要从事Web前端技术的开发工作,在Web开发与性能分析以及敏捷实践等领域有较丰富的经验。对HTML5的发展以及各种JavaScript类库有比较浓厚的兴趣,经常关注社交型的网站发展情况,平常喜欢听音乐,看一些历史类书籍。(本文仅代表个人观点,与公司立场无关。)

分享到:
评论

相关推荐

    HTML5与CSS3web前端开发技术习题答案.pdf

    ### HTML5与CSS3 Web前端开发技术习题答案解析 #### 第一章 ##### 1.1 简答题 **(1)HTML5与HTML4比较,主要解决了哪些问题?** HTML5作为HTML4的升级版,在Web前端开发方面解决了一系列关键问题,主要体现在...

    基于HTML5技术的移动Web前端设计与开发 (2).pdf

    在移动互联网行业中,HTML5技术的应用有很多,例如:移动Web前端设计与开发、移动应用平台的开发、信息技术的发展等。HTML5技术可以帮助移动互联网行业提高信息处理器的使用效率,降低信息处理器的使用费用,提高...

    web前端开发html+css+js免费下载(设计作品成品)

    综合以上,这个设计作品不仅展示了基础的前端开发技术,还融入了现代Web开发的高级特性,对于学习和实践Web前端开发有着很高的参考价值。无论是初学者还是有一定经验的开发者,都可以从中学习到实际的开发技巧和实践...

    基于html5的web前端设计(旅游景点介绍)

    在这个项目中,我们主要关注如何利用HTML5进行网页设计,特别是为旅游景点介绍创建一个引人入胜的在线体验。 【描述】:描述中提到的资源是一个实际的Web前端项目,它由HTML、CSS和JavaScript这三种关键技术构建。...

    《循序渐进Vue.js3前端开发实战》实战范例.zip

    前端开发:根据设计稿进行页面切图,将页面的设计转化为代码,然后使用HTML、CSS和JavaScript等技术语言进行页面的搭建和开发,同时关注页面的交互效果、动画效果等。 前端测试:测试页面的兼容性、响应式布局、用户...

    WebGIS前端开发demo

    WebGIS前端开发是一个将地理信息系统(GIS)与Web技术相结合的领域,主要目的是在网页上展示、操作和分析地理数据。在这个"WebGIS前端开发demo"项目中,开发者使用了OpenLayers框架,这是一种广泛使用的开源...

    前端开发学习建议

    ### 前端开发学习建议 #### 一、学习路径规划 前端开发是现代网站建设和应用开发中的一个重要组成部分。为了成为一名合格的前端开发者,合理的学习路径尤为重要。 1. **HTML与CSS基础**:HTML(HyperText Markup ...

    基于JavaScript的WebGIS前端开发及优化

    近年来网站客户端开发规模越来越大并且有很多由AJAX开发的复杂页面, 系统中的客户端脚本大量增加,前端开发就产生了诸如代码量大、组织困难、难 以维护、代码复用低、扩展适应性差等此类的问题。究其原因,以往前端...

    HTML5+CSS3+JavaScript Web前端开发案例教程(慕课版)-源码.rar

    HTML5、CSS3和JavaScript是Web前端开发的三大核心技术,它们共同构成了现代网页和应用程序的基础。这个"HTML5+CSS3+JavaScript Web前端开发案例教程(慕课版)-源码"压缩包文件包含了用于教学的实践案例源代码,旨在...

    H5前端网站Html模板集合

    1. **HTML5简介**:HTML5是超文本标记语言(HTML)的最新版本,它在HTML4的基础上进行了很多改进和新增功能,包括更好的媒体支持、离线存储、拖放功能、语义化标签等,使得网页内容更易于理解和处理。 2. **模板的...

    Web前端开发实训项目源代码

    【Web前端开发实训项目源代码】是一个以Bootstrap框架为基础的实训项目,主要目的是为了帮助学习者掌握Web前端开发的关键技术和实践经验。在这个项目中,开发者利用Bootstrap的灵活性和响应式设计特性,构建了一个...

    阶段一:前端开发基础资料.zip

    在本压缩包“阶段一:前端开发基础资料.zip”中,包含了学习前端开发基础知识的珍贵资源,特别适合初学者入门。这个资料集可能涵盖了多个标签所代表的主题,如“黑马”可能指的是黑马程序员这一知名教育机构的教学...

    Web前端开发技术(第2版)储久良课后实验材料及源代码

    压缩包中的“清华社-规划教材-实验教材第2版资源及代码201607”很可能包含了与书本配套的实验指导和代码示例,这些实验旨在帮助读者将理论知识转化为实践能力,通过动手操作加深对Web前端技术的理解。 六、勘误反馈...

    HTML5及CSS3web前端开发技术习题答案.docx

    HTML5 及 CSS3 是当前 Web 前端开发中的热门技术,本文将从多方面介绍 HTML5 及 CSS3 在 Web 前端开发中的应用和特性。 首先,HTML5 是下一代 Web 语言的开发框架,它集成了 HTML+CSS3+JavaScript 的 Web 应用框架...

    前端开发框架

    本文将对前端开发框架进行详细介绍,包括其背景、主流框架以及相关技术。 ### HTML:结构化内容的基础 HTML(HyperText Markup Language)是一种标记语言,用于定义网页的结构。在前端开发中,HTML是必不可少的一...

    基于HTML5技术的移动Web前端设计与开发.pdf

    基于HTML5技术的移动Web前端设计与开发 概述: 基于HTML5技术的移动Web前端设计与开发是当前移动互联网技术的热点话题。随着移动应用的兴起,移动终端的数量不断增多,人们对互联网产品的交付周期要求越来越高。...

    前端开发.zip

    前端开发:根据设计稿进行页面切图,将页面的设计转化为代码,然后使用HTML、CSS和JavaScript等技术语言进行页面的搭建和开发,同时关注页面的交互效果、动画效果等。 前端测试:测试页面的兼容性、响应式布局、用户...

    HTML-前端开发手册Cascading Style Sheet 2.0 中文手册.zip

    CSS2.0是CSS的重要版本,它在CSS1的基础上做了很多增强和扩展,使得网页设计更加灵活和精细。 HTML5是目前广泛使用的HTML版本,增强了语义化元素,如、、和等,使得网页内容结构更加清晰。此外,HTML5还引入了新的...

    前端设计作品展示HTML5模板

    在IT行业中,前端设计是构建网站和应用程序用户体验的关键部分,而HTML5作为现代网页开发的基石,对于创建交互式和动态网页至关重要。本资源“前端设计作品展示HTML5模板”正是针对这一需求提供的一款设计模板,它专...

Global site tag (gtag.js) - Google Analytics