如何设计一个表单引擎？

单的本质是业务，没有表单是无法完成业务系统的，而动态表单使业务系统更高级。动态表单是什么呢？它是如何工作的？应用场景有哪些？一起来看一下吧。

一、表单

表单在网页中主要负责数据采集功能，是提交数据的一切形式。表单的本质是提交数据，不仅仅包含输入框、下拉选择框等这些控件，常见的按钮空间也属于一个表单。

1. 动态表单

动态表单（Dynamic Form），指在前端运行过程中可依赖某些业务逻辑发生表单项变化的表单，还包括表单布局、表单数据管理、表单校验、表单交互、表单项联动逻辑等原本由前端编程完成的表单开发，转由后端通过 API 接口输出表单描述自动完成上述所有内容的表单开发形式。

（动态表单原理示意图）

2. 动态表单的特点优势

表单的本质是业务，而动态表单使业务系统更高级。

普通表单是一个表单写一份前端的代码，代码全部由前端开发者完成（后端配合接口输出）。而动态表单则是一个表单对应一个 JSON（由后端输出），所有表单由一份代码（动态表单引擎）进行加载和渲染。

所以，动态表单具有以下优势：

客户端运行的代码量更少；
每个表单的JSON按需加载；
表单需求变化时，无需前端修改发版，只需编辑数据库中的JSON。

二、表单控件

表单控件是提供一组允许用户操作的对象，从而接收用户输入的数据，用户可操作该对象来执行对表单设计，修改等操作。

1. HTML表单种常见的13个控件

input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件。

2. 动态表单控件

动态表单是老厂商天翎核心技术之一，也是天翎公司核心产品MyApps的重要组成部分。通过对于动态表单的应用，可以避免在电子流程系统中硬编码的数据采集及处理表单，提高系统的可维护性。

说明：

Form，动态表单实现的基本入口，描述了DynaForm的最基本属性，比如名称、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通过此XML描述两类信息：

Form中所具有的Field以及Field的类型、名称、长度、计算代码等等，XML；
Form的格式，比如排列次序、表格定列化的过程当中，系统自动解析XML的内容并将其转换为Java Object并由此具备Object的行为特性；位等。Form作为一个ValueObject存储在数据库中。

FormElement，接口，表示Form中的基本元素；

FormField，动态表单的最基本元素，在myApps/OBPM中被声明为Abstract，具体Object行为依赖于具体的SubClass实现；

TextField，单行文本框，继承FormField；

SelectField，下拉选择框，继承FormField；

TextareaField，多行文本框，继承FormField；

CheckBoxField，复选框，继承FormField；

RadioBoxField，单选框，继承FormField；

Textpart，静态文本段，除各种Field以外的静态文本部分，继承FormElement；

ComponentField，自定义组件，继承FormField；

AttachmentUploadField，附件上传组件，继承FormField；

ImageUploadField，图片上传组件，继承FormField；

ViewDialogField，视图组件，用于实现主从结构的表单，继承FormField；

CalctextField，计算文本组件，用于实现需要计算的文本，继承FormField；

IncludeField，实现SubForm的包含，继承FormField；

WordField，Word组件，继承FormField；

OcrField，为将来预留的接口，系统暂未实现；

三、表单引擎

表单引擎是为快速实施项目研发的轻量级表单设计工具。采用表单引擎工具可在不开发和新增加代码的情况下设计出新表单样式，同比程序开发可省掉程序员差不多70%的开发工作量，并且后期维护相对简单，管理方便。

1. 工作原理

在了解了表单的基本机构后，进一步看看表单引擎是如何工作的。

从客户端（Client）输入数据（Document），比如一个excel文件，表单（Form）结合excel文件自动生成HTML，如下图：

（表单结合文档生成HTML过程）

（XML解析为表单对象的过程）

（表单转为HTML过程）

（表单生成数据库）

2. 应用场景

天翎Myapps低代码开发平台的表单引擎是基于Web界面上可视化编辑的表单设计系统，同时支持印刷模式和拖拽模式两种设计方式，形象可见，操作方便。印刷模式可以做一些复杂的表单配置，同时还支持word表格的导入；拖拽模式：基于Vue的表单设计器，采用可视化拖拉拽的模式进行表单的设计。

（表单前台）

（表单后台）

本文由 @周志军Jarod 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

在开篇

什么是表单呢？当前端想要提交数据给后端，怎么搞？那么在前端开发中，表单是常用的手段，比如常见的场景有：登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中，笔者除了讲一些基本的知识点，还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。

盘点HTML表单基础

1. from元素

构建表单，主要是通过from元素，我们先来一个最简单的小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息录入CMDB</h3>
        <form>
            <label for="hostname">主机名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

通上面的小栗子可以知道，form表单的主要通途是用于收集用户的输入。在from表单里面，还包含着各种不同类型的input元素，比如我们上面小栗子中用到的文本（text）、提交按钮（submit）。

input元素是表单里最重要的元素，它有很多type属性，下面我们来总结下：

类型描述text文本输入radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮

在上面小栗子中，除了input元素之外，不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签，且用for属性和input元素的id属性进行绑定呢。

2. 单选按钮

什么是单选按钮？就是在多个选项中，你只能选其中1个，不能多选。下面我们看个小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，出了两道问答题，均为单选题。那么，类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。

3. 复选框

什么是复选框？复选框就是可以选择多个选项，当需要多选的时候，使用复选框输入类型就对了。看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，实现复选框的输入类型是checkbox，这个是重点哦！

4. 提交按钮

当有数据要提交给后端的时候怎么搞？如果后端是API服务，可以给它提交json。如果是前端页面，就需要通过构建表单来获取用户的输入。基于表单提交数据给后端，怎么提交？需要一个可以点击的提交按钮，那这个按钮怎么来？先看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

输入类型为submit，说明它就是提交按钮，注意上面代码type="submit"了吗？

HTML表单重要属性

1. Action属性

在之前的例子中，前端表单需要将数据提交给后端，除了需要一个提交按钮外，还需要action属性。当点击提交按钮后，表单的数据该发到后端的哪个url进行处理，就是定义在action属性中。接下来，我们结合前端和后端直接来个小实战，后端代码用Python的Flask框架。

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后，我们接下来看看效果

输入IP地址后，点击提交

这个ok是后端返回的

后端接收到数据后，啥也没做，只是做了简单打印

这个小栗子很简单，通过这个小栗子，是不是对action属性的用法有了进一步的理解呢？

2. Method属性

method属性的用途是指定提交数据的http方法，通常有2个，get和post。接下来我们在上个小栗子的基础上做个小改造，看下面代码

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后，提交表单时，直接告诉你这是不允许的方法

在这个例子中，是因为前端的表单了指定了method为get请求，而后端接收数据的method规定了需要post请求，故所以出现这个问题。

下面我们改造一下后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的method还是保持get请求，再次提交，后端的返回如下：

看到了吗？后端判断前端过来的请求是get还是post，很显然，前端过来的请求是get，并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码，将请求修改为post，代码如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也稍微改造一下，改变接收前端数据的方法

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输入IP地址，并点击提交

提交后，后端给前端返回了ok

接下来看下后端，后端啥也没做，就获取到表单的数据，然后打印了数据，并且打印了下数据类型

好了，关于前端的action属性和Method属性就讲到这里了。为了讲解action和method，还结合了后端的一丢丢知识，前端和后端的知识点以后都会慢慢讲到哈！

HTML表单常用元素

1. 下拉列表

先来个前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中选择“Go语言”，并提交

后端啥也没干，就只做了打印

2. 允许多选

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中，是使用multiple属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        data = request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift键可进行多选

后端打印的效果图下图：

写在最后

关于表单基础知识点的讲解就这么愉快的结束了，关于更多表单的元素、输入属性、输入类型可自行查阅和实战，笔者因时间有限就不一一演示。感谢您的阅读，望多多关注我们、点赞、转发！

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

lement UI 目前在中后台项目中应用广泛，是十分流行的 Vue 组件框架。而表单元素，作为最常用的用户输入组件，在设计开发过程中几乎都要涉及，且往往大同小异。能不能减少重复的代码编写工作呢？能不能甚至不写代码，点几下鼠标就能生成想要的表单呢？Form-Generator，这个基于 Element UI 框架 Form 元素的表单设计与代码生成器，就能解放你的双手。

ElementUI框架

简介

Form-Generator，是 JakHuang 在 Github 和码云上开源的表单设计与代码生成器，项目代码位于 https://github.com/JakHuang/form-generator，国内镜像位于 https://gitee.com/mrhj/form-generator。

Form-Generator 基于 Element UI 组件库的 Form 表单组件，开发了一个表单设计器，可以在设计器中，点选不同的输入组件构建表单，设计器则会自动生成对应的 Vue 代码，可以项目中使用。也可以把设计好的表单以 JSON 的格式导出，方便存储传输，使用时利用配套的解析器把 JSON 解析为设计好的表单即可使用。

form-generator使用

安装

Form-Generator 需要 Node.js 10+，可以使用 NPM 进行安装：

npm i fms-form-generator

也可以自行下载项目代码进行构建：

git clone https://github.com/JakHuang/form-generator.git

然后安装依赖，使用 YARN

yarn

或 NPM 安装依赖

npm install

在本地运行表单设计器，运行

npm run dev

也可以构建之后进行部署

npm run build

Form-Generator 项目配套有 JSON 解析器，可以把 JSON 转化为真实的表单代码，可以使用 NPM 安装：

npm i form-gen-parser

另外，form-generator 还有配套的 VSCode 插件 Form Generator Plugin，使用 VSCode 的开发者们可以进行安装，帮助完成基本的表单代码搭建任务。

fms-form-generator库

示例

Form-Generator 的主要界面是一个表单设计器：

表单设计器

可以看到，界面的左侧摆放了不同的输入组件，包括单行文本、计数器、下拉选择、日期范围和按钮等，基本满足了一般项目对于表单的所有需求。

表单设计器的组件选择

界面中间是设计得到的表单，点击左侧的组件，便可在表单中添加。同时，表单中还提供了组件的复制和删除功能，可以自由进行编辑。

界面的右侧是组件属性和表单属性，可以对当前选中的组件的各项属性进行修改，如字段名、标题、标签宽度、默认值、尺寸等，进行所需组件的定制；也可以对表单属性进行修改，包括表单模型、校验模型、标签对齐等，实现表单层级的配置。

组件属性编辑

在完成了表单的设计之后，就可以点击界面上部的运行按钮，在这里我们可以选择生成类型，包括页面和弹窗两种，其中弹窗类型会把表单嵌入到对话框组件中。

生成类型

完成类型选择后，我们就能得到生成的 Vue 代码，包括 Vue 模板、JS 和 CSS 代码：

Vue模板代码

JS代码

可以看到，生成的代码可读性高，质量较好，可以直接引入到项目中进行使用。代码生成器也提供了一个美观的编辑器界面，可以直接对生成的代码进行编辑，并在右侧重新渲染修改的表单。

除了直接生成代码外，form-generator 还提供了把表单导出为 JSON 格式的功能，便于进行存储和传输。Form-generator 设计了一种具有特定格式的 JSON 格式用于 Element UI 表单的表示，可以在代码生成器中直接导出 JSON 文件，使用时再利用配套的 form-gen-parser 进行解析，重新生成表单代码。

form-generator的JSON表示

表单的JSON表示以fields列表存储各表单项，各表单项一般包括：

__config__：包括如标签、宽度等配置属性
__slot__：表单项的插槽
__vModel__：绑定的数据模型
style、disabled等原生属性

以此 JSON 文件，便可还原表单，得到生成的 Vue 代码。我们还可以以此为模板，添加变量，只需修改 JSON 数据就进行相似表单的自动化批量生成。

表单的JSON表示

总结

Form-Generator 作为 Element UI 的表单设计和代码生成器，简化了表单的设计和代码编写工作，使得表单的设计工作也能够“所见即所得”，在一些前端设计定制化要求不高的场景下，使用起来十分方便，既使得设计人员能够获得期望的表单设计，也减轻了代码开发人员的在前端设计方面的额外工作，一举两得。

Form-Generator 的实现需要对于 Vue 和 ElementUI 十分熟悉，尤其在表单的 JSON 表示的生成和解析方面的工作，颇具技巧；同时，该项目本身也是一个优秀的前端应用，感兴趣的开发者可以进行代码的阅读学习，参与开源贡献。

在线咨询

上一篇：html常用代码大全
下一篇：前端开发中经常用的图片水平垂直居中CSS

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何设计一个表单引擎？

一、表单

1. 动态表单

2. 动态表单的特点优势

二、表单控件

1. HTML表单种常见的13个控件

2. 动态表单控件

三、表单引擎

1. 工作原理

2. 应用场景

在开篇

盘点HTML表单基础

1. from元素

2. 单选按钮

3. 复选框

4. 提交按钮

HTML表单重要属性

1. Action属性

2. Method属性

HTML表单常用元素

1. 下拉列表

2. 允许多选

写在最后

简介

安装

示例

总结

您的项目需求