HTML5的表单新特性

◆还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,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>

2. 改进的文件上传控件,你可以使用一个控件上传多个文件,自行规定上传文件的类型(accept),你甚至可以设定每个文件最大的大小 (maxlength)。你看出它和一般操作系统提供的文件上传控件的区别了吗,反正我觉得基本一致了。在HTML5应用中,文件上传控件将变得非常强大 和易用。

3.重复(repeat)的模型,HTML5提供一套重复机制来帮助我们构建一些重复输入列表,其中包括一些诸如 add、remove、move-up,move-down的按钮类型,通过这一套重复的机制,开发人员可以非常方便的实现我们经常看到的编辑列表,这是 一个很常见的模式,我们可以增加一个条目、删除某个条目、或者移动某个条目等等。

4.内建的表单校验系统,HTML5为不同类型的输入控 件各自提供了新的属性,来控制这些控件的输入行为,比如我们常见的必填项required属性,以及为数字类型控件提供的max、min等。而在你提交表 单的时候,一旦校验错误,浏览器将不执行提交操作,而会显示相应的检验错误信息。        <input type="text" required>input><input type="number" min=10  max=100>input>

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

由于目前HTML5标准仍然在开发中,不同的浏览器对HTML5特性的支持都相当有限。其中Opera在表单方面支持得比较好, 并且form的enctype是application/x-www-form+xml,也就是HTML5的XML提交。所以一旦form校验通过,form的内容将会以XML的形式提交

原文地址:https://www.cnblogs.com/ctriphire/p/2922267.html