表單模型主要有兩個作用：
第一個作用：建立前端所需要的資料，比如banner之類的。
第二個作用：就是前端表單提交，比如調查問卷之類的。

一、第一個作用

首先介紹第一種，就以banner圖舉例。

1、建立banner表單模型

1、建立模型會自動建立一個id自增主鍵欄位
2、內容排序預設是id降序，即id DESC，也可以使用自己建立的欄位排序
這樣就建立一個表單模型了

接下來給模型新增欄位

2、點選欄位管理=》新增欄位

banner一般有標題、圖片、url、排序四個欄位，所以我們依次建立
1）建立標題欄位，標題一般單行文字框即可，如果需要在後臺列表顯示該欄位，則“後臺列表顯示”選項選“是”

2）建立圖片欄位，選擇單圖片上傳

3）建立url欄位，url欄位一般文字框即可，填寫的時候如果是站外地址，一般建議帶上http/https協議。

4）建立排序欄位，排序一般選整數（int），這樣排序才會更快

這樣模型就建立好了，如下圖

3、新增資料

1）點選左側的“首頁banner”即可新增內容


2）上傳圖片可以對圖片進行剪裁，任何比例，任何大小都可以剪裁
注意：php必須開啟php_fileinfo.dll擴充套件，否則會無法上傳

順序受排序欄位影響

4、前端使用

在模板中多種使用方法
第一種：
getAll()方法可以傳引數，與phalcon中的find()方法引數一致

{% for banner in model.getModel('FormData').setTableName('banner').getAll() %}
 <
 
a href="{{ banner.url }}">{{ banner.title }}</a><br/>
{% endfor %}

第二種：
這是新加的方法，getAllByTableName()有兩個引數，第一個引數是form表單的表名，第二個引數可選，與phalcon中的find()方法引數一致

{% for banner in model.getModel('FormData').getAllByTableName('banner') %}
 <a href="{{ banner.url }}">{{ banner.title }}</a>
 
<br/>
{% endfor %}

二、第二個作用

允許使用者提交表單資料，例如我們建立一個收集簡歷的表單

1、建立一個簡歷表單

2、給模型新增欄位

1）建立一個姓名欄位，單行文字即可，根據情況選擇是否必填

2）建立一個性別字段，單選

3）建立一個出生年月欄位，選擇單行文字的datetime即可
根據需要注意欄位的配置

4）建立一個學歷欄位，下拉選單即可

5）新增一個愛好欄位，一般是多選框

6）建立一個頭像欄位，選擇單圖片上傳即可
注意：必須開啟系統設定中上傳功能，否則不能上傳檔案

7）建立一個工作經驗欄位，選擇編輯器即可
需要注意的是，編輯器中如果有上傳功能，需要在後臺開啟上傳功能，否則不能上傳圖片、視訊、檔案等

8）由於在建立表單的時候我們指定前臺列表條件為status=1，所以我們還需要建立一個稽核欄位，單選即可

這些就是我們剛才建立的欄位

資料可以後臺新增，也可以前臺新增，後天新增只需要點選左側的表單名稱即可新增，如下圖


下面介紹怎麼在前臺新增和展示

3、前臺新增資料

前臺新增資料可以在任意模板中。
只需要將以下關鍵資訊加入表單中即可
1）表單form標籤中加入action="form/edit" method="post"
2）增加一個隱藏域<input type="hidden" name="no" value="d21ee9e2f565256a4d3be97ad0b7df78">，欄位名稱為no，這個值就是我們剛才建立表單的編號

3）由於建立表單的時候勾選了使用圖片驗證碼，所以還需要新增一個驗證碼文字框，欄位名稱為verify_code，驗證碼地址為form/verify，如果使用volt模板，地址建議使用{{ url('form/verify') }}

<input type="text" name="verify_code">
<img alt="" src="form/verify" onclick="this.src=this.src+'/'+Math.random();">

4）普通圖片上傳
上傳地址：ueditor/index/action/uploadimage/origin/4
上傳域名稱：upfile，即<input type="file" name="upfile">

還支援以下引數，如果使用以下引數，需開啟Imagick或Gd擴充套件：

• 是否新增水印：watermark_switch，1：新增，0：不新增
• 水印位置：watermark_place，0：隨機，1：左上，2：中上，3：右上，4：左中，5：正中，6：右中，7：左下，8：中下，9右下
• 是否生成縮圖：thumbnail_switch，1：生成，0：不生成
• 生成縮圖的方式：thumbnail_cutout，1：剪裁，2：按比例
• 寬：thumbnail_maxwidth，此值受縮圖方式影響，當為按比例時，60代表60%
• 高：thumbnail_maxheight，此值同上

5）base64編碼圖片上傳
上傳地址：ueditor/index/action/uploadscrawl/origin/4
上傳域名稱：upfile，即<input type="file" name="upfile">
還支援以下引數：

• 指定生成的檔名：fileName，如果不傳則隨機生成一個png檔名

6）上傳視訊
上傳地址：ueditor/index/action/uploadvideo/origin/4
上傳域名稱：upfile，即<input type="file" name="upfile">

7）上傳檔案
上傳地址：ueditor/index/action/uploadfile/origin/4
上傳域名稱：upfile，即<input type="file" name="upfile">

8）如果使用百度的百富編輯器，可以直接在模板中使用以下程式碼進行呼叫：

<!-- 配置檔案 -->
<script src="{{ static_url('js/ueditor.config.js') }}" type="text/javascript"></script>
<script src="/plugins/ueditor/ueditor.all.js" type="text/javascript"></script>
<!-- 語言包 -->
<script src="/plugins/ueditor/lang{% if constant('LANGUAGE') == 'zh' %}/zh-cn/zh-cn.js{% else %}/en/en.js{% endif %}" type="text/javascript"></script>
<!-- 此項就是欄位名，後臺建立工作經驗時指定的欄位名是`experience` -->
<script name="experience" id="experience" type="text/plain" style="width:100%; height:400px;"></script>
<!-- 注意UE.getEditor("experience"這個值 -->
<script type="text/javascript">UE.getEditor("experience", {"serverUrl":"{{ url('ueditor/index/origin/4') }}"});</script>

ueditor.config.js配置檔案中的伺服器統一請求介面路徑填寫/home/ueditor/index/

如果你的百富編輯器還需要允許上傳視訊等，還需要在js配置檔案中的xss過濾白名單whitList增加

video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play', 'autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

當然，伺服器端已做了過濾處理，提交的任何資料都經過了處理，最大程度的預防xss攻擊

9）使用者提交資料後，會根據建立表單模型時選擇的前臺提交返回選項來返回

當選擇JS訊息框時，只需要在模板中加入這段js即可，訊息會通過flash.output()或flashSession.output()返回。
在volt模板中，可以把alert改成你需要的提示樣式

<script>
var msg1 = '{{ flash.output() }}';
var msg2 = '{{ flashSession.output() }}';
if(msg1){
	alert(msg1);
}else if(msg2){
	alert(msg2);
}
</script>

在smarty模板中

<script>
var msg1 = '{$di.flash.output()}';
var msg2 = '{$di.flashSession.output()}';
if(msg1){
	alert(msg1);
}else if(msg2){
	alert(msg2);
}
</script>

4、後臺資料展示及修改

前臺提交資料後

可以看到狀態都是待稽核的，由於我們規定了只有當status=1時資料才允許在前臺展示，所以需要點選檢視，然後修改狀態
現在就稽核通過了，前端就可以獲取資料了

5、前端資料的展示

前端表單預設的展示模板是form/index，當然也可以指定模板
假設我們用的是form/index模板，只需要建立主題/form/index.volt模板
訪問地址是form/index/no/d21ee9e2f565256a4d3be97ad0b7df78，最後一個就是我們需要訪問的表單的表單編碼
在模板中可以使用的變數有:
導航：nav
頭資訊：common
表單資訊：form，例如表單名稱：{{ form.name }}
欄位資訊：formFieldList，建立的所有欄位
表單資料資訊：list，通過迴圈輸出裡面的資料
分頁資訊：paginator

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>{{ common['title'] }}</title>
<meta name="keywords" content="{{ common['keywords'] }}">
<meta name="description" content="{{ common['description'] }}">
<style></style>
</head>
<body>
表單名：{{ form.name }}
<hr>
<table>
<th><td>姓名</td><td>性別</td><td>出生年月</td></th>
</table>
{% for data in list %}
<tr><td>{{ data.name }}</td><td>{% if data.sex==1 %}男{% else %}女{% endif %}</td><td>{{ data.date }}</td></tr>
{% endfor %}
<hr>
{{ paginator.show() }}

</body>
</html>