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" ] ``` ```