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

Github

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

福美欧

Github

该库是普通的JavaScript表单渲染器和Form.io的SDK。这使你可以呈现由Form.io生成的JSON模式表单, 并使用纯JavaScript呈现你的应用程序中的表单, 并提供接口SDK以便与Form.io API进行通信。该库的好处包括。

• 使用ES6和现代实践的纯JavaScript实现(无jQuery, Angular, React或任何其他框架依赖性)
• 将JSON模式呈现为Web表单并将该表单连接到Form.io API的
• 完成表单创建器, 该创建器创建用于呈现表单的JSON模式。
• 嵌套组件, 布局, 日期/时间, 选择, 输入蒙版以及许多其他随附功能
• Form.io之上的完整JavaScript API SDK库

如果你知道另一个很棒的插件/框架/项目, 可让你在客户端设计表单, 请在注释框中与社区共享。