## 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 | 擴展 |