前言
在前端开发中，表单的构建是不可避免的部分。但是，表单构建的过程往往十分繁琐，不仅需要较多的代码量，还需要注意各种细节问题。为了解决这个问题，前端工程师们经常会采取一些开源库或者工具来构建表单。
本文介绍一个常见的表单构建工具——npm 包 form_builder，它可以帮助我们快速构建丰富、美观的网站表单。本文将从基础介绍、具体实例和进阶用法三个方面介绍 form_builder 的使用。
基础介绍
form_builder 是一个基于 jQuery、Bootstrap 的表单构建工具。它可以让我们通过拖拽元素的方式来生成表单，并且支持多种主题风格和自定义页面布局。相较于手写大量的 HTML、CSS 和 JavaScript 代码，使用 form_builder 可以大大提高表单开发的效率，减少开发时间和代码量。
具体实例
下面我们结合实例来演示如何使用 form_builder。我们首先需要先安装 form_builder，可以通过 npm 包管理工具来安装：
$ npm install form_builder
完成安装之后，我们就可以开始愉快地使用 form_builder 了。
首先创建 HTML 页面
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
------
---- -------------- ------------------------
------- ----------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------
--------
---------------------------- -
--- ---------- - -
------- -
-
----- -------
------ ------ ------
---------- ---------------
----- -----------
--
-
----- -------
---------- ---------------
------ ----- ------
----- ----------
--
-
----- ---------
------ ---------
---------- ---------------
----- ---------
--------- ------
------- -
------- ------- ------ --------
------- --------- ------ ----------
------- -------- ------ --------
-
-
--
--
--- ----------- - -----------------------------------------------------
--------- -------
--------- ----------
---
----------------------------- -
--- --- - -----------------------------------
-----------------------
---
------------------------------ -
--- ---- - ------------------------------------
--------------------------------------- ----- -------
---
---
---------
-------
-------上述 HTML 代码片段主要分为两部分：
- 定义了一个
fb-editor的 DOM 元素，它会被 form_builder 用于表单编辑器的展示； - 引入了 jQuery 和 form_builder JavaScript 库，并对 form_builder 进行初始化操作，同时定义了一个简单的表单模板
fbTemplate。
示例展示
在浏览器打开刚刚创建的 HTML 页面，我们可以看到一个可以拖拽的表单编辑器界面。尝试把左侧栏的组件拖动到中央区域，就可以创建一个表单控件。
表单控件可以进行编辑，拖动、缩放、删除等操作。当编辑完成后，可以利用 form_builder 提供的 getData 方法来获取表单的配置。
下面我们将在页面上添加两个按钮，通过点击这两个按钮来获取生成的表单配置。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
------
---- -------------- ------------------------
------- ----------- ---------- ---------------- ------------
--------- ------------ -------- --------------- ------ ----------- ------------------
------- ------------ ---------- ------------ ------------------ ---------- -------------
--------- ------------- -------- --------------- ------ ----------- ------------------
------- ----------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------
--------
---------------------------- -
--- ---------- - -
------- -
-
----- -------
------ ------ ------
---------- ---------------
----- -----------
--
-
----- -------
---------- ---------------
------ ----- ------
----- ----------
--
-
----- ---------
------ ---------
---------- ---------------
----- ---------
--------- ------
------- -
------- ------- ------ --------
------- --------- ------ ----------
------- -------- ------ --------
-
-
--
--
--- ----------- - -----------------------------------------------------
--------- -------
--------- ----------
---
----------------------------- -
--- --- - -----------------------------------
-----------------------
---
------------------------------ -
--- ---- - ------------------------------------
--------------------------------------- ----- -------
---
---
---------
-------
-------添加了两个按钮 getXML 和 getJSON，分别用于获取生成的表单配置 XML 和 JSON 格式。通过 getData 方法获取表单配置，再通过 jQuery 把数据填充到 xmlData 和 jsonData 两个表单控件中。
完成以上步骤后，我们将得到一个如下图所示的表单编辑器：
当我们填写好表单之后，可以通过点击 getXML 和 getJSON 两个按钮来获取生成的表单配置。
进阶用法
除了基础用法之外，form_builder 还有一些进阶用法，帮助我们更加灵活地控制表单的样式和布局。
实现自定义样式
form_builder 支持通过 CSS 自定义样式。首先，在 HTML 页面中加载自定义的 CSS 文件：
<link rel="stylesheet" href="./css/form_builder.css">
然后在 CSS 文件中定义表单元素的样式，例如：
-- -------------------- ---- -------
------------- ---------------- -
------ -----
------- -----
-------- --- -----
---------- -----
------------ -----------
------ -----
----------------- -----
----------------- -----
------- --- ----- -----
-------------- ----
----------- ----- - --- --- ------- -- -- ------
----------- ------------ ----------- ----- ---------- ----------- -----
-实现自定义布局
通过表单控件和表单元素的 class 名称可以实现自定义布局。例如，我们可以使用 col-sm-6 和 col-md-4 等 Bootstrap 中的 class 名称来设置不同的布局。
-- -------------------- ---- -------
-------- ---------------
---- -----------------
---- -------------------
------ --------------------- ------------
------ ----------- -------------- -------------------- -----------------
------
------
---- -----------------
---- -------------------
------ ------------------- ------------
------ ----------- ------------- -------------------- ----------------
------
------
---- -----------------
---- -------------------
------ ---------------------------
------- ----------- -------------------- --------------
------- --------------------------
------- ------------------------------
------- ----------------------------
---------
------
------
---- -----------------
---- -------------------
------ -----------------------------
------- ------------ -------------------- ---------------
------- ----------------------------
------- ------------------------
------- ----------------------
---------
------
------
---- -----------------
---- -------------------
------ -----------------------
------ ----------- --------- -------------------- ------------
------
------
----------总结
使用 form_builder 可以快速构建复杂的网站表单，避免手写大量的代码和注意各种细节问题，进而提高表单开发效率和代码质量。本文从基础介绍、具体实例和进阶用法三个方面介绍了 form_builder 的使用方法，希望读者掌握相关技巧，为表单构建提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555ba81e8991b448d2d38