分享网站建设知识
推动网站应用价值

提供短小精焊并有价值的建站知识分享。

用于增强Web表单体验的15个JavaScript表单插件
2019-11-05 09:01:39

网页前端工程师可以用JavaScript在网站上添加很多很酷的功能,使其网站更为生动有趣,用户体验也更棒。而如果您正在设计自定义表单,如用户签名/登录、联系人页面或设置页面,以下推荐的这些插件可以为你的网站添加一些额外的动态特性,使您的静态输入字段更加活跃。

 

JCF形式

 

 

最喜欢的JS表单插件是由PSD2HTML团队创建的JCF表单。神秘的JCF首字母缩写代表JavaScript定制表单,它名副其实。你可以定制默认的选择菜单,范围滑块,输入框,上传表单,几乎所有你需要的表单。这是完全免费的,并且构建在jQuery之上,所以安装起来完全没问题。如果您想了解更多,您还可以在官方GitHub repo上找到更多的文档和信息。

 

iCheck

 

 

复选框和单选按钮是web表单的主要内容。但它们也是最难定制的,而且默认样式看起来很乏味。iCheck插件非常容易设置和定制,没有太多的JS知识。这是在jQuery上的工作,并且有一些预先设计的主题,您可以轻松地编辑。除了外观,这个插件还支持键盘输入、32个自定义选项和几乎12个处理用户行为的回调方法。

 

Parsley.js

 

 

如果你更喜欢香草的,你可能会喜欢欧芹,一个基于自由的基于JS的表单验证库。这是完全免费下载的,它是为数据验证而做的最完整的插件之一。

 

欧芹是独特的,它不需要复杂的正则表达式来让它工作。它带有内置的验证器,适用于所有类型的输入,如电话号码、信用卡、地址和电子邮件。看看这些例子,看看欧芹是否适合你。

 

FloatLabel.js

 

我不介意占位符文本,但我更喜欢FloatLabel。js技术比其他任何东西都重要。这为默认字段创建了一个占位符,但是在它的焦点和填充之后将文本移到字段的上方。通过这种方式,您可以轻松地将信息添加到字段中,并将表单标签保持在清晰的视图中。注意,这是一个jQuery插件,所以它需要一个库的副本。但是设置非常简单,您可以按照GitHub的指示来顺利运行。

 

Tooltipster

 

 

复杂的表单在引导用户的工具提示方面做得很好。这就是Tooltipster的美丽之处,它是一个免费的jQuery插件,可以让你在屏幕的任何地方添加工具提示。您可以根据用户的行为来定义这些工具提示,比如鼠标悬停、单击、焦点或将文本输入字段。您还可以定制它们的样式和动画,同时将这些工具提示与Ajax请求或回调方法连接起来。

 

Flexselect

 

 

如果您不喜欢默认的HTML选择菜单样式,那么请查看Flexselect。这个自由的jQuery插件将所有选择的菜单重新样式为连接到输入字段的下拉面板。它们可以更好地融合到一个典型的布局中,而且它们确实感觉更容易使用。

 

请注意,这个设置有点棘手,因为这个插件有几个依赖项,但是它也足够灵活,可以根据您的喜好自定义和修改。

 

Fort.js

 

 

一些web站点在屏幕顶部显示进度条,以显示表单的完成。这对于用户可能想知道要多久完成的冗长表单更有用。你可以用几行代码快速地将这个效果添加到你的网站。该插件是完全免费的,并与任意数量的输入字段一起工作。还可以查看现场演示,看看它是如何在真实页面上显示的。

 

Switchery

 

 

经典的ios风格的开关重新定义了切换输入。那些原来的开关在iOS 7中重新设计了,这导致了像开关一样的库。这个免费的开源插件可以让你在和iOS 7的输入一样的方式上创建和切换。每个开关都在一个复选框上运行,用户单击该复选框可以选中(打开)或取消选中一个设置。您可以通过将简单的复选框替换为这些开关来添加任何设置页面或配置文件页面。

 

jQuery CC验证器

 

 

电子商务商店必须处理信用卡验证和处理敏感输入。数据安全性是一个完全不同的主题,但是这个jQuery CC验证器是目前为止最好的验证插件。它完全免费,并且开源,运行在jQuery库之上。它非常容易设置,现场演示展示了你可以用这个不可思议的插件做多少事情。

 

Rangeslider.js

 

 

HTML5中较新的特性之一是范围输入。这样,用户可以滑动一个输入栏并选择一个数值范围的数据。但是默认的样式是很基本的,所以像Rangeslider这样的插件。js越来越受欢迎。这个免费的jQuery插件可以作为HTML5范围滑动器的一个多填充。对于不支持它的浏览器,您仍然可以得到经典的范围输入,因此这对于所有web和移动浏览器来说都是完美的。

 

BS3 Datepicker

 

 

您可以在那里找到大量的免费的Bootstrap框架,以获得出色的web模板。对于在引导库中添加功能的插件也是如此。其中一个例子是为定制web表单制作的BS3 Datepicker。很少有一刀切的解决方法。但是这个插件提供了一个真正的界面,大多数人都知道如何使用它。而且它完全是围绕着引导风格设计的,所以它融入了。

 

Flatpickr

 

 

如果您想要一个更容易安装的datepicker,可以查看Flatpickr。这个免费的插件使用纯JavaScript创建一个具有大量可选特性的完整日期/时间选择器。演示页面是一个很好的地方,可以查看并查看它的功能。它使用一个简单的JavaScript动画和一个基本的阴影效果混合到任何布局。任何需要有大量定制空间的日期/时间选择器的人都会从这个插件中得到很多。

 

jQuery文件上传

 

 

处理用户文件上传是目前最复杂的表单任务。您需要创建一个在所有设备上工作的输入,但也需要接受特定类型的文件,并知道如何在后端处理它们。这个插件很适合其他库,比如jQuery和角,所以它是任何与文件上传相关的最佳选择。请注意,这确实需要一些努力来配置,因此您需要了解JavaScript的方法。

 

理想的形式

 

 

在最新版本的理想表格3中,你会发现许多很棒的功能,比如自动表单验证和自定义表单设计。这些设计包括复选框、单选按钮、输入字段、日历ui,甚至支持第三方插件。

 

设置过程非常漫长,但是给您提供了许多额外的表单功能,其中有一个库。更多细节请参考GitHub设置指南。

 

jQuery Autotab

 

 

最后,当然不是最不重要的是由Matthew Miller提供的jQuery Autotab插件。这允许您为任何表单输入定义一定的长度,因此一旦完成,它将自动签入下一个表单。它适用于那些需要设置号码的字段,比如电话号码或生日。查看现场演示,看看这是如何工作的,如果它有助于扩展您的web表单。

分享该编文章:

免责声明:本站部分文章由本网用户编辑转载并发布,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容![声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。本站拥有对此声明的最终解释权。

相关资讯: