AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

使用 HTML5 构建下一代的 Web Form

  • 2009-06-22
  • 本文字数:2726 字

    阅读完需:约 9 分钟

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

前言

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 输入框等。 ```


复制代码
- 当然还有非常重要的日期输入框,要知道使用 JavaScript 和 CSS 来“手工”制作一个日期输入框还是非常花功夫的,类似 Dojo,YUI 这样的类库也无不在这个 widget 上面大做文章。 ```
<input type="date"></input>
  • 作为我痛苦记忆的一部分,我经常记得我们开发人员要为一个 select 下拉别表动态的添加非常多的选项, 这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5 将支持 data 属性,为 select 控件外联数据源! ```

复制代码
- 改进的文件上传控件,你可以使用一个控件上传多个文件,自行规定上传文件的类型(accept),你甚至可以设定每个文件最大的大小(maxlength)。你看出它和一般操作系统提供的文件上传控件的区别了吗,反正我觉得基本一致了。在 HTML5 应用中,文件上传控件将变得非常强大和易用。
- 重复(repeat)的模型,HTML5 提供一套重复机制来帮助我们构建一些重复输入列表,其中包括一些诸如 addremovemove-upmove-down 的按钮类型,通过这一套重复的机制,开发人员可以非常方便的实现我们经常看到的编辑列表,这是一个很常见的模式,我们可以增加一个条目、删除某个条目、或者移动某个条目等等。
- 内建的表单校验系统,HTML5 为不同类型的输入控件各自提供了新的属性,来控制这些控件的输入行为,比如我们常见的必填项 required 属性,以及为数字类型控件提供的 maxmin 等。 而在你提交表单的时候,一旦校验错误,浏览器将不执行提交操作,而会显示相应的检验错误信息。 ```
<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 形式的表单数据。 ```

        Peter     password
复制代码
## 实例分析
我将利用 HTML5 新的表单系统, 做一个简单的用户注册的界面,包括用户名,密码,出生日期,保密问题等内容,代码如下:

<! doctype 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 支持程度的进一步提升,设计一个简单易用的表单的工作,将变得非常轻松。

参考资料

  1. W3C HTML5 规范: http://www.w3.org/TR/html5/
  2. HTML5 与 HTML4 的差异: http://www.w3.org/TR/html5-diff/
  3. Opera dev: Improve your forms with HTML5: http://wiht.link/guidetohtml5
  4. Comparison of layout engines(HTML5):
    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

关于作者

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


给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。

2009-06-22 04:5210313

评论

发布
暂无评论
发现更多内容

react源码解析13.hooks源码

全栈潇晨

React

6月26日,HarmonyOS开发者日将于杭州举办

科技汇

校友会小程序开发笔记二:功能需求设计

CC同学

小程序云开发 校友录小程序 校友会小程序

618 技术特辑(一)不知不觉超预算3倍,你为何买买买停不下来?

华为云开发者联盟

电商 图数据库 知识图谱 618 图引擎服务

618 技术特辑(二)几百万人同时下单的秒杀,为什么越来越容易抢到了

华为云开发者联盟

数据库 服务器 流量 618 弹性负载均衡

教你两招,解决数据膨胀

华为云开发者联盟

数据 GaussDB(DWS) VACUUM 数据膨胀 FSM

可视化协助矿山,打造“高效率运营战略”,年降成本500W

一只数据鲸鱼

数据可视化 工业4.0 智慧矿山

Python——字典的使用

在即

6月日更

针对 MySQL IO 特点进行的存储优化揭秘

焱融科技

MySQL 技术 分布式 高性能 文件存储

Bzz节点分币系统开发,云算力矿机租赁系统搭建

PO 就是Scrum中的产品经理?别再搞不清啦

万事ONES

项目管理 Scrum 敏捷开发 PO ONES

校友会小程序开发笔记四:UI基本元素设计

CC同学

小程序云开发

开发者如何构建技术影响力

不脱发的程序猿

程序人生 开发者如何构建技术影响力 技术影响力

pprof排查Golang服务内存问题

循环智能

pprof 性能分析 Go 语言

【LeetCode】石子游戏Java题解

Albert

算法 LeetCode 6月日更

拍乐云受邀2021亚太CDN峰会,技术创新赋能行业新价值

拍乐云Pano

RTC

JavaScript 学习(三)

空城机

JavaScript 大前端 6月日更

校友会小程序开发笔记三:数据库设计

CC同学

小程序云开发 校友录小程序 校友会小程序

测试工程师如何收拾交接项目的烂摊子

陈磊@Criss

测试

缓存的世界 Redis(二)-持久化

卢卡多多

redis redis持久化 配置文件持久化 6月日更

并发王者课-铂金1:探本溯源-为何说Lock接口是Java中锁的基础

MetaThoughts

Java 多线程 并发 并发王者

JAVA笔记(三)--变量及运算符

加百利

Java 程序员 后端 6月日更

译文 | AI产品经理:如何打造一款SaaS+AI的优质产品

LigaAI

产品经理 研发管理

详解 Go 程序的启动流程,你知道 g0,m0 是什么吗?

煎鱼

Java php 后端 Go 语言

🌏【架构师指南】分布式技术知识点总结(上)

码界西柚

分布式 raft协议 paxos协议 6月日更

MySQL中的pid与socket是什么?

Simon

MySQL

阿里云视频云 Retina 多媒体 AI 体验馆开张啦!

阿里云CloudImagine

阿里云 短视频 视频处理 媒体处理 视频制作

校友会小程序开发笔记一:背景与技术方案的选型

CC同学

小程序云开发 校友录小程序 校友会小程序

用EasyRecovery“监控硬盘”功能检测硬盘问题的方法

淋雨

数据恢复 EasyRecovery 文件恢复

快来,这里有23种设计模式的Go语言实现

华为云开发者联盟

线程 设计模式 单例模式 Go 语言

项目经理如何有效管理需求变更?

万事ONES

需求管理 ONES 项目经理

使用HTML5构建下一代的Web Form_Java_蒋博_InfoQ精选文章