说明:用于获取后台设置的留言表单
使用方法:{% guestbook 变量名称 %}
如将变量定义为fields {% guestbook fields %}...{% endguestbook %}
该标签不支持参数。
fields 是一个数组对象,因此需要使用 for
循环来输出
Name
FieldName
Type
text
、数字类型 number
、多行文本类型 textarea
、单项选择类型 radio
、多项选择类型 checkbox
、下拉选择类型 select
。Required
Content
Items
radio
、多项选择类型 checkbox
、下拉选择类型 select
时,它们的每一个选择项构成了一个 Items 数组,可以通过 for 循环输出。留言表单提交需要使用 form 表单提交, 提交后台接收地址为:/guestbook.html
,需要提交的字段有
字段 | 是否必填 | 说明 |
---|---|---|
user_name | 是 | 留言的用户名 |
contact | 是 | 联系方式,如手机,电话,微信,QQ等 |
content | 是 | 留言内容 |
其他自定义字段 | 根据设置决定 | 后台添加表单额外字段设置的字段,根据设置是否为必填 |
return | 否 | 提交后,指定后端返回的格式,可选的值有:html 、json ,默认为 html |
通过下面的代码,可以循环输出所有的设置的字段。
<form class="layui-form" method="post" action="/guestbook.html">
{% guestbook fields %}
{% for item in fields %}
<div class="layui-form-item">
<label class="layui-form-label">{{item.Name}}</label>
<div class="layui-input-block">
{% if item.Type == "text" || item.Type == "number" %}
<input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" autocomplete="off" class="layui-input">
{% elif item.Type == "textarea" %}
<textarea class="layui-textarea" name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
{% elif item.Type == "radio" %}
{%- for val in item.Items %}
<input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" title="{{val}}">
{%- endfor %}
{% elif item.Type == "checkbox" %}
{%- for val in item.Items %}
<input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{val}}">
{%- endfor %}
{% elif item.Type == "select" %}
<select name="{{item.FieldName}}">
{%- for val in item.Items %}
<option value="{{val}}">{{val}}</option>
{%- endfor %}
</select>
{% endif %}
</div>
</div>
{% endfor %}
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" type="submit">提交留言</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
{% endguestbook %}
</form>
如果你想自定义表单显示,你也可以使用常规的input来组织显示,如:
<form class="layui-form" method="post" action="/guestbook.html">
<input type="hidden" name="return" value="html">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="user_name" required lay-verify="required" placeholder="请填写您的昵称" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-inline">
<input type="text" name="contact" required lay-verify="required" placeholder="请填写您的手机号或微信" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">留言内容内容</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="content" placeholder="" id="comment-content-field" rows="5"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" type="submit">提交留言</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>