form 自由表單

【基礎(chǔ)用法】

標(biāo)簽：form

描述：自由表單標(biāo)簽，不依賴欄目，調(diào)用靈活

創(chuàng)建：后臺(tái)》功能地圖》高級(jí)擴(kuò)展》留言管理》表單管理》新建自由表單

用法：

{eyou:form type='default' formid='表單ID' id='field'}
<form method="POST" action="{$field.action}" {$field.formhidden} onsubmit="{$field.submit}" >
    <input id="attr_1" type="text" value="" name="{$field.attr_1}" placeholder="{$field.itemname_1}">
    <input id="attr_2" type="text" value="" name="{$field.attr_2}" placeholder="{$field.itemname_2}">
    <textarea id="attr_3" cols="40" rows="3" name="{$field.attr_3}" placeholder="{$field.itemname_3}"></textarea>
    <input type="submit" value="提交">
    {$field.hidden}
</form>
{/eyou:form}

屬性：

{$field.formhidden} 為表單支持圖片上傳屬性
{$field.submit} 為表單使用內(nèi)置的JS驗(yàn)證用戶輸入內(nèi)容的格式

{$field.attr_1} 為表單屬性字段名稱（示例見圖一）

{$field.itemname_1} 為表單屬性提示文字

formid=“指定表單ID”

type='default' 默認(rèn)類型，默認(rèn)為手工添加屬性標(biāo)簽，后臺(tái)新增屬性，需要手工復(fù)制標(biāo)簽到模板里調(diào)用。優(yōu)點(diǎn)是方便調(diào)整表單樣式。

----type='auto' 表單屬性自動(dòng)循環(huán)顯示，后臺(tái)新增屬性也自動(dòng)顯示。缺點(diǎn)是表單結(jié)構(gòu)和美化不夠靈活，需要一定的css前端技術(shù)

empty='' 當(dāng)前留言版塊的表單被刪完時(shí)，顯示的文案內(nèi)容

id='' 可以任意指定循環(huán)里的變量名替代field，假設(shè)id='field1'，模板調(diào)用如：{$field.title} 變成 {$field1.title}

涉及表字段：

請(qǐng)查閱易優(yōu)數(shù)據(jù)字典，找到表名 ey_form、ey_guestbook、ey_guestbook_attr、ey_guestbook_attribute

（圖一，如按示例里，{$field.attr_1}應(yīng)改為{$field.attr_45}）

-------------------------------效果展示--------------------------------
1，留言表單調(diào)用
模板調(diào)用代碼

{eyou:form type='default' formid='表單ID' id='field'}
<form action="{$field.action}" {$field.formhidden}  method="post" onsubmit="{$field.submit}">
        <li>
          <input class="login_input" name="{$field.attr_1}" type="text" id="attr_1" placeholder="{$field.itemname_1}"/>
        </li>
        <li>
          <input class="login_input" name="{$field.attr_2}" type="text" id="attr_2" placeholder="{$field.itemname_2}"/>
        </li>
        <li>
          <textarea class="login_textarea" name="{$field.attr_3}" id="attr_3" cols="30" rows="10" placeholder="{$field.itemname_3}"></textarea>
        </li>
        <li>
          <input class="login_btn common_bg" id="baidu-book" type="submit" value="提   交"/>
        </li>
        {$field.hidden}
</form>
{/eyou:form}

網(wǎng)站前端顯示效果（css樣式請(qǐng)自行填充）

【更多示例】

-------------------------------示例1--------------------------------

描述：完全的留言表單（單行文本框、多行文本框、下拉列表框、JS表單驗(yàn)證）

{eyou:form type='default' formid='表單ID' id='field'}
<form method="POST" {$field.formhidden} action="{$field.action}" onsubmit="return checkForm();">
    <input id="attr_5" type="text" value="" name="{$field.attr_5}" placeholder="{$field.itemname_5}">
    <textarea id="attr_6" cols="40" rows="3" name="{$field.attr_6}" placeholder="{$field.itemname_6}"></textarea>
    <select name="{$field.attr_7}" id="attr_7">
        <option value="無">無</option>
        {eyou:volist name='$field.options' id='vo'} <!-- 下拉列表循環(huán) start -->
            <option value="{$vo.value}">{$vo.value}</option>
        {/eyou:volist} <!-- 下拉列表循環(huán) end -->
    </select>
    <input type="submit" value="提交">
    {$field.hidden} <!-- 不可缺少的隱藏令牌驗(yàn)證 -->
</form>
<script type="text/javascript">
    function checkForm() {
        if (document.getElementById('attr_5').value.length == 0) {
            alert('{$field.itemname_5}');
            return false;
        }
        return true;
    }
</script>
{/eyou:form}

-------------------------------示例2--------------------------------

描述：表單屬性自動(dòng)循環(huán)輸出，后臺(tái)添加屬性，前臺(tái)表單屬性自動(dòng)顯示

{eyou:form type="auto" formid="表單ID" id="field"}
<form method="POST" {$field.formhidden} action="{$field.action}" onsubmit="{$field.submit}">
    <!-- 自動(dòng)表單屬性 -->
    {eyou:volist name="$field.attrlist" id="attr"}
        {$attr.attr_name}：{$attr.attr_html}
    {/eyou:volist}
    <!-- 提交 -->
    <input class="button bg-yellow button-large button-block border-none radius-none text-white" type="submit" value="提交"/>
    <!-- 不可缺少的隱藏令牌驗(yàn)證 -->
    {$field.hidden}
</form>
{/eyou:form}

文檔最后更新時(shí)間：2023-10-24 09:17:24

← downloadpay 下載付費(fèi) sppurchase 商品購(gòu)買 →

form 自由表單

目錄