HTML5 构建Web Form初试

vikki

浏览: 115522 次
性别:
来自: 北京

最近访客更多访客>>

小雁Hi

251859257

vearne

纳兰倾城1314

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 Web 浏览器 IE Safari

本文是基于了网络上的一些技术帖子进行的整合。

首先参考的是 http://www.taskcity.com/forum/cn/thread-152-1-1.html 一篇关于html5的文章，全文如下：

HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group)发起的，最开始的名称叫做Web Application 1.0，而后这个标准吸纳了Web Forms2.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输入框等。
```
<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>
XMLSubmission，我们一般常见的是form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式，数据送到服务器端，可以方便的存取。HTML5将提供一种新的数据格式：XMLSubmission，即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支持程度的进一步提升，设计一个简单易用的表单的工作，将变得非常轻松。

哪些浏览器支持html5

Safari

Safari 很重视标准，是所有浏览器中第一个通过 Acid2 和 Acid3 的浏览器。Safari 4 支持 HTML 5 音频和视频标签的浏览器。开发者可以将媒体文件直接整合到网页中，大大节约了开发时间，提高了响应速度。Safari 还支持 HTML 5 离线科技，基于网站的应用程序可以将信息存在本地硬盘中，无需网络连接也可随时使用。

With full CSS 2.1, strong HTML 5 support , and interoperability fixes for the Document Object Model (DOM), Internet Explorer 8 has made deliberate investments in a new layout engine. 但有人说不支持 video 标签。

Firefox

Firefox 3.5 的亮点是在互联网技术的支持，比如 HTML 5……

Chrome

Chrome 2.0 还不支持，计划在今后的版本中支持本地存储、视频等 HTML 5 功能。

Opera

未找到相关报道，但从 2004 年开始，苹果、Mozilla、Opera 这三家参与了 HTML 5 的开发，相信 Opera 应该支持 HTML 5 吧。

总的来看，各浏览器都已经或即将支持 HTML 5，不过阻碍 HTML 5 发展的最大障碍应该是 IE 6、IE 7，现在这两个版本的 IE 浏览器市场占有率还非常高，所以有人说该对 IE6 说再见了。

0
顶

0
踩

分享到：

10大最具价值开源软件 Ubuntu和MySQL上榜

2009-08-11 17:38
浏览 1290
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论