说明:用于获取后台设置的留言表单
使用方法:{% guestbook 变量名称 %} 如将变量定义为fields {% guestbook fields %}...{% endguestbook %}
该标签不支持参数。
fields 是一个数组对象,因此需要使用 for 循环来输出
item 为 for循环体内的变量,可用的字段有:
- 表单名称
Name - 表单变量
FieldName - 表单类型
Type
表单类型有6种可能的值:文本类型text、数字类型number、多行文本类型textarea、单项选择类型radio、多项选择类型checkbox、下拉选择类型select。 - 是否必填
Required
Required 值为 true 时,表示必填,Required 值为 false 时,表示可以不填。 - 表单默认值
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>