5个JavaScript和jQuery的最佳拖放表单构建器插件 _拖放

本文概述

5. Bootstrap 2和3 Form Builder
4. Bootstrap 3表单生成器
3. Shalotelli的Form Builder
2. Formeo
1. jQuery Form Builder
Formbuilder

如今, 许多Web开发人员使用服务器端框架, 这些框架允许使用后台逻辑创建非常安全的表单, 然后在视图上轻松呈现它们。通常, 除非你在逻辑中指定此类行为, 否则这些表单不允许使用动态表单(具有新的未注册字段)。不过, 这可能非常棘手, 因此, 如果你愿意在项目中创建动态表单, 则可能需要存储由客户端表单构建器生成的结构, 然后根据该表单呈现表单, 而不是像数据库。
在本文中, 我们想与你分享5种最有用的客户端表单生成器, 它们可以独立使用, 也可以与jQuery一起使用。
5. Bootstrap 2和3 Form Builder Github |演示引导程序2 |演示引导程序3

文章图片
通过此表单生成器, 你可以从Bootstrap 2和3组件创建HTML结构, 可以轻松将其拖放到表单中。由亚当·摩尔(Adam Moore)创建, 以帮助减轻编写所有标记以使引导表格集中在一起的压力。最初的版本是一个很大的jQuery意大利细面条, 因此, 截至2013年3月, 它已使用ribs.js重写, 并利用了underscode.js模板。如果你有问题, 或者想要添加特定的代码段, 请查看github项目。请注意, 这只是一个简单的工具, 因此我并不热衷于添加许多功能(例如, 保存/导出表单, 嵌入表单等)。
4. Bootstrap 3表单生成器 Github

文章图片
这个Bootstrap Form项目展示了如何在你的项目上创建一个组件以拖放元素并设计表单, 并从其结构中检索HTML结构。通过此项目, 你可以：

支持单列/ 2列布局。
在单个元素上编辑html。

3. Shalotelli的Form Builder Github

文章图片
该项目是使用jQuery(和jQuery UI), Bootstrap的Form Builder的非常简单且有用的实现, 可以在你的项目中轻松实现。尽管不认为项目的一般结构是插件, 但你可以通过提取必要的文件并在codemirror实例中检索生成的结构, 将其作为插件。
2. Formeo Github

文章图片
Formeo是用于拖放表单创建的零依赖JavaScript模块。该插件是：

具有多种选择的可扩展构建器
简单的拖放界面
列布局
自订栏位
预览模式
i18n支持

1. jQuery Form Builder Github

文章图片
jQuery Form Builder是使用JavaScript创建动态表单构建器的最广泛使用的插件之一。它具有许多选项, 并且可以本地化。 jQuery formBuilder是一个100％的客户端插件, 它使用户能够使用直观的拖放界面创建表单。 FormBuilder支持许多表单字段和一些html标记。 formRender是formBuilder的配套插件, 可让你呈现已创建表单的结果。典型的用例是在站点或应用程序的管理区域中使用formBuilder, 在前端使用formRender。因此, formRender和formBuilder是2个独立的插件, 但可以一起使用以创建编辑切换。插件本身是：

可自定义-仅启用你需要的字段, 使用自己的通知来追加或添加内容等等。
引导程序准备就绪但不依赖
可翻译的
以JSON或XML导出表单的结构

formBuilder的使用量不断增长, 因此需要多种语言提供。在项目中始终欢迎对现有语言的添加和更新, 因此不要忘记查看” 贡献语言” 以了解详细信息。 formBuilder和formRender可直接从GitHub或通过yarn / npm获得。
Formbuilder 【5个JavaScript和jQuery的最佳拖放表单构建器插件】Github

文章图片
Formbuilder是一个图形界面, 可让用户构建自己的Web表单。 Formbuilder.js仅处理创建表单的客户端逻辑。它将输出表单的结构化JSON表示形式, 但是保存表单, 将其呈现在服务器上以及存储用户的响应完全取决于你。如果你使用的是Rails, 则还有Formbuilder.rb, 这是一个Rails引擎, 旨在提供此服务器端功能。
福美欧
Github