表单制作

导语：给客户套模板，我们总不免涉及到各种各样的表单提交，快速制作表单是套站中必备技能之一了~~~囧

接下来我们将讲述利用PHPOK如何快速制作表单

第一步，准备模块（如已建好，可略过此步骤）

创建模块（模块名定为：留言本）用于存储一些扩展字段，如下图

填写模块名称，方便管理，如下图

创建好模块后，默认是未启用的，请点击那个红色圆标，变为绿色表示启用，如下图

操作完后，还可能还需要创建一些扩展字段，如姓名，联系方式，留言内容等

请点击右边带钥匙的图标（如上图），进去创建相应的字段（如下图）

创建好字段后，效果如下：

在创建字段时，有一个注意事项。即每个创建的字段都要启用【前端处理】，不然前台是调不到的，如下图

第二步，准备项目，并绑定相应的模块（如已建好，可略过此步骤）

第三步，创建表单的数据调用

进入数据调用中心，创建数据调用，如下图

选择项目ID：在线留言

填写调用标识串：message

选择调用类型：字段及表单

格式化：启用

如下图：

第四步，在前台任意页面调用上述步骤创建的信息（注意噢，是任意模板页上都可以的）

<script type="text/javascript">$(document).ready(function(){    $("#submit_message").submit(function(){        //提交表单        //这里填写客户端验证        if(!$('#title').val()){            alert("留言主题不能为空");            return false;        }        //客户端验证结束，开始执行提交        $(this).ajaxSubmit({            'url':api_url('post','save','id=book'),            'type':'post',            'dataType':'json',            'success':function(rs){                if(rs.status == 'ok'){                    alert('您的留言信息已发布，请耐心等候管理员审核，感谢您的提交');                    $.phpok.reload();                }else{                    alert(rs.content);                    //更新验证码                    $("#update_vcode").phpok_vcode();                    //清空现有验证码                    $("#_chkcode").val('');                    return false;                }            }        });        return false;    });});</script><form method="post" id="submit_message"><!— php:$list = phpok('message','in_title=1') —><table width="100%"><!— loop from=$list key=$key value=$value —><tr>    <td width="150px" align="right">{$value.title}：</td>    <td class="td">{$value.html}</td></tr><!— /loop —><!— if $sys.is_vcode && function_exists("imagecreate") —><tr>    <td align="right">验证码：</td>    <td class="td">        <table cellpadding="0" cellspacing="0" width="180px">        <tr>            <td><input type="text" name="_chkcode" id="_chkcode" class="vcode" /></td>            <td align="right"><img src="" border="0" align="absmiddle" id="update_vcode" class="hand"></td>        </tr>        </table>        <script type="text/javascript">        $(document).ready(function(){            $("#update_vcode").phpok_vcode();            //更新点击时操作            $("#update_vcode").click(function(){                $(this).phpok_vcode();            });        });        </script>    </td></tr><!— /if —><tr>    <td>&nbsp;</td>    <td><input type="submit" value=" 提交 " class="submit" /></td></tr></table></form>

针对上述代码，我们可以来分析下：

行数	说明
01-32行	数据提交，其中第12行表示提交的地址，id=book，表示提交到项目标识为book这里来
33行	表单开始，<form 指定一个ID，方便在Ajax中绑定事件，这里用的是submit_message
34行	获取数据调用中心自定义的表单内容，其中in_title参数表示包括标题头
36-41行	循环输出表单信息
42-63行	是否启用验证码功能，使用验证码需要同时开启config_www.php里的验证码
66行	提交按钮
69行	</form>表单结束
重点提示
本次示例使用Ajax提交，使用到了jquery的扩展库ajaxSubmit，要求您的JS库中需要包含！一般不用担心，PHPOK使用{url ctrl=js /}就表示已经内置了。