php实现表单生成器,JavaScript表单生成器

在本文中，您将学习用于创建和管理Forms的JavaScript对象FormGen。

介绍

本文是关于FormGen用于创建和管理表单[1]的JavaScript对象()；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) {

alert("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]).{6\x2C12};

...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{1\x2C3}(\.\d{1\x2c2})?$;...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;

1234567891011

提交表格时

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

提交取决于参数URL和function伪类型Form：

仅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) {alert("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

这是处理请求的PHP脚本：<?PHP

$type = $_REQUEST["Type"];if ($type == "Type") {

echo "|=Buttons,B=Button,R=Radio button,RV=Vertical Radio button,"

."|=Lists,CMB=Combo box,L=List,"

."|=Texts,C=Comment,F=File,H=Hidden field,N=Numeric,NS=Numeric signed,"

."NF=Numeric with decimals,P=Password,T=Text,U=Unmodifiable text,"

."|=Others,CKB=Check box,S=Slider";}if ($type == "Hellas") {echo "Alfa,Beta,Gamma,Delta";}if ($type == "Towns") {echo "London,Paris,Rome,Turin,Zurich";}if ($type == "Defaults") {echo "Town=Turin,Hellas=Alfa,WidgetType=F";}?>12345678910111213

此外，伪类型GET得到了增强，增加了一个超时参数，以允许定期更新注释，文本和新控件类型Image：Form,frm,,echo.php,receiveData;C,Time,Clock;T,wField,IT Cite,200;Image,Image,,200;GET,Time,getSample.php?Type=Time,60000;GET,wField,getITCite.php,10000;Get,Image,getImage.php,11000;1234567

注意

^这是一些可在我的网站中找到的表单生成器(用于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;}``