如何设计一个表单引擎?

本文详细介绍了动态表单的概念、特点优势,包括减少客户端代码量、按需加载表单JSON,以及后端通过API输出表单描述。讨论了HTML表单控件和动态表单控件,如TextField、SelectField等。最后,阐述了表单引擎的工作原理,通过XML解析生成HTML,并在低代码开发平台中的应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、表单

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

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描述两类信息:

  1. Form中所具有的Field以及Field的类型、名称、长度、计算代码等等,XML;

  1. 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的表单设计器,采用可视化拖拉拽的模式进行表单的设计。

(表单前台)

产品简介 OQSS是智能的web表单引擎,专业的问卷调研调查软件,后台程序运行于web服务器,前台使用浏览器进行操作,同时也是在线的web表单开发引擎,是第一款国产开放式的问卷调查系统及表单引擎。使用OQSS:你可以用来制作、发布、分析在线调查表,制作信息搜集表单设计web程序,进行网络考试,在高节奏的互联网上工作,每个企业都需要一套OQSS。 OQSS已经有5年历史,逐渐发展成熟,拥有一批客户,如中国搜索、普思电子、厦门大学、温州大学、厦新电子、TCL集团、优快云、读者杂志社、女友杂志社、中国电信、中国移动、中国汽车网、珠海视听网、赛迪顾问、深圳公安局、税务局、红塔集团...,在这些客户的支持下,OQSS团队不断进取、不断创新,坚持在软件结构、人性化、安全性方面进行提升,使OQSS更好用、更易用,功能更强大。 OQSS的适用范围 市场调查 客户反馈 科研调研 数据收集 网站调查 表单开发 心理调查 考试试卷 web表单 ..... OQSS详细功能:请点击这里 OQSS的内核是一套表单开发引擎 OQSS的问卷模型 单行填充题(单行输入控件) 多行填充题(多行输入控件) 单选+输入(redio点选控件) 多选+输入(checkbox多选控件,可控选择数) 矩阵题(矩阵单行输入控件) 对选项进行分值设定(根据分值计算结果) 集成输入验证(常见表单验证) 多级下拉联动 多选互斥 选项控制题呈现 图形化选项 为题目选项设定分值,以实现问卷记分 URL参数传递 程序精细控制 防IP重复提交,可设置重复提交时间间隔 可设定问卷结束日期 可设定提交后的显示页,可设置为问卷评分结果,可设置提交后显示问卷报表 问卷密码前置,可设置问卷密码,打开问卷前需要输入密码,保护你的问卷 即时开关问卷,即时开关问卷,使问开启或者关闭 即时开关数据,即时开关结果数据,未开启数据前匿名不用不可查看 集成问卷邮件群发 长期跟踪同一样本 在线样本组管理 问卷邮件在线群发 可从断点群发 直接在收到的Email中回答问卷 在线统计分析 显示一张答卷所有内容 一页中显示多个答卷 频率频数分析 柱形图、饼形图 任意设定过虑条件分析 数据可导出为Excel文件 OQSS架构 B/S结构,.Net+AJAX+DB 内核:表单开发引擎
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值