`
xiangxingchina
  • 浏览: 527237 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[转]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表单增强,html5

    HTML5 表单增强是现代网页开发中的一个重要进步,它为开发者提供了更多元化和功能丰富的表单元素,以及更强大的验证和交互能力。...随着浏览器对这些新特性的广泛支持,HTML5表单已经成为现代Web开发不可或缺的一部分。

    bootstrap风格的html5表单验证示例

    HTML5则引入了一系列新的表单元素和属性,使得网页表单的设计和验证更加便捷。在这个“bootstrap风格的html5表单验证示例”中,我们将深入探讨如何结合这两者来创建高效且用户友好的表单。 1. **HTML5表单元素**:...

    基于HTML5新特性新规范的表单验证jQuery插件.zip

    这个"基于HTML5新特性新规范的表单验证jQuery插件.zip"文件,显然是一个利用HTML5的新功能并结合jQuery库来增强网页表单验证的工具。在深入探讨之前,我们先了解一下HTML5和jQuery的基本概念。 HTML5是HyperText ...

    HTML 5 新特性介绍(ppt)

    这个压缩包文件包含了多个关于HTML5新特性的介绍,包括“浅谈HTML5_20080804.pps”、“Developing with HTML5.ppt”、“HTML5_Accessibility_faulkner.ppt”、“www.99pan.com_HTML5.ppt”以及“05-18-09-...

    html5新表单

    ### HTML5新表单知识点详解 #### 一、概述 HTML5作为一种标准的网页开发语言,为表单处理带来了诸多革新。与之前的版本相比,HTML5不仅极大地简化了表单的编写过程,还增强了用户体验,增加了更多的交互性。本文将...

    html5-新特性

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 ...

    HTML5简单清新的登录表单

    这个"HTML5简单清新的登录表单"示例是利用HTML5的新特性创建的一个用户界面元素,旨在提供一个既美观又实用的登录体验。下面将详细探讨相关知识点。 1. **语义化标签**:HTML5引入了若干语义化的标签,如`&lt;header&gt;`...

    HTML5+CSS3超酷动态表单

    但根据上述讨论,你可以结合实际代码来创建一个具有HTML5新特性与CSS3动态效果的超酷表单,提供用户友好的交互体验。在实践中,不断探索和学习新的HTML5和CSS3技术,将有助于你构建更多创新和引人入胜的网页项目。

    HTML5表单新特征简介与举例

    ### HTML5表单新特性详解 #### 一、引言 HTML5的出现极大地丰富了Web开发的功能性和用户体验。在众多的新特性中,HTML5表单的改进尤为显著,不仅提升了用户界面的友好度,还简化了开发者的编程工作。在去年的一篇...

    html5+css3实现酷炫的form表单

    这些新特性不仅提高了用户体验,还简化了开发者的工作,使表单更加语义化和可访问性。 接下来,CSS3的引入为表单样式带来了革命性的变化。通过使用伪类(如`:hover`, `:focus`, `:active`)可以实现动态效果,增强...

    HTML5新特性1

    "HTML5新特性1" HTML5新特性概述: HTML5是最新的HTML标准,带来了许多有趣的新特性,包括Canvas标签、HTML5 Video标签、HTML5 Audio标签、Number类型等。这些新特性提供了更好的用户体验和开发体验。 Canvas标签...

    html5 Ajax表单验证实例.rar

    在这个"html5 Ajax表单验证实例"中,我们将会探讨如何利用HTML5的新特性与Ajax技术结合,来创建一个既高效又能提供实时反馈的表单验证系统。 首先,HTML5引入了许多新的表单元素和属性,使得表单验证变得更加简单且...

    htm5入门 html5介绍 html5的新特性 css3

    通过学习和掌握HTML5的新特性,如 `&lt;video&gt;`、`&lt;audio&gt;`、`&lt;canvas&gt;` 和增强型表单,开发者可以构建出功能强大、用户体验优秀的现代Web应用。随着HTML5标准的不断完善和技术的持续进步,Web开发领域将迎来更多令人...

    html5表单提交按钮圆形进度条加载动画

    在“html5表单提交按钮圆形进度条加载动画”这个主题中,我们将深入探讨如何利用HTML5的表单特性,结合CSS和JavaScript来创建一个美观且具有交互性的圆形进度条加载按钮。 首先,HTML5的`&lt;form&gt;`元素提供了丰富的...

    html5 css3在线留言表单美化代码

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉吸引人的在线交互体验提供了强大的...同时,这样的实践也有助于提升开发者对HTML5新特性和CSS3高级特性的熟练度,从而在网页设计领域更上一层楼。

    一个HTML5表单验证效果.rar

    总的来说,这个HTML5表单验证示例展示了如何结合HTML5的新特性、CSS3以及JavaScript来创建一个功能完备且用户友好的信用卡卡号验证表单。这不仅有助于提高表单的交互性,还能保证数据的安全性和准确性,为网页应用...

    html5表单动态添加工作事项代码

    HTML5是Web开发中的一个重要里程碑,它引入了许多新特性,其中就包括对表单功能的增强,使得在网页上创建动态、交互性更强的工作事项管理变得更加便捷。在本主题中,我们将深入探讨如何利用HTML5的特性来实现动态...

    html5新特性整理文档

    ### HTML5新特性详解 #### 一、HTML5概述与设计原则 HTML5作为Web开发领域的一项重要标准,旨在提供一套更加简洁、高效且跨平台兼容的标记语言规范。其核心设计原则包括: 1. **基于现有技术**:HTML5的新特性需...

    HTML5-input表单控件调用代码_html5_表单_input_代码_控件_

    HTML5是现代网页开发的重要标准,它在许多方面对HTML4进行了扩展和增强,尤其是在表单元素和输入控件方面。HTML5的`input`标签是...通过学习和掌握这些新特性,我们可以提升网站的用户体验,同时减少后端验证的压力。

    HTML5响应式客户留言信息表单页面模板.zip

    HTML5是超文本标记语言(HTML)的第五次重大修订,引入了许多新的元素和功能,以增强网页的结构化和交互性。例如,`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;article&gt;`等语义化标签,提高了页面内容的可读性和可访问性。此外,HTML5还...

Global site tag (gtag.js) - Google Analytics