表单元素在web项目开发中是必备的组件,原生的表单控件都不大友好,除了能满足功能需求,对于用户体验来说还需要开发者修改各种样式,另外,对于表单还用对文件进行验证和上传等操作,要达到更个人化的设计需要花费很多精力。目前,开源社区都比较活跃,大量优秀的开源框架出现,给我们开发者带来了很大的便利。
一般来说我们用框架协助开发是最好的方式,简化设计也节省开发时间。在这里我主要介绍github上比较热门的表单开源框架,主要参考项目的star数、提交数和最新更新时间。
1、 jQuery文件上传插件jQuery-File-Upload
bootstrap和原生的文件上传样式都显得比较丑陋,该文件上传插件支持更友好的样式。
1)支持多文件选择;
2)支持文件拖动上传;
3)进度条显示;
4)文件验证和图像预览;
5)支持音频和视频;
6)支持跨域;
7)支持标准HTML表单文件上传;
8)跨平台,适用于任何服务端平台(PHP、Python、Ruby on Rails、Java、Node)。
Github地址:https://github.com/blueimp/jQuery-File-Upload
2、fine-uploader多文件上传插件
同样是一个文件上传插件。
1)多文件上传,支持拖放,支持进度条;
2)支持S3和Azure,支持图像缩放,支持HTML表单;
3)支持分块、恢复、暂停等大量特性。
不过可惜的是,该项目已不再维护了。不过你仍然可以根据需求进行使用。
Github地址:https://github.com/FineUploader/fine-uploader
3、form jQuery表单插件
该插件主要是关于表单文件上传的相关处理的,jQuery表单插件允许你轻松地使用AJAX升级HTML表单。主要使用ajaxForm和ajaxSubmit从表单元素收集信息,以及确定提交过程,这两种方法都支持许多选项,允许你完全控制如何提交数据,更简单优雅地用ajax提交表单。
Github地址:https://github.com/jquery-form/form
4、jQuery-Mask-Plugin jQuery蒙版插件
一个jQuery插件,用户在表单字段和HTML元素上制作蒙版。
1)轻量级,体积容量小,支持动态添加元素;
2)支持任何HTML元素上的掩码,HTML符号支持;
3)字符串数字等混合蒙版;
4)兼容React,Zepto.js,Angular.js等。
Github地址:https://github.com/igorescobar/jQuery-Mask-Plugin
5、django-crispy-forms Django表单
Github地址:https://github.com/django-crispy-forms/django-crispy-forms
Django创建表单的最佳方法。使用组件构建可编程的可重用布局,完全控制呈现的HTML,而不需要在模板中编写HTML。所有这些都没有破坏Django中处理事情的标准方式,因此它可以很好地处理任何其他表单应用程序。
Django -crisp -forms支持Python 2.7/Python 3.3+和Django 1.8/Django 1.10+。该应用程序主要提供:
1)一个名为|crispy的过滤器,它将呈现优雅的基于div的表单。可以将其视为内置方法:as_table、as_ul和as_p。你无法调整输出,但很容易开始使用它。
2)一个名为{% crispy %}的标记,它将根据您的配置和特定的布局设置呈现表单。这给你惊人的力量,没有太多的麻烦,帮助你节省大量的时间。
django -crisp -forms支持几个前端框架,比如Twitter引导(版本2、3和4)、统一表单和Foundation。您还可以轻松地调整自定义公司的模式,创建自己的模式,有关更多信息,请参见文档。您可以使用CRISPY_TEMPLATE_PACK设置变量在它们之间轻松切换。