前端开发必备!推荐Github最新热门表单开源框架HTML+CSS+JavaScript

表单元素在web项目开发中是必备的组件,原生的表单控件都不大友好,除了能满足功能需求,对于用户体验来说还需要开发者修改各种样式,另外,对于表单还用对文件进行验证和上传等操作,要达到更个人化的设计需要花费很多精力。目前,开源社区都比较活跃,大量优秀的开源框架出现,给我们开发者带来了很大的便利。

一般来说我们用框架协助开发是最好的方式,简化设计也节省开发时间。在这里我主要介绍github上比较热门的表单开源框架,主要参考项目的star数、提交数和最新更新时间。

1、 jQuery文件上传插件jQuery-File-Upload

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多文件上传插件

fine-uploader多文件上传插件

同样是一个文件上传插件。

1)多文件上传,支持拖放,支持进度条;

2)支持S3和Azure,支持图像缩放,支持HTML表单;

3)支持分块、恢复、暂停等大量特性。

不过可惜的是,该项目已不再维护了。不过你仍然可以根据需求进行使用。

Github地址:https://github.com/FineUploader/fine-uploader

3、form jQuery表单插件

form jquery表单

该插件主要是关于表单文件上传的相关处理的,jQuery表单插件允许你轻松地使用AJAX升级HTML表单。主要使用ajaxForm和ajaxSubmit从表单元素收集信息,以及确定提交过程,这两种方法都支持许多选项,允许你完全控制如何提交数据,更简单优雅地用ajax提交表单。

Github地址:https://github.com/jquery-form/form

4、jQuery-Mask-Plugin jQuery蒙版插件

jQuery-Mask-Plugin表单插件

一个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表单

django-crispy-forms表单插件

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设置变量在它们之间轻松切换。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?