`
lqy_2019
  • 浏览: 19205 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

HTML5 form表单新特性

 
阅读更多
HTML5 是下一代 Web 语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能,并将引领下一代 Web 实现类似桌面的应用体验。下面介绍HTML5表单的新功能。

HTML语言作为如今编程最为广泛的语言,具有易用、快捷、多浏览平台兼容等特点,但是随着时代的进步,HTML的标准却停滞不前,这一次还在不断开发中的HTML5标准的更新可以说给这门标记语言带来了新的生命力。

表单是网页中常见的控件(集)。小到网站注册登录,大到一个企业的数据管理系统,都基本上有表单的身影。表单之所以如此重要,主要是因为它担负大量的用户和网页后台数据更新交互的任务。Web开发人员,对于网页表单可以说又爱又恨,爱的是它方便的收集、组织数据的功能,恨的是它的功能很大程度上也就仅此而已。

一些在最终网站用户看起来稀松平常的功能,比如说输入类型检查、表单校验、错误提示等等,开发人员无不需要花费大量精力利用 JavaScript和DOM编程来满足这些天然所需的功能点,而随着Ajax的流行,出现的一些JavaScript的工具库,比如Dojo, YUI等都提供了方便的JavaScript Widget或者API来减轻开发人员的负担。

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。HTML5 主要在以下几个方面对目前的Web表单做了改进:

一、表单结构更自由


XHTML中需要放在form之中的诸如input/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。

二、新的控件类型

1.email输入类型:

<input type="email" name="email"></input>
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.

2.url输入类型:

<input type="url" ></input>
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://

3.日期时间相关输入类型:

<input type="date"></input> <input type="time"></input> <input type="month"></input> <input type="week"></input>
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样。

4.number输入类型:

<input type="number"></input>
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值。

5.search输入类型:

<input type="search"></input>
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。

6.tel输入类型:

<input type="tel"></input>
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别。

7.color输入类型:

<input type="color"></input>
此类型可让用户通过颜色选择器选择一个颜色值,并反馈到value中。

三、新的表单属性

1.placeholder属性

<input type="text" placeholder="点击我会以清除"></input> 这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.

2.require/pattern属性

<input type="text" name="require" required=""></input> <input type="text" name="require1" required="required"></input> <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input>
表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果。

3.autofocus属性

<input type="text" autofocus="true"></input>
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus()。

4.list属性

<input type="text" list="ilist"> <datalist id="ilist"> <option label="a" value="a"></option> <option label="b" value="b"></option> <option label="c" value="c"></option> </datalist> </input> 该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容。

5.max/min/step属性:

<input type="range" max="100" min="1" step="20">
限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯。

6.autocomplete属性:

<input type="text" autocomplete="on"> 此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

7.data属性:

<select data="http://domain/getmyoptions"></select>
要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!

8.XML Submission编码格式

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

HTML5对表单控件的更新,无疑是很振奋人心的。相信随着标准的深入开发以及浏览器对HTML5支持程度的进一步提升,设计一个简单易用的表单的工作,将变得非常轻松。

分享到:
评论

相关推荐

    html5+css3实现酷炫的form表单

    总之,HTML5和CSS3为form表单的设计打开了新的大门,提供了更多的交互性和视觉吸引力。理解并熟练应用这些技术,将使你的网页在众多竞争对手中脱颖而出,提供卓越的用户体验。通过不断学习和实践,你可以创建出既...

    漂亮的form表单-漂亮的form表单

    "漂亮的form表单"这个主题关注的是如何创建既美观又功能强大的表单,以提高用户体验并提升网站的整体视觉效果。下面将详细介绍关于form表单的相关知识点。 1. **HTML表单基础** HTML中的`&lt;form&gt;`标签用于定义表单...

    form表单拖拽功能

    5. **浏览器兼容性**:虽然大部分现代浏览器都支持这些特性,但为了确保广泛兼容,需要考虑IE等较旧浏览器的适配。可以使用polyfill库或者条件语句来解决不同浏览器之间的差异。 6. **文件"FormbuildV1.0"分析**:...

    form表单的异步回调方法

    6. **表单验证(Form Validation)**:在异步提交前,可以添加客户端验证,例如使用HTML5的内置验证特性或自定义JavaScript验证,以减少无效请求对服务器的压力。 7. **错误处理(Error Handling)**:处理网络异常...

    form表单日期输入控件

    在网页设计和开发中,`form` 表单是用户与服务器进行数据交互的重要组成部分,而日期输入控件则是表单中常见的一种元素,用于收集用户的日期或时间信息。在HTML5中,引入了内置的日期输入类型,使得创建和处理日期...

    APP登录form表单html5模板下载

    标题“APP登录form表单html5模板下载”指出,这个资源包含了一个适用于APP登录的HTML5表单模板。HTML5是超文本标记语言的最新版本,它引入了许多新特性,如语义化标签、离线存储、拖放功能、媒体元素等,极大地提升...

    vue获取form表单的值示例

    本文档中将分享一个如何在Vue.js中获取form表单值的示例,使用的是Element-ui组件库以及axios库来发送HTTP请求。下面将详细介绍这些知识点。 ### Vue.js中的表单数据绑定 Vue.js提供了一种简单的方式来实现数据的...

    APP登录form表单html5模板下载-登录 login form 表单 注册 bootstrap app.rar

    总的来说,这个APP登录form表单HTML5模板结合Bootstrap,为开发者提供了一个快速启动登录和注册界面的起点。通过利用HTML5的特性及Bootstrap的组件,可以创建出符合现代Web标准、具有良好用户体验的登录注册页面。在...

    一个好看的Form表单源码

    #### 一、HTML5与CSS3在Form表单中的应用 在当前Web开发中,HTML5与CSS3是构建交互式和美观网页的关键技术。本案例展示了一个使用HTML5和CSS3创建的精美Form表单。 #### 二、基本结构与样式设置 1. **文档类型...

    Form报名表单html模板下载_报名表 表单_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar

    H5(HTML5)是HTML的最新版本,引入了许多新特性,如离线存储、拖放功能、媒体元素、表单控件等,提高了网页的互动性和多媒体支持。此模板可能利用了H5的一些特性,以提升用户体验和表单的功能性。 自适应响应式...

    APP登录form表单html5模板下载_登录 login form 表单 注册 bootstrap app.rar

    1. **HTML5**:HTML5是超文本标记语言的最新版本,它引入了许多新特性,如语义化标签(如、、等)、离线存储(离线Web应用程序)、媒体元素(和)、拖放功能以及更好的表单控件(例如、等)。这些特性使得HTML5更...

    微信小程序例子——使用form表单获取输入框数据

    在这个例子中,我们将深入探讨如何在微信小程序中使用`form`表单来获取用户输入的数据。 一、`&lt;form&gt;`组件介绍 在微信小程序中,`&lt;form&gt;`组件用于创建一个表单容器,它允许用户输入数据并通过提交操作将数据传递到...

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

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

    APP登录form表单html5模板下载_登录 login form 表单 注册 bootstrap app.zip

    总而言之,这个APP登录form表单HTML5模板是一个快速构建现代、响应式登录和注册界面的起点,结合Bootstrap的易用性和HTML5的先进特性,可以为开发者提供一个高效、美观的解决方案。通过自定义和扩展,开发者可以打造...

    HTML的表单

    学习如何使用这些新特性可以极大地提高表单设计的效率和用户体验。 - **新输入类型**:如`&lt;input type="email"&gt;`、`&lt;input type="url"&gt;`等,这些新类型不仅可以帮助验证数据格式,还能提供更好的用户界面支持。 ...

    html5新表单

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

    js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    第二种方法则是利用HTML5提供的新特性,通过直接在HTML元素上设置formaction属性来避免参数冲突。开发者应根据所支持的浏览器版本和具体需求来选择合适的方法。在实际开发中,正确地对URL中的特殊字符进行编码是非常...

    简洁html5登录注册js验证网页模板-登录 注册 login form验证 后台.rar

    同时,HTML5的新表单控件和属性(如、、&lt;form validation&gt;)也可能会在登录和注册表单中被应用,以增强用户体验和数据验证。 其次,JavaScript是实现前端交互的关键技术。在这个模板中,JavaScript被用来进行客户端...

    bootstrap风格的html5表单验证示例

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

    HTML 5 新特性介绍(ppt)

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

Global site tag (gtag.js) - Google Analytics