表單的本質(zhì)是業(yè)務(wù)，沒(méi)有表單是無(wú)法完成業(yè)務(wù)系統(tǒng)的，而動(dòng)態(tài)表單使業(yè)務(wù)系統(tǒng)更高級(jí)。動(dòng)態(tài)表單是什么呢？它是如何工作的？應(yīng)用場(chǎng)景有哪些？一起來(lái)看一下吧。

一、表單

表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能，是提交數(shù)據(jù)的一切形式。表單的本質(zhì)是提交數(shù)據(jù)，不僅僅包含輸入框、下拉選擇框等這些控件，常見(jiàn)的按鈕空間也屬于一個(gè)表單。

1. 動(dòng)態(tài)表單

動(dòng)態(tài)表單（Dynamic Form），指在前端運(yùn)行過(guò)程中可依賴(lài)某些業(yè)務(wù)邏輯發(fā)生表單項(xiàng)變化的表單，還包括表單布局、表單數(shù)據(jù)管理、表單校驗(yàn)、表單交互、表單項(xiàng)聯(lián)動(dòng)邏輯等原本由前端編程完成的表單開(kāi)發(fā)，轉(zhuǎn)由后端通過(guò) API 接口輸出表單描述自動(dòng)完成上述所有內(nèi)容的表單開(kāi)發(fā)形式。

（動(dòng)態(tài)表單原理示意圖）

2. 動(dòng)態(tài)表單的特點(diǎn)優(yōu)勢(shì)

表單的本質(zhì)是業(yè)務(wù)，而動(dòng)態(tài)表單使業(yè)務(wù)系統(tǒng)更高級(jí)。

普通表單是一個(gè)表單寫(xiě)一份前端的代碼，代碼全部由前端開(kāi)發(fā)者完成（后端配合接口輸出）。而動(dòng)態(tài)表單則是一個(gè)表單對(duì)應(yīng)一個(gè) JSON（由后端輸出），所有表單由一份代碼（動(dòng)態(tài)表單引擎）進(jìn)行加載和渲染。

所以，動(dòng)態(tài)表單具有以下優(yōu)勢(shì)：

• 客戶(hù)端運(yùn)行的代碼量更少；
• 每個(gè)表單的JSON按需加載；
• 表單需求變化時(shí)，無(wú)需前端修改發(fā)版，只需編輯數(shù)據(jù)庫(kù)中的JSON。

二、表單控件

表單控件是提供一組允許用戶(hù)操作的對(duì)象，從而接收用戶(hù)輸入的數(shù)據(jù)，用戶(hù)可操作該對(duì)象來(lái)執(zhí)行對(duì)表單設(shè)計(jì)，修改等操作。

1. HTML表單種常見(jiàn)的13個(gè)控件

input元素?zé)o疑是一個(gè)龐大和復(fù)雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個(gè)傳統(tǒng)表單控件，datalist、progress、meter、output、keygen這五個(gè)新增表單控件。

2. 動(dòng)態(tài)表單控件

動(dòng)態(tài)表單是老廠商天翎核心技術(shù)之一，也是天翎公司核心產(chǎn)品MyApps的重要組成部分。通過(guò)對(duì)于動(dòng)態(tài)表單的應(yīng)用，可以避免在電子流程系統(tǒng)中硬編碼的數(shù)據(jù)采集及處理表單，提高系統(tǒng)的可維護(hù)性。

說(shuō)明：

Form，動(dòng)態(tài)表單實(shí)現(xiàn)的基本入口，描述了DynaForm的最基本屬性，比如名稱(chēng)、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通過(guò)此XML描述兩類(lèi)信息：

1. Form中所具有的Field以及Field的類(lèi)型、名稱(chēng)、長(zhǎng)度、計(jì)算代碼等等，XML；
2. Form的格式，比如排列次序、表格定列化的過(guò)程當(dāng)中，系統(tǒng)自動(dòng)解析XML的內(nèi)容并將其轉(zhuǎn)換為Java Object并由此具備Object的行為特性；位等。Form作為一個(gè)ValueObject存儲(chǔ)在數(shù)據(jù)庫(kù)中。

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

FormField，動(dòng)態(tài)表單的最基本元素，在myApps/OBPM中被聲明為Abstract，具體Object行為依賴(lài)于具體的SubClass實(shí)現(xiàn)；

TextField，單行文本框，繼承FormField；

SelectField，下拉選擇框，繼承FormField；

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

CheckBoxField，復(fù)選框，繼承FormField；

RadioBoxField，單選框，繼承FormField；

Textpart，靜態(tài)文本段，除各種Field以外的靜態(tài)文本部分，繼承FormElement；

ComponentField，自定義組件，繼承FormField；

AttachmentUploadField，附件上傳組件，繼承FormField；

ImageUploadField，圖片上傳組件，繼承FormField；

ViewDialogField，視圖組件，用于實(shí)現(xiàn)主從結(jié)構(gòu)的表單，繼承FormField；

CalctextField，計(jì)算文本組件，用于實(shí)現(xiàn)需要計(jì)算的文本，繼承FormField；

IncludeField，實(shí)現(xiàn)SubForm的包含，繼承FormField；

WordField，Word組件，繼承FormField；

OcrField，為將來(lái)預(yù)留的接口，系統(tǒng)暫未實(shí)現(xiàn)；

三、表單引擎

表單引擎是為快速實(shí)施項(xiàng)目研發(fā)的輕量級(jí)表單設(shè)計(jì)工具。采用表單引擎工具可在不開(kāi)發(fā)和新增加代碼的情況下設(shè)計(jì)出新表單樣式，同比程序開(kāi)發(fā)可省掉程序員差不多70%的開(kāi)發(fā)工作量，并且后期維護(hù)相對(duì)簡(jiǎn)單，管理方便。

1. 工作原理

在了解了表單的基本機(jī)構(gòu)后，進(jìn)一步看看表單引擎是如何工作的。

從客戶(hù)端（Client）輸入數(shù)據(jù)（Document），比如一個(gè)excel文件，表單（Form）結(jié)合excel文件自動(dòng)生成HTML，如下圖：

（表單結(jié)合文檔生成HTML過(guò)程）

（XML解析為表單對(duì)象的過(guò)程）

（表單轉(zhuǎn)為HTML過(guò)程）

（表單生成數(shù)據(jù)庫(kù)）

2. 應(yīng)用場(chǎng)景

天翎Myapps低代碼開(kāi)發(fā)平臺(tái)的表單引擎是基于Web界面上可視化編輯的表單設(shè)計(jì)系統(tǒng)，同時(shí)支持印刷模式和拖拽模式兩種設(shè)計(jì)方式，形象可見(jiàn)，操作方便。印刷模式可以做一些復(fù)雜的表單配置，同時(shí)還支持word表格的導(dǎo)入；拖拽模式：基于Vue的表單設(shè)計(jì)器，采用可視化拖拉拽的模式進(jìn)行表單的設(shè)計(jì)。

（表單前臺(tái)）

（表單后臺(tái)）

本文由 @周志軍Jarod 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。