## form 表单标签 用于获取在后台创建的留言表单输出到前台，注意该标签不是自动生成表单 <blockquote class="danger"><p>支持 v2.2.1.20220603 及以上版本 </p></blockquote> ## 参数 | 参数名称 | 可选值 | 默认值 | 是否必填 | 说明 | | --- | --- | --- | --- | --- | | id | - | item | - | 指定循环里的变量名，例如id='obj'，模板调用如：{$item.action} 变成 {$obj.action} | | catid | - | - | 是 | 栏目ID，也可传入变量 | | attr | - | - | - | form标签属性，注意attr里面使用单引号 | | cache | - | 3600秒 | - | 缓存时间，默认3600秒 | ## 示例 在任意页面调用表单，例如在联系我们调用**在线留言**表单 **第一步**：后台模型管理，新建留言表单，如果安装的是演示数据，那么已经存在留言表单了，创建好后点击字段管理进入，如下图所示  **第二部：** 绑定到栏目 **第三步**：来到模板页面，在你要调用的页面上调用form表单，catid是栏目ID，参考默认模板`page_contact`页面里面的调用 详情看里面的注释 ~~~ // 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} ~~~ <br> ## 提示信息多语言化 字段如下图所示  当你的字段标题是中文的情况下，例如你有中英双语，在中文预览下你无需操作，在英文下你需要配置英文预览下显示的文字信息，步骤如下 1. 在后台右上角进入主题管理如下图配置  配置完成后即可实现不同语言下提示不同的信息内容 ## 验证码、表单配置 如上面完整示例 使用`{$item.captcha.input}`可以获取到验证码，根据后台模型配置，会自动显示响应的输入框提示 使用`{$item.captcha.btn}`自动根据后台模型配置，显示按钮或图文 <blockquote class="danger"><p>确保邮箱验证码有email字段，手机验证码有phone字段 </p></blockquote> 若要自定义可自行增加验证码控件。  邮箱、手机验证码控件生成后并不能实现点击，官方并没有默认集成JS代码，下面提供了演示代码，需要JQ的支持 如果你的模板使用JQ以及错误提示框（layer），那么复制下面的代码放到页面底部就可以直接实现验证码发送功能。 ~~~ <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} 这样来调用，也可以直接使用\<?php dump($item);?>输出所有字段到页面上查看详细信息。 一级字段列表 | 字段名 | 说明 | | --- | --- | | action | 请求地址 | | field | 字段名称多行 | | captcha | 验证码 | | all | 字段多行，详细信息，见下方字段列表 | | category | 栏目信息 | `all `字段列表，多行，有几个字段就有几行 | 字段名 | 说明 | | --- | --- | | id | 字段ID | | model_id | 所属模型ID | | field_name | 字段名 | | field_title | 字段标题 | | form_type | 字段类型 | | field_group | 字段分组名，例如：常规，对应新增字段时的分组 | | length | 字段长度 | | default_value | 默认值 | | data_list | 数量列表 | | max_number | 最多数，数字文本框时有效 | | decimals | 小数点 | | rules | 规则 | | tips | 提示 | | error_tips | 错误提示 | | extend | 扩展 |