在本文中，您将学习用于创建和管理Forms的j对象FormGen。
JavaScript表单生成器
介绍
本文是关于FormGen用于创建和管理表单[1]的j对象（）；FormGen从创建简单的消息框到具有文本字段，组合框，单选按钮等的相对复杂的窗体，[2]足够通用化以创建各种窗体。此外，它只是包装的非正式且非详尽的介绍。

使用程序
表单生成器位于formgen.js脚本中，该脚本包含对象函数formGen；可以调用此函数或将其用于创建新对象：

formGen(idContainer[,control_list])fGenObject = new formGen(idContainer[,control_list])12

idContainer用于托管生成的表单的HTML标签的ID在哪里，是control_list用于管理表单的控件列表以及可能的其他信息（伪控件）；如果省略此参数，则formGen假定列表位于标签容器中。

每一个控制描述的特征在于属性列表逗号分隔：Type，场Name，场Label，Length和Extra：

Type 是控件类型，与情况无关。
Name是控件名称，大小写有意义（通常成为控件的name和id）。
Label 是控件的标签。
Length 是控件的长度。
Extra 是用于向控件添加信息的附加字段（取决于类型）。
每个描述都用分号分隔。

在这些控件中，有不同类型的文本控件，列表，按钮，滑块，单选按钮和复选框。该列表还可以包含一些伪控件（语义稍有不同）：

Form告诉如何提交时管理的形式，它的语法是：Form，name，caption，uri，function，
Defaults 用于在控件上插入值；
Control 在提交表格之前对字段进行一些检查；
Below并After从默认位置移动的按钮，在该形式的底部，低于或后（右）的控制的;
Get 用于获取数据，对于填充表单或更新列表很有用。
formGen插入件3个标准按钮按钮：Ok，Reset和Cancel，根据在形式的控件，例如，如果仅存在一个组合或单选按钮组，没有按钮是礼物因为关于项目的选择退出形式的尝试：

Form,frm,,echo.php;CMB,Unit,Measure Unit,,,|=Linear,mm=millimeter,cm=centimeter,m=meter,km=kilometer,|=Weight,g=gram,kg=kilogram,t=ton;123

但是，我们可以把自定义按钮或更改标题或使用图形按钮取代了标准按钮（其名称分别为fg_Ok，

fg_Cancel和fg_Reset）（试）。...function infoPSW(frm) {
	aleet("Password from 6 to 12 characters.nand at least one number and 
           one capital letter and one letter")}formGen('fg');...P,psw,Password,15,Insert password;B,Info,?,25,infoPSW;B,fg_Cancel,✘,30,,Cancel form;B,fg_Reset,↶,30,,Reset form;B,fg_Ok,✎,30,,Go!;After,psw,Info;Control,psw,required,pattern=(?x3D.*d)(?x3D.*[A-Z])(?x3D.*[a-z]).{6x2C12};

...123456789101112131415161718

请注意，按钮标题使用了Unicode字符，例如＆＃x270E（?）。

表格介绍
数据按照它们出现在参数列表中，除了出现在一起的自定义按钮的顺序呈现标准按钮由插入FormGen在所述形式的底部; 因此，可以在控件（通过Below和After伪控件）的右侧或下方插入自定义按钮和复选框。

使用CSS样式，我们可以控制演示文稿，因为表单是使用table具有类名的标签显示的fg_Table，按钮具有类名的fg_Button或fg_Gbutton。td每行的第一个标签具有类名fg_Label。

数据控制
伪控件Control或Check允许对数据执行某些控件：

或多或少的价值
正式正确的邮件地址
非空字段
匹配正则表达式
这些控件在以下情况下发生：

控制失去重点
用户输入一个数字字段
表格已提交
在下面的示例中，在输入中，失去焦点时以及提交表单时尝试检查数字浮点字段

...NF,Number,,12,Insert Floating number;Control,Number,min=-200,max=200,pattern=^[-+]?d{1x2C3}(.d{1x2c2})?$;...1234

处理控件和事件
我们可以使用控件的ID（即控件的ID）输入事件的管理name。另外，在按钮的额外字段中，我们可以设置一个函数，当单击表单本身的参数时将调用该函数（请参见下面的片段）（try）。

...Fgen = new formGen("fg")$("Agree").addEventListener("click",function() {$('Start').disabled = !this.checked;},true);$('Start').disabled = true;...GB,Info,images/info.png,,infoPSW,Info;CKB,Agree,Consent cookies?,,I agree;B,Start;

提交表格时
按照伪类型Check（如果存在）中的指示检查数据，如果出现错误，则不提交表单，并且错误的字段以红色边框显示；它还会生成警报。

仅URL：响应替换源页面（https://www.xiaoyuani.com/）
URLand function：function通过内置的Ajax模块从URL
only function：function以参数形式调用，显然它需要局部详细说明
在新页面中提交
在上面要显示在新页面中的情况1）中，我们在附加字段中插入了一个自定义按钮，该按钮包含将处理提交的函数的名称：

...Fgen = new formGen("result")...function myHandler(frm) { // the function receive the form var aErrors = Fgen.check(frm); if (aErrors.length > 0) {aleet("Errors:n"+aErrors.join("n"));return;} frm.encoding = "multipart/form-data"; // if there is a file to upload frm.target = "_blank"; // in new window frm.submit();}...Form,frm,Complete Control form,x.php;B,Start,,,myHandler;...1234567891011121314

请注意，用户必须对字段进行任何检查，并且如果存在文件上载，则必须设置属性编码。

进阶使用
伪类型Get可用于通过内部Ajax函数从INTERNET检索数据，以填充（或更改）组合框或列表中的值，或使用默认值（例如，来自数据库的数据）填充表单。

Get需要一个URI，即Internet站点上的脚本，该脚本提供的数据必须具有CMB或L的额外字段中期望的语法，或者在默认情况下为伪类型DEFAULTS的期望结构（请参见下面的示例）：

Form,frmg2,Form Generator 2,echo.php;CMB,WidgetType,Widget Type;CMB,Hellas,Greek letters;List,Town;B,fg_Ok,?,40;B,fg_Cancel,?,40,,Cancel Form;B,fg_Reset,?,40,,Reset Form;Get,*,getSample.php?Type=Defaults;Get,WidgetType,getSample.php?Type=Type;Get,Town,getSample.php?Type=Towns;Get,Hellas,getSample.php?Type=Hellas;1234567891011

此外，伪类型GET得到了增强，增加了一个超时参数，以允许定期更新注释，文本和新控件类型Image：

注意
^这是一些可在我的网站中找到的表单生成器（用于Autoit，Powershell，Basic4Android）之一。
^某些功能需要HTML5（输入类型为数据）。
^有一些简单的样式：

.fg_Button {font-size:10pt;width:70px;height:22px;cursor:pointer;margin:0px 3px; background:silver;line-height: 1.25;} fg_GButton {border:0;cursor:pointer;vertical-align:middle;padding:5px;} table {border: 1px solid #111;padding:3px} th {font: bold 9pt Arial;text-align: center;padding:5px; vertical-align:top;background-color:#eee;}