通過前面七講的系列教程，我們完成了一個包含后台並自適應PC+h5移動端的文章管理模塊。
在實際的生產環境中，文章投稿、商品上傳等操作並不會簡單局限於一個text和textarea組成的表單。在實際中，我們可能會用到web富文本編輯器（如ueditor、markdown）、圖片上傳、多圖上傳、附件上傳、地圖標注等更加豐富的表單類型。
今天，我們開始《10天學會phpWeChat》的第八講：Form類，豐富表單提交的字段類型。
一、什么是Form類？
Form類是phpWeChat封裝好的一個類，它的方法集成了常見的表單字段類型包括：富文本編輯器、時間日期、多圖上傳、附件上傳、視頻上傳、地圖標注等。
二、怎么使用Form類？
1、由於phpWeChat采用了命名空間的機制，所以每次在視圖模板里需要調用Form類時，請在視圖模板頭部加上
1 <?php use phpWeChat\Form;?>
來聲明下Form所處的命名空間才能使用。
2、由於Form類的具體實現需要借助jQuery類，所以所以每次在視圖模板里需要調用Form類時，請在視圖模板頭部加上以下Js代碼：
1 <script language="javascript" type="text/javascript"> 2 var PW_PATH='{__PW_PATH__}'; 3 </script> 4 <script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script> 5 <script src="{__PW_PATH__}statics/core.js" language="javascript"></script>
3、要給指定表單form加一個ID並最好加上enctype="multipart/form-data"屬性。
4、指定form的提交按鈕不能用submit類型，要更換為button。並增加一個onclick事件,如：
<input type="button" onClick="doSubmit('tougaoform','{U('hello','tougaosave')}')" value="投稿" />
其中，doSubmit('tougaoform','{U('hello','tougaosave')}') 的作用是指定ID為tougaoform的表單的action為{U('hello','tougaosave')}，並提交表單。
三、實例
以上的大道理講完了，接下來，我們還以hello world模塊的文章投稿功能為例，來實際展示今天的話題。
文章投稿的視圖文件為tougao.html，我們按照以上兩點加入指定代碼，如下面代碼所示：
{php use phpWeChat\Form;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> var PW_PATH='{__PW_PATH__}'; </script> <script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script> <script src="{__PW_PATH__}statics/core.js" language="javascript"></script> <title>投稿</title> </head> <body> <form action="{U('hello','tougaosave')}" method="post" name="tougaoform" id="tougaoform" enctype="multipart/form-data"> 標題：<input type="text" name="info[title]" size="36" /> <br /> 內容：<textarea name="info[content]" cols="55" rows="5"></textarea> <br /> 百度編輯器：{Form::baiduEditor('info','content2','請輸入您的內容')} <input type="button" onClick="doSubmit('tougaoform','{U('hello','tougaosave')}')" value="投稿" /> </form> </body> </html>
如同代碼所示，我們在視圖文件的第一行加入了聲明命名空間的
{php use phpWeChat\Form;}
和在<head></head>之間加入了加載jQuery的Js代碼：
<script language="javascript" type="text/javascript">
var PW_PATH='{__PW_PATH__}';
</script>
<script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script>
<script src="{__PW_PATH__}statics/core.js" language="javascript"></script>
同時，我們在body里加入了一個Form的方法調用：
百度編輯器：{Form::baiduEditor('info','content2','請輸入您的內容')}
此時，我們訪問投稿頁面，則出現了如下視圖效果：
如上圖所示，出現了一個富文本編輯器。而這一切，我們只用了一行代碼：{Form::baiduEditor('info','content2','請輸入您的內容')}就搞定了。
為了便於查看效果，我們適當修改下hello world模塊的前端控制器（index.php）的tougaosave分支，讓其打印出表單提交后的變量：
1 <?php 2 //自適應模塊的PC前端控制器 3 use wechat\hello\hello; 4 use phpWeChat\Area; 5 use phpWeChat\CaChe; 6 use phpWeChat\Config; 7 use phpWeChat\Member; 8 use phpWeChat\Module; 9 use phpWeChat\MySql; 10 use phpWeChat\Order; 11 use phpWeChat\Upload; 12 13 !defined('IN_APP') && exit('Access Denied!'); 14 15 switch($action) 16 { 17 case 'index': 18 //從數據表讀取數據並賦給數組$data 19 //$data=Hello::dataList(); 20 echo '這是自適應模塊的PC端前端控制器'; 21 exit(); 22 break; 23 case 'detail': 24 $data=Hello::dataGet($id); //$id 可以改成$_GET['id'] 25 break; 26 case 'tougao': 27 28 break; 29 case 'tougaosave': 30 print_r($info); 31 exit(); 32 /* 33 $op=Hello::dataInsert($info); 34 35 if($op) 36 { 37 echo '文章投稿成功，ID為'.$op; 38 } 39 else 40 { 41 echo '文章投稿失敗'; 42 } 43 exit(); 44 */ 45 break; 46 //以下 case 條件僅為 示例。您可以根據業務邏輯自由修改和拓展 47 48 //case 'index': 49 50 //在此寫 index.php?m=hello&a=index 時的邏輯 51 52 //break; 53 54 //case 'list': 55 56 //在此寫 index.php?m=hello&a=list 時的邏輯 57 58 //break; 59 60 //以此類推... 61 62 //case '...': 63 64 //在此寫 index.php?m=hello&a=... 時的邏輯 65 66 //break; 67 68 default: 69 break; 70 } 71 ?>
點擊提交按鈕，出現如下圖所示的效果：
如上圖所示，我們不僅在前端展示出來了富文本編輯器，而且還在提交后，在服務端接收到了富文本編輯器的值，從而我們就可以進行數據庫更新操作了。
四、Form類方法的調用參數
在上面的示例中，我們通過一個富文本編輯器的調用實例來展示了Form類的作用。以下是它各個參數的說明（文檔參考：http://wiki.phpwechat.com/4）：
Form::方法名('表單數組名稱','字段名稱','默認值')。
五、更多實例參考
1、單圖上傳
視圖模板代碼（tougao.html）：
1 {php use phpWeChat\Form;} 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script language="javascript" type="text/javascript"> 7 var PW_PATH='{__PW_PATH__}'; 8 </script> 9 <script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script> 10 <script src="{__PW_PATH__}statics/core.js" language="javascript"></script> 11 <title>投稿</title> 12 </head> 13 14 <body> 15 <form action="{U('hello','tougaosave')}" method="post" name="tougaoform" id="tougaoform" enctype="multipart/form-data"> 16 標題：<input type="text" name="info[title]" size="36" /> 17 <br /> 18 內容：<textarea name="info[content]" cols="55" rows="5"></textarea> 19 <br /> 20 百度編輯器：{Form::baiduEditor('info','content2','請輸入您的內容')} 21 <br /> 22 單圖上傳：{Form::image('info','pic','')} 23 <input type="button" onClick="doSubmit('tougaoform','{U('hello','tougaosave')}')" value="投稿" /> 24 </form> 25 </body> 26 </html>
效果：
提交后接收變量：
如上圖，我們接收到了單圖上傳的值。
2、多圖上傳
1 {php use phpWeChat\Form;} 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script language="javascript" type="text/javascript"> 7 var PW_PATH='{__PW_PATH__}'; 8 </script> 9 <script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script> 10 <script src="{__PW_PATH__}statics/core.js" language="javascript"></script> 11 <title>投稿</title> 12 </head> 13 14 <body> 15 <form action="{U('hello','tougaosave')}" method="post" name="tougaoform" id="tougaoform" enctype="multipart/form-data"> 16 標題：<input type="text" name="info[title]" size="36" /> 17 <br /> 18 內容：<textarea name="info[content]" cols="55" rows="5"></textarea> 19 <br /> 20 百度編輯器：{Form::baiduEditor('info','content2','請輸入您的內容')} 21 <br /> 22 單圖上傳：{Form::image('info','pic','')} 23 <br /> 24 多圖上傳：{Form::images('info','pics','')} 25 <input type="button" onClick="doSubmit('tougaoform','{U('hello','tougaosave')}')" value="投稿" /> 26 </form> 27 </body> 28 </html>
效果：
小貼士：如同http://wiki.phpwechat.com/4文檔中指明的一樣，由於多圖上傳是一個復雜的過程，提交后需要用 deformat_focus_img() 函數進行處理成可以存儲的字符串。其他字段類型無需處理。
在控制器中，我們加上多圖的轉碼：
1 <?php 2 //自適應模塊的PC前端控制器 3 use wechat\hello\hello; 4 use phpWeChat\Area; 5 use phpWeChat\CaChe; 6 use phpWeChat\Config; 7 use phpWeChat\Member; 8 use phpWeChat\Module; 9 use phpWeChat\MySql; 10 use phpWeChat\Order; 11 use phpWeChat\Upload; 12 13 !defined('IN_APP') && exit('Access Denied!'); 14 15 switch($action) 16 { 17 case 'index': 18 //從數據表讀取數據並賦給數組$data 19 //$data=Hello::dataList(); 20 echo '這是自適應模塊的PC端前端控制器'; 21 exit(); 22 break; 23 case 'detail': 24 $data=Hello::dataGet($id); //$id 可以改成$_GET['id'] 25 break; 26 case 'tougao': 27 28 break; 29 case 'tougaosave': 30 $info['pics']=deformat_focus_img('pics'); //多圖上傳的特殊處理，其他類型不需要 31 32 print_r($info); 33 exit(); 34 /* 35 $op=Hello::dataInsert($info); 36 37 if($op) 38 { 39 echo '文章投稿成功，ID為'.$op; 40 } 41 else 42 { 43 echo '文章投稿失敗'; 44 } 45 exit(); 46 */ 47 break; 48 //以下 case 條件僅為 示例。您可以根據業務邏輯自由修改和拓展 49 50 //case 'index': 51 52 //在此寫 index.php?m=hello&a=index 時的邏輯 53 54 //break; 55 56 //case 'list': 57 58 //在此寫 index.php?m=hello&a=list 時的邏輯 59 60 //break; 61 62 //以此類推... 63 64 //case '...': 65 66 //在此寫 index.php?m=hello&a=... 時的邏輯 67 68 //break; 69 70 default: 71 break; 72 } 73 ?>
接收效果：
如圖所示，我們接收到了多圖上傳的值。
3、日期控件
視圖：
1 {php use phpWeChat\Form;} 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script language="javascript" type="text/javascript"> 7 var PW_PATH='{__PW_PATH__}'; 8 </script> 9 <script src="{__PW_PATH__}statics/jquery/jquery-1.12.2.min.js" language="javascript"></script> 10 <script src="{__PW_PATH__}statics/core.js" language="javascript"></script> 11 <title>投稿</title> 12 </head> 13 14 <body> 15 <form action="{U('hello','tougaosave')}" method="post" name="tougaoform" id="tougaoform" enctype="multipart/form-data"> 16 標題：<input type="text" name="info[title]" size="36" /> 17 <br /> 18 內容：<textarea name="info[content]" cols="55" rows="5"></textarea> 19 <br /> 20 百度編輯器：{Form::baiduEditor('info','content2','請輸入您的內容')} 21 <br /> 22 單圖上傳：{Form::image('info','pic','')} 23 <br /> 24 多圖上傳：{Form::images('info','pics','')} 25 <br /> 26 日期時間：{Form::dateWithTime('info','posttime','')} 27 <input type="button" onClick="doSubmit('tougaoform','{U('hello','tougaosave')}')" value="投稿" /> 28 </form> 29 </body> 30 </html>
接收：
更多示例，請參考http://wiki.phpwechat.com/4，里面涵蓋了9 種拓展的字段類型，基本涵蓋了大部分的業務場景。