在前端开发中，我们经常需要制作表单页面。而手写表单的 HTML 和 CSS 代码既繁琐又易错，因此出现了许多快速生成表单的工具。其中，html-form-generator 是一个方便易用的 npm 包，可以帮助我们快速生成符合我们需求的表单。
安装
使用 npm 可以很方便地安装 html-form-generator 包。
npm install html-form-generator --save
使用
基本用法
导入 html-form-generator 包：
const { createForm } = require('html-form-generator');调用 createForm 方法，传入表单数据和选项，即可生成表单 HTML 代码。
-- -------------------- ---- ------- ----- -------- - - ----- ------------ ----- ------- ------ ------- ------------ ------- ----- ---- ----- -- ----- ----------- - - ------- --------------------------------- ------------- --------- ------------ ------- -- ----- -------- - -------------------- -------------
生成的 formHTML 即为表单的 HTML 代码。
表单数据
表单数据是生成表单的关键。可以传入一个包含多个表单数据对象的数组，html-form-generator 会将每个表单数据对象转换成对应的 HTML 代码。
-- -------------------- ---- -------
----- --------- - -
-
----- ------------
----- -------
------ -------
------------ ------- ----- ---- -----
--
-
----- -------------
----- --------
------ --------
------------ ------- ----- ---- ------
--
-
----- ----------------
----- -----------
------ -----------
------------ ------- ----- - ---------
-
--
----- -------- - ----------------------支持的表单类型包括：
- 输入框：
- text
- password
- number
- 单选框：
- radio
- 复选框：
- checkbox
- 下拉列表：
- select
表单选项
选项用于设置表单的各种属性，比如表单的提交地址、提交按钮的文本内容等。
-- -------------------- ---- -------
----- ----------- - -
------- ---------------------------------
------- -------
------------- ---------
------------ --------
---------------- -
------- ----- ------------
-
--
----- -------- - -------------------- -------------支持的选项有：
action: 表单提交地址method: 表单提交方式（默认为'get'）submitButton: 提交按钮文本内容resetButton: 重置按钮文本内容fieldsetOptions: 表单区域选项legend: 表单区域标题
自定义表单数据
如果需要自定义表单 HTML 代码，可以使用 customHtml，它会在表单数据后自动生成。
const formHTML = createForm(formData, { customHtml: '<div>Custom HTML</div>' });示例代码
下面是一个完整的 HTML 表单页面示例，包含三个输入框和一个提交按钮。当用户提交表单时，JavaScript 会在控制台显示表单数据。
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ---- --------- ---------------
-------
------
---- --------------------------
------- ------------------------
-------
-------JavaScript 代码：
-- -------------------- ---- -------
----- - ---------- - - -------------------------------
----- --------- - -
-
----- ------------
----- -------
------ -------
------------ ------- ----- ---- -----
--
-
----- -------------
----- --------
------ --------
------------ ------- ----- ---- ------
--
-
----- ----------------
----- -----------
------ -----------
------------ ------- ----- - ---------
-
--
----- ----------- - -
------- ---------------------------------
------- -------
------------- ---------
---------------- -
------- ----- ------------
-
--
----- -------- - --------------------- -------------
--------------------------------------------------- - ---------
------------------------------------------------------------------- ----- -- -
-----------------------
----- -------- - --- -----------------------
--- ------ ----- ------ -- ------------------- -
--------------- - -- - - -------
-
---代码解释：
- 先定义了三个表单数据对象和表单选项。
- 调用
createForm方法生成表单 HTML 代码，并将其插入到form-container元素中。 - 给表单添加了一个
submit事件监听器，当用户提交表单时，获取表单数据并在控制台中显示。
总之，html-form-generator 使得表单的生成变得快捷和简单，为我们在日常前端开发中提供了非常方便易用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726781e8991b448e89a5