--表单相关
西安博达软件股份有限公司
一般情况下，一个网站的表单（例如：工作岗位申请表单、活动报名表单、留学申请表单等）需要依靠界面设计师与程序员配合做一个表单及编写代码来处理表单，处理表单数据的代码是枯燥而机械重复的，如果我们需要的表单很多，可想而知，这样的代码将会有多少重复的，并且对表单的维护也不是那么方便，恰恰表单自定义功能就可以为我们很好的解决这个问题。通过表单自定义功能，我们可以很快的生成各种类型的表单，例如：（学位申请，工作岗位申请，活动申请，留学申请，意向调查等等）。
制作一个完整的表单功能，需要完成两部分工作。先在内容管理将网站需要展示的表单生成，再到网站建设制作表单自定义对应的模板及组件。下面以一个报名表单为例，讲解一下功能的使用方法。
表单生成大体需要三个步骤：
（1）表单所需功能项选择。
（2）表单内容添加。
（3）表单控件验证信息配置。
在网站内容管理中打开“表单自定义”功能，点击“表单自定义”节点，打开表单列表，在列表上方点击“增加”按钮出现新增表单页（图2-1）
图2-1
（1）
：表单名称最好使用全英文。
（2）
：填写表单时，是否需要用户登录。
（3）
：填写表单时，是否需要验证码，建议选择需要。
（4）
：提交的表单记录是否需要审核。
（5）
：如果在后台需要维护类似于 
这样的拉下框中的内容时，选择是，默认否。
（6）
：填写需要添加的表单HTML页面，<body></body>标签里的代码，
注意只截取提交、重置按钮和验证码以上部分的代码，提交、重置按钮和验证码这些控件的代码要在组件中添加。（如图 2-2）
图2-2
在添加表单源代码是注意每个控件添加name和title属性，这name是必填属性。
，title属性建议填写，这些属性所表示的意思，详见附录[1][2]。
（7）
这里的插入功能是为表单的控件添加验证信息。例如：为出生年月的<input> 添加日期类型，以便在选择日期时可以出现日期控件，方便用户选择。
点击插入按钮，弹出自定义属性配置窗口，因为只需添加日期类型，所以只勾选控件类型选项，以及选择日期选项。
添加前：
添加后：
点击
按钮，生成如（图2-3）所示的表单。
实施一个表单自定义功能，只需要一个组件：表单自定义组件。这个组件在应用组件的表单自定义分类下（图2-4）。组件的基本使用方法，请参考产品使用相关教程。
图2-4
拖一个表单自定义组件到需要添加表单的模板下，如果所示表单自定义组件会默认选择第一个在后台生成的表单，因为现在后台只有一个表单，所以默认显示这个表单，如果有多个表单，需要在右侧的
处选择要显示的表单。
图2-5
（1）在组件模板中，将验证码、提交和重置按钮的控件的代码按照默认模板给出的格式进行添加，可以在样式表中添加表单对应的CSS样式代码。
图2-6
为该模板配置对应的栏目，为模板配置栏目的方法，请参考产品使用相关教程。配置好对应的栏目后，点击预览该栏目，或者访问对应的栏目页，出现报名表单，填写信息后，提交信息。
图2-7
在网站内容管理的表单自定义节点下，点击左侧对应表单的名字节点，可以浏览该表单在前台所提交的所有表单信息，如（图2-8），也可以点击每条数据对应的
按钮，查看该条数据的详细信息，如（图2-9）。
图2-8
图2-9
点击表单列表页面右上角的
按钮，可以导出改表单下所有提交的信息。
如图，这是一个高校的网站前台比较复杂报名表单的样式。接下来使这个表单为例子介绍，表单自定义其他高级功能的使用。
新增表单的方法重复2.1.1 步骤。
双击打开表单的HTML代码和样式：
表单源代码中的验证信息都是配置好的，如需练习验证可以自行删除，重新添加。
（1）在表单源代码编辑区，可以配置每个表单控件的验证信息以及添加对应的标题、字段，类型。点击
按钮会弹出如图2-7所示的自定义属性配置页面。
图2-7
注意：如果该表单控件内容填写的是手机号码，如图2-8，<input id="mobile" type="text" >标签，并且需要验证手机不能为空以及格式，配置相关属性时每个配置项前的选择框都必须勾选，否则不起作用。
例如：如果想为表单中类型为手机的控件配置类型、不合法时的提示语、是否允许为空、以及该控件内容为空时提示语（注意：首先要把鼠标的光标放在需要添加配置的标签里，然后点击
按钮）。属性配置窗口如图2-7所示，没配置属性前的内容如图2-8所示，配置属性后的内容如2-9所示。
图2-8
图2-9
（2）前台用户提交的表单信息可以在后台内容管理点击表单名称节点，用户提交的表单信息管理如图3-0。
图3-0
注意：每列的头标题是根据表单每个控件的配置的title属性值来显示的，如果title属性没有配置（建议配置），则默认显示控件的name属性值，如图3-0标识所示。每个控件的name属性必须配置。
（1）在没有给表单中的下拉列表添加关联表管理时，默认显示静态页面中的值，如图3-1所示。如果表单需要管理关联表的数据，在添加表单时需要勾选，
在表单的数据列表管理页面会出现
按钮，点击该按钮后进入到关联表管理页面，如图3-2。
图3-1
图3-2
（2）点击
按钮添加新的表关联，如图3-3。
图3-3
图3-3中关联字段下拉列表中的数据是根据表单中<select></select>标签的多少来显示的，如果哪个<select></select>不设置表关联管理，那么这个<select></select>下的数据默认显示的是页面中添加的值，反之，显示添加表关联后添加的数据，如果想在后台管理哪个下拉列表的数据，那么在关联字段处选择该下拉列表对应的name属性值。
例如：如果想管理政治面貌下拉列表中的数据，那么选择对应的关联字段，如图3-3，点击
按钮后，关联表管理界面就会出现添加关联表信息，如图3-4点击
关联表名称，进入到添加关联表数据添加页面，如图3-5所示。添加数据后如图3-6所示。前台页面政治面貌下拉列表的数据就会被替换成后台添加的数据。如图3-7所示。
图3-4
图3-5
图3-6
图3-7
3.4组件内容添加
：组件模板样例代码
选择需要显示的表单。
可以配置提示语的字体的大小、颜色等样式，写的是CSS样式代码。
例如：
color:blue;font-size:18px; 默认样式和添加样式后的对比如下图。
（3）
注意：如果在生成表单时已经配置过每个控件的提示语信息，跳过此步骤。
（4）
如果表单中需要上传文件但不是必须，可以不用配置，如果必须要上传文件，选是。上传的文件格式以英文”,” 逗号隔开，例如：jpg,rar,xlt。
允许上传文件的大小以（字节）为单位，（1024字 = 1KB, 1024kb = 1MB, 1024MB = 1GB, 1024Gb = 1TB）。
例如：20KB = 1024 * 20 = 20480。
文件控件标签代码：<input type="file" orgtype='picture' null='false'>。
注意：如果<input type="file" orgtype='picture' null='false'> 配置了orgtype='picture'，那么上传的文件必须为图片。
3.4表单组件参数介绍
表单参数主要有：表单是否需要登录、用户是否已经登录、表单提交地址、表单内容代码、以及判断表单是否有验证码。
分别对应的参数为：
（1）表单是否需要登录：<#if isNeedLogin><#else></#if>
（2）用户是否已经登录：<#if isLogin><#else></#if>
（4）表单内容代码：${remark}
（5）判断表单是否需要验证码：<#if installcheckcode></#if>
导出到word功能主要是面向简历、个人信息类型的表单，点击
弹出如图3-3-0对话框。
图3-3-0
注意：只能上传.ftl格式的文件。
.ftl格式的文件生成步骤：首先准备一个word文档，（双击打开演示例子）
，文档的内容可以随意。
word文档中每个参数的值以${uname}的形式填写，注意${ }中放置的参数是每个对应表单控件的name属性值，例如<input name="uname" id="uname" type="text" value="" null='false' nullmsg='请填写姓名' title='姓名'>,如果要在word中显示姓名的值，在姓名处放置${uname}，其它信息显示和姓名类似，如图3-3-1所示。
图3-3-1
配置完word中的参数后，将word文件另存为.xml文件，如图3-3-2所示。
图3-3-2
用编辑工具将.xml文件打开。如图3-3-3所示，搜索带有$符号的地方，查看${ }中内容是否为空，如果为空检查原word文件中${ }中是否没有配置参数，如果有请补全或删除后重复上述步骤，或者直接将.xml文件中参数为空的${}删除。因为如果${}中不配置对应的参数，那么导出word文档时会出错。
图3-3-3
将改好的.xml文件重新命名为.ftl格式的文件，如图3-3-4所示。
图3-3-4
将.ftl格式的文件上传，每条表单信息的操作处会出现
按钮，如图3-3-5所示。
图3-3-5
点击按钮，会下载一个word文档，打开文档，如图3-3-6所示，配置了参数的地方就会出现该条表单信息对应的值。
图3-3-6
该用户手册主要从后台表单的生成，表单控件验证信息的配置，配置验证信息时的注意事项，表单自定义组件使用，提交数据的导出等五个方面来介绍了表单自定义功能的使用步骤。
注意：
（1）表单生成时需要注意的是如果需要验证码、表单数据审核、表单关联数据维护时，记得勾选是。
（2）配置表单控件验证信息时，记得要勾选最左侧的选项，每个表单控件的name属性是必须有的。
（3）牢记验证码控件、提交重置按钮不要添加在表单内容代码里，应该添加在组件的组件模板中。
（4）导出到word时记得上传的文件是ftl格式的，生成ftl文件时要检查参数的配置是否对应，是否出现空的参数，${ }中的内容是对应表单控件name属性的值。
附录
? name：必填属性，在每个控件中name属性是对应数据库中的每个字段，所以name属性是必需的。如果一个控件没有name属性值，那么数据库中就不会记录用户在页面中所填写该控件的内容。
? tilte：可选属性，在每个控件中title属性是对应在后台查看表单记录时页面显示的表格标题信息。如果该控件不存在title属性，那么标题默认对应name属性值。如图一所示，姓名控件中因为没有title属性，所以在图3-0中标题则显示为name的属性的值uname，而性别控件因为有了title属性，图3-0性别则会显示title属性的值。因此title属性是可选的。
? null：可选属性，在每个控件中null属性是表示在前台页面中表单验证时，该控件是否可以为空。
? orgtype：可选属性，在每个控件中orgtype属性是表示对前台页面所填写该控件的内容的验证。比如对手机号码，身份证号码的验证。
? nullmsg：可选属性，在每个控件中nullmsg属性是表示当该控件设置了null属性为false后，如果前台页面未填写内容时，控件给出的验证语。
? errormsg：可选属性，在每个控件中errormsg属性是表示当前台页面所填写的内容不合法时控件所给出的验证语。
? null：属性有true和false两个值，如果一个控件没有null属性或者null属性值为true时，则表示在前台页面中表单验证时，该控件的值可以为空。当null属性值为false,则代表此控件在前台页面用户填写表单时必须填写该控件。
[2] 表单源代码属性值介绍
? orgtype：属性的值有int、date、QQ、email、phone、idcard和picture。
? int：代表该控件只能输入整数
? date：代表该控件输入的内容必须符合日期格式
? QQ：代表该控件只能输入QQ账号
? email：代表该控件只能输入邮箱
? phone：代表该控件只能输入手机号码
? idcard：代表该控件只能输入身份证号码
? picture：代表上传的文件只能为图片，该属性值只适用于file控件
宁ICP备05002185-1 Copyright ? 宝盈娱乐app
