How to judge and render different form elements (such as input, textarea, select) in the AnQiCMS template according to the `Type` field?

As an expert in website operations for many years, I deeply understand the importance of a flexible and efficient content management system for business development.AnQiCMS (AnQi Content Management System) provides us with great convenience with its high-performance architecture based on the Go language and highly customizable content model.In daily operation, we often need to display various customized forms on the front-end page according to different business needs, such as in comment boards, product inquiries, and event registration scenarios.How to intelligently render the corresponding form elements in AnQiCMS templates based on the field types defined on the backend (such as text input, multi-line text, drop-down selections, etc.), has become the key to improving user experience and operational efficiency.

Today, let's delve into how to cleverly utilize in the AnQiCMS templateTypeField to judge and render different form elements, making your website front-end more responsive and intelligent.

AnQiCMS's flexible content model: the cornerstone

AnQiCMS is able to achieve such flexible form rendering due to its powerful custom content model feature.As described in the AnQiCMS documentation, the system allows users to customize content models according to business needs, which means we can not only define the basic attributes of articles and products but also add various personalized fields.

For example, in the AnQiCMS backend, we can configure multiple custom fields for the comment board, such as "Name (single-line text)", "Comment Content (multi-line text)", "Gender (single selection)", "Hobbies (multiple selection)", and "How did you hear about us (drop-down selection)". When defining these fields, we will specify a "field type" for each one (such astext/textarea/radio/checkbox/selectThese are the "field types" defined in the background, which become the basis for conditional judgments and dynamic rendering in front-end templates.

Unveiling the magic of templates:guestbookLabel and conditional rendering

In the AnQiCMS template, when dealing with dynamic fields like comment forms, we usually useguestbookLabel. This label is specifically used to retrieve the background settings of the message form fields. It returns an array object containing all the field information, with eachitemcarrying the necessary informationTypeField, and other such asName(Form name),FieldName(form variable name),Required(Mandatory or not),Content(Default value/placeholder) andItems(Option list, for selection type fields) and other key information.

We can use Django template engine'sforloop to iterate over these fields and according toitem.TypeThe value is judged to render different HTML form elements.

Traverse form fields to understand the type mysteries

First, in your template file (for exampleguestbook/index.htmlOr any page that includes a comment form, you will see a structure similar to this:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
            {# 在这里根据item.Type判断并渲染不同元素 #}
        {% endfor %}
    {% endguestbook %}
    {# 提交按钮等 #}
</form>

fieldsThe variable now holds all the form field data configured in the background, anditemIt represents the individual field in the current loop.

Based onTypeField precise rendering

Now, we use{% if %}/{% elif %}and{% else %}These logical judgment tags, according toitem.TypeThe value to generate the corresponding HTML form elements.

1. Single-line text(text) or number(number) Input box:This field usually uses<input type="text">or<input type="number">Represents.

   {% if item.Type == "text" || item.Type == "number" %}
   <div class="form-group">
       <label for="{{item.FieldName}}">{{item.Name}}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</label>
       <input type="{{item.Type}}" id="{{item.FieldName}}" name="{{item.FieldName}}" class="form-control"
              {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
   </div>
   {% endif %}
   

   Here we utilizeitem.TypeSet directlyinputoftypeProperty,item.FieldNameasnameandid,item.NameAs a label,item.RequiredControl whether to addrequiredProperty,item.Contentasplaceholder.

2. Multi-line text (textarea):Fields for longer text input are used<textarea>.

   {% elif item.Type == "textarea" %}
   <div class="form-group">
       <label for="{{item.FieldName}}">{{item.Name}}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</label>
       <textarea id="{{item.FieldName}}" name="{{item.FieldName}}" class="form-control" rows="5"
                 {% if item.Required %}required{% endif %} placeholder="{{item.Content}}"></textarea>
   </div>
   

3. Single choice (radio), multiple choice (checkbox) or dropdown choice (select):These selection fields need to be traverseditem.ItemsRender each option in an array.

   {% elif item.Type == "radio" %}
   <div class="form-group">
       <label>{{item.Name}}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</label>
       {% for val in item.Items %}
       <div class="form-check form-check-inline">
           <input type="radio" id="{{item.FieldName}}_{{loop.index}}" name="{{item.FieldName}}" value="{{val}}" class="form-check-input"
                  {% if item.Required %}required{% endif %}>
           <label class="form-check-label" for="{{item.FieldName}}_{{loop.index}}">{{val}}</label>
       </div>
       {% endfor %}
   </div>
   
   
   {% elif item.Type == "checkbox" %}
   <div class="form-group">
       <label>{{item.Name}}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</label>
       {% for val in item.Items %}
       <div class="form-check form-check-inline">
           <input type="checkbox" id="{{item.FieldName}}_{{loop.index}}" name="{{item.FieldName}}[]" value="{{val}}" class="form-check-input"
                  {% if item.Required %}required{% endif %}>
           <label class="form-check-label" for="{{item.FieldName}}_{{loop.index}}">{{val}}</label>
       </div>
       {% endfor %}
   </div>
   
   
   {% elif item.Type == "select" %}
   <div class="form-group">
       <label for="{{item.FieldName}}">{{item.Name}}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</label>
       <select id="{{item.FieldName}}" name="{{item.FieldName}}" class="form-control" {% if item.Required %}required{% endif %}>
           <option value="">请选择</option> {# 增加一个默认提示选项 #}
           {% for val in item.Items %}
           <option value="{{val}}">{{val}}</option>
           {% endfor %}
       </select>
   </div>
   

   here,loop.indexInforA unique index for each option is provided in the loop, to generate a uniqueidandforAttribute to enhance accessibility.name="{{item.FieldName}}[]"It is required for the checkboxes so that the backend can receive multiple values.

A complete code example

Integrate the above fragment, and you can build a common template that can render forms dynamically according toTypefields:

`twig

{# 隐藏字段用于告知后端返回格式，默认为html，可改为json #}
<input type="hidden" name="return" value="html">

{# 如果需要验证码，这里可以添加验证码相关的元素和逻辑 #}
{# 示例： {% include "partial