一般情況下，一個(gè)網(wǎng)站的表單（例如：工作崗位申請(qǐng)表單、活動(dòng)報(bào)名表單、留學(xué)申請(qǐng)表單等）需要依靠界面設(shè)計(jì)師與程序員配合做一個(gè)表單及編寫(xiě)代碼來(lái)處理表單，處理表單數(shù)據(jù)的代碼是枯燥而機(jī)械重復(fù)的，如果我們需要的表單很多，可想而知，這樣的代碼將會(huì)有多少重復(fù)的，并且對(duì)表單的維護(hù)也不是那么方便，恰恰表單自定義功能就可以為我們很好的解決這個(gè)問(wèn)題。通過(guò)表單自定義功能，我們可以很快的生成各種類(lèi)型的表單，例如：（學(xué)位申請(qǐng)，工作崗位申請(qǐng)，活動(dòng)申請(qǐng)，留學(xué)申請(qǐng)，意向調(diào)查等等）。
制作一個(gè)完整的表單功能，需要完成兩部分工作。先在內(nèi)容管理將網(wǎng)站需要展示的表單生成，再到網(wǎng)站建設(shè)制作表單自定義對(duì)應(yīng)的模板及組件。下面以一個(gè)報(bào)名表單為例，講解一下功能的使用方法。
表單生成大體需要三個(gè)步驟：
（1）表單所需功能項(xiàng)選擇。
（2）表單內(nèi)容添加。
（3）表單控件驗(yàn)證信息配置。
2.1.1 新添表單
在網(wǎng)站內(nèi)容管理中打開(kāi)“表單自定義”功能，點(diǎn)擊“表單自定義”節(jié)點(diǎn)，打開(kāi)表單列表，在列表上方點(diǎn)擊“增加”按鈕出現(xiàn)新增表單頁(yè)（圖2-1）
圖2-1
（1）
：表單名稱(chēng)最好使用全英文。
（2）
：填寫(xiě)表單時(shí)，是否需要用戶(hù)登錄。
（3）
：填寫(xiě)表單時(shí)，是否需要驗(yàn)證碼，建議選擇需要。
（4）
：提交的表單記錄是否需要審核。
（5）
：如果在后臺(tái)需要維護(hù)類(lèi)似于 
這樣的拉下框中的內(nèi)容時(shí)，選擇是，默認(rèn)否。
（6）
：填寫(xiě)需要添加的表單HTML頁(yè)面，<body></body>標(biāo)簽里的代碼，
注意只截取提交、重置按鈕和驗(yàn)證碼以上部分的代碼，提交、重置按鈕和驗(yàn)證碼這些控件的代碼要在組件中添加。（如圖 2-2）
圖2-2
在添加表單源代碼是注意每個(gè)控件添加name和title屬性，這name是必填屬性。
，title屬性建議填寫(xiě)，這些屬性所表示的意思，詳見(jiàn)附錄[1][2]。
（7）
這里的插入功能是為表單的控件添加驗(yàn)證信息。例如：為出生年月的<input> 添加日期類(lèi)型，以便在選擇日期時(shí)可以出現(xiàn)日期控件，方便用戶(hù)選擇。
點(diǎn)擊插入按鈕，彈出自定義屬性配置窗口，因?yàn)橹恍杼砑尤掌陬?lèi)型，所以只勾選控件類(lèi)型選項(xiàng)，以及選擇日期選項(xiàng)。
添加前：
添加后：
點(diǎn)擊
按鈕，生成如（圖2-3）所示的表單。
圖2-3
2.2 組件實(shí)施
實(shí)施一個(gè)表單自定義功能，只需要一個(gè)組件：表單自定義組件。這個(gè)組件在應(yīng)用組件的表單自定義分類(lèi)下（圖2-4）。組件的基本使用方法，請(qǐng)參考產(chǎn)品使用相關(guān)教程。
圖2-4
2.2.1表單自定義組件實(shí)施
拖一個(gè)表單自定義組件到需要添加表單的模板下，如果所示表單自定義組件會(huì)默認(rèn)選擇第一個(gè)在后臺(tái)生成的表單，因?yàn)楝F(xiàn)在后臺(tái)只有一個(gè)表單，所以默認(rèn)顯示這個(gè)表單，如果有多個(gè)表單，需要在右側(cè)的
處選擇要顯示的表單。
圖2-5
（1）在組件模板中，將驗(yàn)證碼、提交和重置按鈕的控件的代碼按照默認(rèn)模板給出的格式進(jìn)行添加，可以在樣式表中添加表單對(duì)應(yīng)的CSS樣式代碼。
圖2-6
為該模板配置對(duì)應(yīng)的欄目，為模板配置欄目的方法，請(qǐng)參考產(chǎn)品使用相關(guān)教程。配置好對(duì)應(yīng)的欄目后，點(diǎn)擊預(yù)覽該欄目，或者訪(fǎng)問(wèn)對(duì)應(yīng)的欄目頁(yè)，出現(xiàn)報(bào)名表單，填寫(xiě)信息后，提交信息。
圖2-7
2.4 表單信息查看
在網(wǎng)站內(nèi)容管理的表單自定義節(jié)點(diǎn)下，點(diǎn)擊左側(cè)對(duì)應(yīng)表單的名字節(jié)點(diǎn)，可以瀏覽該表單在前臺(tái)所提交的所有表單信息，如（圖2-8），也可以點(diǎn)擊每條數(shù)據(jù)對(duì)應(yīng)的
按鈕，查看該條數(shù)據(jù)的詳細(xì)信息，如（圖2-9）。
圖2-8
圖2-9
2.5 表單信息導(dǎo)出
點(diǎn)擊表單列表頁(yè)面右上角的
按鈕，可以導(dǎo)出改表單下所有提交的信息。
三、 表單其他復(fù)雜功能介紹
如圖，這是一個(gè)高校的網(wǎng)站前臺(tái)比較復(fù)雜報(bào)名表單的樣式。接下來(lái)使這個(gè)表單為例子介紹，表單自定義其他高級(jí)功能的使用。
3.1表單內(nèi)容生成
新增表單的方法重復(fù)2.1.1 步驟。
雙擊打開(kāi)表單的HTML代碼和樣式：
表單源代碼中的驗(yàn)證信息都是配置好的，如需練習(xí)驗(yàn)證可以自行刪除，重新添加。
3.2驗(yàn)證信息配置
（1）在表單源代碼編輯區(qū)，可以配置每個(gè)表單控件的驗(yàn)證信息以及添加對(duì)應(yīng)的標(biāo)題、字段，類(lèi)型。點(diǎn)擊
按鈕會(huì)彈出如圖2-7所示的自定義屬性配置頁(yè)面。
圖2-7
注意：如果該表單控件內(nèi)容填寫(xiě)的是手機(jī)號(hào)碼，如圖2-8，<input id="mobile" type="text" >標(biāo)簽，并且需要驗(yàn)證手機(jī)不能為空以及格式，配置相關(guān)屬性時(shí)每個(gè)配置項(xiàng)前的選擇框都必須勾選，否則不起作用。
例如：如果想為表單中類(lèi)型為手機(jī)的控件配置類(lèi)型、不合法時(shí)的提示語(yǔ)、是否允許為空、以及該控件內(nèi)容為空時(shí)提示語(yǔ)（注意：首先要把鼠標(biāo)的光標(biāo)放在需要添加配置的標(biāo)簽里，然后點(diǎn)擊
按鈕）。屬性配置窗口如圖2-7所示，沒(méi)配置屬性前的內(nèi)容如圖2-8所示，配置屬性后的內(nèi)容如2-9所示。
圖2-8
圖2-9
（2）前臺(tái)用戶(hù)提交的表單信息可以在后臺(tái)內(nèi)容管理點(diǎn)擊表單名稱(chēng)節(jié)點(diǎn)，用戶(hù)提交的表單信息管理如圖3-0。
圖3-0
注意：每列的頭標(biāo)題是根據(jù)表單每個(gè)控件的配置的title屬性值來(lái)顯示的，如果title屬性沒(méi)有配置（建議配置），則默認(rèn)顯示控件的name屬性值，如圖3-0標(biāo)識(shí)所示。每個(gè)控件的name屬性必須配置。
（1）在沒(méi)有給表單中的下拉列表添加關(guān)聯(lián)表管理時(shí)，默認(rèn)顯示靜態(tài)頁(yè)面中的值，如圖3-1所示。如果表單需要管理關(guān)聯(lián)表的數(shù)據(jù)，在添加表單時(shí)需要勾選，
在表單的數(shù)據(jù)列表管理頁(yè)面會(huì)出現(xiàn)
按鈕，點(diǎn)擊該按鈕后進(jìn)入到關(guān)聯(lián)表管理頁(yè)面，如圖3-2。
圖3-1
圖3-2
（2）點(diǎn)擊
按鈕添加新的表關(guān)聯(lián)，如圖3-3。
圖3-3
圖3-3中關(guān)聯(lián)字段下拉列表中的數(shù)據(jù)是根據(jù)表單中<select></select>標(biāo)簽的多少來(lái)顯示的，如果哪個(gè)<select></select>不設(shè)置表關(guān)聯(lián)管理，那么這個(gè)<select></select>下的數(shù)據(jù)默認(rèn)顯示的是頁(yè)面中添加的值，反之，顯示添加表關(guān)聯(lián)后添加的數(shù)據(jù)，如果想在后臺(tái)管理哪個(gè)下拉列表的數(shù)據(jù)，那么在關(guān)聯(lián)字段處選擇該下拉列表對(duì)應(yīng)的name屬性值。
例如：如果想管理政治面貌下拉列表中的數(shù)據(jù)，那么選擇對(duì)應(yīng)的關(guān)聯(lián)字段，如圖3-3，點(diǎn)擊
按鈕后，關(guān)聯(lián)表管理界面就會(huì)出現(xiàn)添加關(guān)聯(lián)表信息，如圖3-4點(diǎn)擊
關(guān)聯(lián)表名稱(chēng)，進(jìn)入到添加關(guān)聯(lián)表數(shù)據(jù)添加頁(yè)面，如圖3-5所示。添加數(shù)據(jù)后如圖3-6所示。前臺(tái)頁(yè)面政治面貌下拉列表的數(shù)據(jù)就會(huì)被替換成后臺(tái)添加的數(shù)據(jù)。如圖3-7所示。
圖3-4
圖3-5
圖3-6
圖3-7
3.4組件內(nèi)容添加
：組件模板樣例代碼
：樣式代碼
3.4 表單控件配置介紹
圖4-7
（1）
選擇需要顯示的表單。
（2）
可以配置提示語(yǔ)的字體的大小、顏色等樣式，寫(xiě)的是CSS樣式代碼。
例如：
color:blue;font-size:18px; 默認(rèn)樣式和添加樣式后的對(duì)比如下圖。
（3）
注意：如果在生成表單時(shí)已經(jīng)配置過(guò)每個(gè)控件的提示語(yǔ)信息，跳過(guò)此步驟。
（4）
如果表單中需要上傳文件但不是必須，可以不用配置，如果必須要上傳文件，選是。上傳的文件格式以英文”,” 逗號(hào)隔開(kāi)，例如：jpg,rar,xlt。
允許上傳文件的大小以（字節(jié)）為單位，（1024字 = 1KB, 1024kb = 1MB, 1024MB = 1GB, 1024Gb = 1TB）。
例如：20KB = 1024 * 20 = 20480。
文件控件標(biāo)簽代碼：<input type="file" orgtype='picture' null='false'>。
注意：如果<input type="file" orgtype='picture' null='false'> 配置了orgtype='picture'，那么上傳的文件必須為圖片。
3.4表單組件參數(shù)介紹
表單參數(shù)主要有：表單是否需要登錄、用戶(hù)是否已經(jīng)登錄、表單提交地址、表單內(nèi)容代碼、以及判斷表單是否有驗(yàn)證碼。
分別對(duì)應(yīng)的參數(shù)為：
（1）表單是否需要登錄：<#if isNeedLogin><#else></#if>
（2）用戶(hù)是否已經(jīng)登錄：<#if isLogin><#else></#if>
（3）表單提交地址：${url}
（4）表單內(nèi)容代碼：${remark}
（5）判斷表單是否需要驗(yàn)證碼：<#if installcheckcode></#if>
導(dǎo)出到word功能主要是面向簡(jiǎn)歷、個(gè)人信息類(lèi)型的表單，點(diǎn)擊
彈出如圖3-3-0對(duì)話(huà)框。
圖3-3-0
注意：只能上傳.ftl格式的文件。
3.5.1 word文檔創(chuàng)建
.ftl格式的文件生成步驟：首先準(zhǔn)備一個(gè)word文檔，（雙擊打開(kāi)演示例子）
，文檔的內(nèi)容可以隨意。
3.5.2 word文檔參數(shù)配置
word文檔中每個(gè)參數(shù)的值以${uname}的形式填寫(xiě)，注意${ }中放置的參數(shù)是每個(gè)對(duì)應(yīng)表單控件的name屬性值，例如<input name="uname" id="uname" type="text" value="" null='false' nullmsg='請(qǐng)?zhí)顚?xiě)姓名' title='姓名'>,如果要在word中顯示姓名的值，在姓名處放置${uname}，其它信息顯示和姓名類(lèi)似，如圖3-3-1所示。
圖3-3-1
3.5.3 xml格式文件生成
配置完word中的參數(shù)后，將word文件另存為.xml文件，如圖3-3-2所示。
圖3-3-2
3.5.4 xml文件參數(shù)檢查
用編輯工具將.xml文件打開(kāi)。如圖3-3-3所示，搜索帶有$符號(hào)的地方，查看${ }中內(nèi)容是否為空，如果為空檢查原word文件中${ }中是否沒(méi)有配置參數(shù)，如果有請(qǐng)補(bǔ)全或刪除后重復(fù)上述步驟，或者直接將.xml文件中參數(shù)為空的${}刪除。因?yàn)槿绻?/span>${}中不配置對(duì)應(yīng)的參數(shù)，那么導(dǎo)出word文檔時(shí)會(huì)出錯(cuò)。
圖3-3-3
3.5.5 ftl文件生成
將改好的.xml文件重新命名為.ftl格式的文件，如圖3-3-4所示。
圖3-3-4
3.5.6 ftl文件上傳
將.ftl格式的文件上傳，每條表單信息的操作處會(huì)出現(xiàn)
按鈕，如圖3-3-5所示。
圖3-3-5
3.5.7 導(dǎo)出到Word文檔
點(diǎn)擊按鈕，會(huì)下載一個(gè)word文檔，打開(kāi)文檔，如圖3-3-6所示，配置了參數(shù)的地方就會(huì)出現(xiàn)該條表單信息對(duì)應(yīng)的值。
圖3-3-6
該用戶(hù)手冊(cè)主要從后臺(tái)表單的生成，表單控件驗(yàn)證信息的配置，配置驗(yàn)證信息時(shí)的注意事項(xiàng)，表單自定義組件使用，提交數(shù)據(jù)的導(dǎo)出等五個(gè)方面來(lái)介紹了表單自定義功能的使用步驟。
注意：
（1）表單生成時(shí)需要注意的是如果需要驗(yàn)證碼、表單數(shù)據(jù)審核、表單關(guān)聯(lián)數(shù)據(jù)維護(hù)時(shí)，記得勾選是。
（2）配置表單控件驗(yàn)證信息時(shí)，記得要勾選最左側(cè)的選項(xiàng)，每個(gè)表單控件的name屬性是必須有的。
（3）牢記驗(yàn)證碼控件、提交重置按鈕不要添加在表單內(nèi)容代碼里，應(yīng)該添加在組件的組件模板中。
（4）導(dǎo)出到word時(shí)記得上傳的文件是ftl格式的，生成ftl文件時(shí)要檢查參數(shù)的配置是否對(duì)應(yīng)，是否出現(xiàn)空的參數(shù)，${ }中的內(nèi)容是對(duì)應(yīng)表單控件name屬性的值。
附錄
[1] 表單源代碼屬性介紹
? name：必填屬性，在每個(gè)控件中name屬性是對(duì)應(yīng)數(shù)據(jù)庫(kù)中的每個(gè)字段，所以name屬性是必需的。如果一個(gè)控件沒(méi)有name屬性值，那么數(shù)據(jù)庫(kù)中就不會(huì)記錄用戶(hù)在頁(yè)面中所填寫(xiě)該控件的內(nèi)容。
? tilte：可選屬性，在每個(gè)控件中title屬性是對(duì)應(yīng)在后臺(tái)查看表單記錄時(shí)頁(yè)面顯示的表格標(biāo)題信息。如果該控件不存在title屬性，那么標(biāo)題默認(rèn)對(duì)應(yīng)name屬性值。如圖一所示，姓名控件中因?yàn)闆](méi)有title屬性，所以在圖3-0中標(biāo)題則顯示為name的屬性的值uname，而性別控件因?yàn)橛辛?/span>title屬性，圖3-0性別則會(huì)顯示title屬性的值。因此title屬性是可選的。
? null：可選屬性，在每個(gè)控件中null屬性是表示在前臺(tái)頁(yè)面中表單驗(yàn)證時(shí)，該控件是否可以為空。
? orgtype：可選屬性，在每個(gè)控件中orgtype屬性是表示對(duì)前臺(tái)頁(yè)面所填寫(xiě)該控件的內(nèi)容的驗(yàn)證。比如對(duì)手機(jī)號(hào)碼，身份證號(hào)碼的驗(yàn)證。
? nullmsg：可選屬性，在每個(gè)控件中nullmsg屬性是表示當(dāng)該控件設(shè)置了null屬性為false后，如果前臺(tái)頁(yè)面未填寫(xiě)內(nèi)容時(shí)，控件給出的驗(yàn)證語(yǔ)。
? errormsg：可選屬性，在每個(gè)控件中errormsg屬性是表示當(dāng)前臺(tái)頁(yè)面所填寫(xiě)的內(nèi)容不合法時(shí)控件所給出的驗(yàn)證語(yǔ)。
? null：屬性有true和false兩個(gè)值，如果一個(gè)控件沒(méi)有null屬性或者null屬性值為true時(shí)，則表示在前臺(tái)頁(yè)面中表單驗(yàn)證時(shí)，該控件的值可以為空。當(dāng)null屬性值為false,則代表此控件在前臺(tái)頁(yè)面用戶(hù)填寫(xiě)表單時(shí)必須填寫(xiě)該控件。
[2] 表單源代碼屬性值介紹
? orgtype：屬性的值有int、date、QQ、email、phone、idcard和picture。
? int：代表該控件只能輸入整數(shù)
? date：代表該控件輸入的內(nèi)容必須符合日期格式
? QQ：代表該控件只能輸入QQ賬號(hào)
? email：代表該控件只能輸入郵箱
? phone：代表該控件只能輸入手機(jī)號(hào)碼
? idcard：代表該控件只能輸入身份證號(hào)碼
? picture：代表上傳的文件只能為圖片，該屬性值只適用于file控件
English 