form 表单标签 · HkCms tp6版使用手册《免授权，永久商用》-02251406

# form 表单标签 ## form 表单标签用于获取在后台创建的留言表单输出到前台，注意该标签不是自动生成表单 > 支持 v2.2.1.20220603 及以上版本 ## 参数参数名称可选值默认值是否必填说明id-item-指定循环里的变量名，例如id='obj'，模板调用如：{$item.action} 变成 {$obj.action}catid--是栏目ID，也可传入变量attr---form标签属性，注意attr里面使用单引号cache-3600秒-缓存时间，默认3600秒## 示例在任意页面调用表单，例如在联系我们调用**在线留言**表单 **第一步**：后台模型管理，新建留言表单，如果安装的是演示数据，那么已经存在留言表单了，创建好后点击字段管理进入，如下图所示 ![](https://img.kancloud.cn/bc/a7/bca7c2b0f46f431feb1b8b6f1e05592a_991x538.png) **第二部：** 绑定到栏目 **第三步**：来到模板页面，在你要调用的页面上调用form表单，catid是栏目ID，参考默认模板`page_contact`页面里面的调用详情看里面的注释 ``` <pre class="calibre16">``` // attr属性里面的字符内容，原样输出到form标签上，下面给了个class，id，以及enctype属性，默认已经有action、method属性了 {hkcms:form catid="34" attr="class='frm-data' id='frm' enctype='multipart/form-data'"} // $item.category.title，获取当前留言表单的栏目信息，$item.category里面是栏目字段 <h3 class="column-title">{$item.category.title}</h3> <div class="form-group"> // 语言包，不需要语言包就直接写中文即可 <label>{:__('Name')}</label> // $item.field 里面就是提交的字段，看上图，获取name 姓名，就是$item.field.name <input class="form-control form-control-name" name="{$item.field.name|default=''}" id="name" placeholder="" type="text" required=""> </div> <div class="form-group"> <label>{:__('Mail')}</label> <input class="form-control form-control-email" name="{$item.field.email|default=''}" id="email" placeholder="" type="email" required=""> </div> <div class="form-group"> <label>{:__('Telephone')}</label> <input class="form-control form-control-subject" name="{$item.field.phone|default=''}" id="subject" placeholder="" required=""> </div> <div class="form-group"> <label>{:__('Content')}</label> <textarea class="form-control form-control-message" name="{$item.field.content|default=''}" id="message" placeholder="" rows="10" required=""></textarea> </div> <div class="form-group"> <label>{:__('Verify code')}</label> <div class="d-flex align-items-center"> {// 输入框，可以自己写个输入框来实现自定义，样式的调整：里面有两个class分别是：form-control(bootstrap class) form-captcha，按这两个class调整即可} <div class="mr-3">{$item.captcha.input}</div> {// 验证码btn，图文验证码时是图片，其他的则是发送按钮} <div class="captcha" style="width: 138px">{$item.captcha.btn}</div> </div> </div> <div class="form-group"> <button class="btn btn-primary blank" type="submit">{:__("Submit")}</button> </div> {/hkcms:form} ``` ``` ## 验证码、表单配置如上面完整示例使用`{$item.captcha.input}`可以获取到验证码，根据后台模型配置，会自动显示响应的输入框提示使用`{$item.captcha.btn}`自动根据后台模型配置，显示按钮或图文 > 确保邮箱验证码有email字段，手机验证码有phone字段若要自定义可自行增加验证码控件。 ![](https://img.kancloud.cn/77/b3/77b315d986e44c57d3213a5e5cd308af_1013x480.png) 邮箱、手机验证码控件生成后并不能实现点击，官方并没有默认集成JS代码，下面提供了演示代码，需要JQ的支持如果你的模板使用JQ以及错误提示框（layer），那么复制下面的代码放到页面底部就可以直接实现验证码发送功能。 ``` <pre class="calibre16">``` <script> // 手机、邮箱验证码发送演示。需要jq、弹出框提示用的是layer $('[data-toggle="captcha_send"]').click(function (e) { var obj = this; if ($(obj).is('.disabled')) { return false; } // 发送类型，手机/邮箱 var type = $(obj).data('type'); var frm = $(obj).parents('form'); // 获取当前form表单 var txt = ''; // 提示信息 var inter = 0; // 定时器 if (type=='email') { txt = frm.find('input[name="row[email]"]').val(); // 获取邮箱，确保里面有email字段 } else if (type=='mobile') { txt = frm.find('input[name="row[phone]"]').val(); // 获取手机号 } $(obj).addClass('disabled').text('发送中...'); // 发送邮件 $.ajax({ type:"post", url:$(obj).data('url'), // 请求地址 data:{type:$(obj).data('type'),obj:txt}, success: function (res) { if (res.code==200) { var seconds = 60; inter = setInterval(function () { seconds--; if (seconds<=0) { clearInterval(inter); $(obj).removeClass('disabled').text('发送验证码'); } else { $(obj).text('重新发送 '+seconds+' s'); } }, 1000) layer.msg('发送成功'); } else { // 发送错误提示错误信息 layer.msg(res.msg); $(obj).removeClass('disabled').text('发送验证码'); } }, error: function (res) { layer.msg('error'); $(obj).removeClass('disabled').text('发送验证码'); } }); }) </script> ``` ``` ## 数据字典下面的字段使用{$item.action} {$[item.field.name](http://item.field.name)}这样来调用，也可以直接使用<?php dump($item);?>输出所有字段到页面上。 ``` <pre class="calibre20">``` "action" => "/index.php/guestbook/index.html?catid=34" // 请求地址 "field" => array:4 [▼ // 字段 "name" => "row[name]" "email" => "row[email]" "phone" => "row[phone]" "content" => "row[content]" ] "captcha" => array:6 [▼ // 验证码信息 "url" => "/index.php/guestbook/captcha.html" "field" => "row[captcha]" "type" => "text" // 验证码类型 "input" => "<input class="form-control form-captcha" name="row[captcha]" placeholder="验证码" type="text">" "btn" => "<img src="/index.php/captcha.html" style="width:100%" alt="captcha" onclick="this.src='/index.php/captcha.html?'+Math.random();" />" "status" => 1 ] "all" => array:4 [▼ // 完整字段信息 "name" => array:25 [▶] "email" => array:25 [▶] "phone" => array:25 [▶] "content" => array:25 [▶] ] "category" => array:25 [▼ // 栏目信息 "id" => 34 "model_id" => 5 "parent_id" => 29 "type" => "link" "app" => "cms" "name" => "msg" "title" => "在线留言" "url" => "/index.php/index/lists.html?catname=msg&lang=zh-cn" "image" => "" "category_tpl" => "" "list_tpl" => "" "show_tpl" => "page_guestbook.html" "seo_title" => "" "seo_keywords" => "" "seo_desc" => "" "ismenu" => 0 "target" => "_self" "user_auth" => 0 "lang" => "zh-cn" "weigh" => 0 "num" => 10 "delete_time" => null "update_time" => "2021-11-20 14:05:00" "create_time" => "2021-11-20 14:03:38" "status" => "normal" ] ``` ```