首页 > 代码库 > 15 款优化表单的 jQuery 插件

15 款优化表单的 jQuery 插件

  网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理。这些表单在我们浏览的网页中随处可见,也容易被我们忽略。 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想提的建议或者问题,但是开发者往往只关注网站的设计和用户交互的内容,并不会注意到用户进 行交互的方式——表单。

  以下整理的这个列表就是为 Web开发者准备的,包括了 15 款优化表单的 jQuery 插件。希望大家能从中找到适合自己的 jQuery 插件,优化网页表单,更好的与用户进行交互。看完要记得和大家分享你的感想哦:)

  一个精选的 AJAX Contact 表单

  Demo || Tutorial

  这个插件提供一个简单可靠的反馈表单。

jQuery-forms-plugins-1

  创建一个霓虹灯闪烁效果的表单

  Demo || Tutorial

  不需要使用 Flash 就可以创建一个霓虹灯效果的表单。

jQuery-forms-plugins-2

  高级 JavaScript 表单分类器 – TinyTable V3

  Demo || Tutorial

  第三代 TinyTable 表单分类脚本添加了搜索,列平均值和合计,记录号,查看所有函数视图和重置功能。大小接近 6 KB,非常轻量级。

jQuery-forms-plugins-3

  完整经济业务表单

  Demo || Tutorial

  Recurly.js 是完整经济业务表单非常安全,兼容 PCI,支持完全自定义的 CSS。

jQuery-forms-plugins-4

  使用纯 CSS 创建表单,使用 jQuery 优化

  Demo || Tutorial

  在这个教程中,我们使用纯 CSS 来创建一个表单,使用 jQuery 插件来给表单元素加上皮肤,比如文本框,下拉列表,选项框。

jQuery-forms-plugins-5

  Jq Transform Plug in

  Demo || Tutorial

  这个插件是个 jQuery 样式插件,允许为表单元素加上皮肤。

jQuery-forms-plugins-6

  PrettyCheckboxes

  Demo || Tutorial

  这个脚本提供给想要在各种浏览器中保持一致外观的单选按钮的用户,使用这个脚本就可以保证常规输入的可用性。

jQuery-forms-plugins-7

  使用 JavaScript 创建一个进度条

  Demo || Tutorial

  使用 jQuery 构建进度条到各种 UI 部件库和交互帮手,用户可以查看表单的完成程度。

jQuery-forms-plugins-8

 

  jQuery 信用卡验证插件: Smart Validate

  Demo || Tutorial

  Smart Validate 是 jQuery 信用卡验证插件,使得信用卡验证变成一个简单的任务。它能保证用户输入有效的信用卡号。

jQuery-forms-plugins-9

  Autotab: jQuery 自动 Tab 和过滤插件

  Demo || Tutorial

  Autotab 是一款 jQuery 插件,提供表单自动 Tab 和过滤文本字段的功能。当达到文本字段的最大字符数就会自动跳到下一个表单元素。

jQuery-forms-plugins-10

 

  jQuery 高亮插件

  Demo || Tutorial

  这个插件会高亮用户与页面交互的元素,比如当输入文本时,会高亮文本框区域;当选择选项时,会高亮选项区域。

jQuery-forms-plugins-11

 

  Sisyphus

  Demo || Tutorial

  Sisyphus.js 是一个利用 HTML5 技术实现的自动保存草稿插件,它能将表单数据自动保存到 LocalStorage 中。当浏览器崩溃后,只要重新打开浏览器就能恢复数据。它也是一个轻量级的 jQuery 插件,使用也非常简单,可以设置每隔一段时间或者是数据有变化时自动保存数据。

jQuery-forms-plugins-12

  jqPlot

  Demo || Tutorial

  jqPlot 是 JavaScript 框架,同时也是 jQuery 绘图和图标插件。jqPlot 提供各种漂亮的折线,条形和饼图图表。

jQuery-forms-plugins-13

  via dizyne.net

<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401174037&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Fxiaochao12345%2Fp%2F3753087.html&dt=1401174040704&shv=r20140520&cbv=r20140417&saldr=sb&correlator=1401174040171&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401167081&ga_hid=384394282&ga_fc=1&u_tz=480&u_his=96&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=12&adx=0&ady=0&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=Y6Gt3RcWRY&p=http%3A//www.cnblogs.com&dtd=104" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401174037&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Fxiaochao12345%2Fp%2F3753087.html&dt=1401174040838&shv=r20140520&cbv=r20140417&saldr=sb&prev_slotnames=8660799060&correlator=1401174040171&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401167081&ga_hid=384394282&ga_fc=1&u_tz=480&u_his=96&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=12&adx=304&ady=250&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=QzI99KALbR&p=http%3A//www.cnblogs.com&dtd=44" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>