How to render different input controls (such as text, radio, checkbox) in the `guestbook` form based on the `Type` attribute?

As an experienced website operation expert, I know that a flexible and variable content management system is the foundation of a successful website.AnQiCMS (AnQiCMS) with its excellent flexibility and powerful customization capabilities has become an indispensable tool in our hands.Today, let's delve deeply into a very practical topic in actual operation: how to leave messages in Anqi CMS (guestbookIn the form, it intelligently renders different input controls based on the field type preset on the backend, such as text boxes, radio buttons, or checkboxes.

This is not just a technical implementation, it also concerns user experience and the efficiency of data collection.A form that can be flexibly adjusted to meet business needs, not only makes it easier for users to fill out, but also helps us collect more accurate and standardized data, laying a solid foundation for subsequent marketing analysis and customer service.

InterpretguestbookLabel: The cornerstone of form customization.

In AnQi CMS, the construction of the comment form cannot do without its built-inguestbookThe tag's strength lies in the fact that it does not simply generate a fixed form, but can dynamically read the custom field information you configure in the background 'website message' feature.

When we use{% guestbook fields %}This way to call,fieldsThe variable actually carries an array object that contains the detailed properties of each custom field you define for the comment form. Each field (i.e.),item) has the following key information:

• Name: This is the display name of the form field, such as "Your name", "Your preference", etc., which is displayed directly to the user.
• FieldName: This is the variable name used for form field processing on the backend, corresponding to the attribute in HTMLnameAttribute, it is the key to data submission and identification.
• Type: This is the core of what we discussed today, defining how form fields should be displayed in HTML controls, for exampletext(Text),number(Number),textarea(Multi-line text),radio(Single selection),checkbox(Select multiple) orselect(Dropdown select).
• Required: A boolean value indicating whether the field is required.
• ContentFor text, numeric, or multiline text fields, this is typically the default value or placeholder.
• Items: For single-choice, multiple-choice, and dropdown fields, this is a very important array that contains all the optional items, each of which is an independent option value.

UnderstoodfieldsThe structure of the array, we can start building dynamic rendering logic.

Core implementation: based onTypeAttribute intelligent rendering input control

To implement based onTypeRendering different input controls based on attribute conditions, we mainly rely on the Anqi CMS template engine'sforloop andif/elif/elsecondition judgment tags.

First, we useforLoop throughguestbookthe tags returned byfieldsarrayitem(custom fields). Inside the loop, we useitem.TypeAn attribute to determine the type of the current field and render the corresponding HTML form control.

Let's break down this process step by step:

1. Traverse all custom fields:

   {% guestbook fields %}
       {% for item in fields %}
           {# 在这里根据 item.Type 渲染不同控件 #}
       {% endfor %}
   {% endguestbook %}
   

2. Render a universal text input box (text,number):For these simple text input types, we can directly utilizeitem.Typeas HTMLinputlabel'stypeattribute values. Also, don't forget to setnameproperties(item.FieldName)、placeholder(item.Content) andrequiredProperty.

   {% if item.Type == "text" or item.Type == "number" %}
   <input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
   {% endif %}
   

3. to render a multiline text box (textarea): textareacontrol andinputSimilar, but the structure is different.

   {% elif item.Type == "textarea" %}
   <textarea name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
   

4. Render radio button (radio):The radio button needs to traverseitem.ItemsThe array to generate each option. Each option'snameproperties are the same, ensuring that they belong to the same radio group.valueset the attribute toval,titleProperties are used to display option text.

   {% elif item.Type == "radio" %}
       {%- for val in item.Items %}
       <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" id="{{item.FieldName}}-{{loop.index}}" {% if val == item.Content %}checked{% endif %}>
       <label for="{{item.FieldName}}-{{loop.index}}">{{val}}</label>
       {%- endfor %}
   

   (Hint: This is used)loop.indexto generate uniqueid, convenientlabelto associate and addcheckedLogic to support default values.)

5. Render checkbox (checkbox):The checkbox also needs to be traverseditem.Items. Unlike the radio button, the properties of the checkbox usually need to be addedname属性通常需要加上[]suffix so that the backend can receive an array of values (for examplename="interests[]")

   {% elif item.Type == "checkbox" %}
       {%- for val in item.Items %}
       <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" id="{{item.FieldName}}-{{loop.index}}" {% if val in item.Content %}checked{% endif %}>
       <label for="{{item.FieldName}}-{{loop.index}}">{{val}}</label>
       {%- endfor %}
   

   (Hint:item.ContentIt may be a string containing multiple default values in a multi-select scenario, so it needs to be judgedval in item.Content.)

6. Render dropdown selection box (select):The dropdown selection box also needs to be traverseditem.Itemsto generate<option>.

   {% elif item.Type == "select" %}
   <select name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
       {%- for val in item.Items %}
       <option value="{{val}}" {% if val == item.Content %}selected{% endif %}>{{val}}</option>
       {%- endfor %}
   </select>
   

   (Hint: Here you added)selectedLogic to support default values.)

Comprehensive example code: Build a complete dynamic message form

Integrate the above logic, combining the basic form structure (includinguser_name,contact,contentThese common comment fields, a fully functional comment form that can dynamically change according to backend configuration has emerged:

`twig

<label for="user_name">您的姓名:</label>
<input type="text" name="user_name" id="user_name" required placeholder="请输入您的姓名" autocomplete="off" class="form-control">

<label for="contact">联系方式:</label>
<input type="text" name="contact" id="contact" required placeholder="手机、邮箱或微信" autocomplete="off" class="form-control">

<label for="content">留言内容:</label>
<textarea name="content" id="content" required placeholder="请留下您的宝贵意见或问题" rows="5" class="form-control"></textarea>

  {% for item in fields %}
  <div class="form-group dynamic-field-{{item.FieldName}}">
      <label for="{{item.FieldName}}">{{item.Name}}:</label>
      <div>
          {% if item.Type == "text" or item.Type == "number" %}
          <input type="{{item.Type}}" name="{{item.FieldName}}" id="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off" class="form-control">
          {% elif item.Type == "textarea" %}
          <textarea name="{{item.FieldName}}" id="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5" class="form-control"></textarea>
          {% elif item.Type == "radio" %}
              {%- for val in item.Items %}
              <label class="radio-inline">
                <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" id="{{item.FieldName}}-{{loop.index}}" {% if val == item.Content %}checked{% endif %}> {{val}}
              </label>
              {%- endfor %}
          {% elif