As an experienced website operations expert, I know the importance of a flexible and efficient content management system for a corporate website.AnQiCMS stands out among many content management systems due to its lightweight and high concurrency features.Its powerful customizability is particularly noteworthy, which includes those seemingly simple yet crucial 'choice' fields in the comment form, such as radio buttons, checkboxes, and dropdown options.ItemsData structure and its traversal methods in templates.

Exploring the AnQiCMS message form.ItemsField

How did you find out about us?（Single choice）、What products are you interested in?(Multiple choice) or Select your industry (drop-down).Itemsin attributes.ItemsField, as the name implies, it carries all the options available for selection, and is the core of the functionality of these selection form.

From the design philosophy of AnQiCMS, it pursues great flexibility. Therefore, regardless of whether you choose 'Single Selection', 'Multiple Selection', or 'Dropdown Selection' among these types when customizing fields in the background content model, the options of these fields will be organized uniformly and standardized by the system, and finally presented in the template layer.ItemsThe form of the field.This means that regardless of the type of choice, their basic structure at the data level is consistent: an array of strings.Itemsarray.

UnveilingItemsThe structure of the field and the way of traversal of the template

Now, let's take a detailed look at how to get and traverse in the AnQiCMS templateItemsthe data of the field.

Firstly, to get all the fields of the message form, we need to use the AnQiCMS providedguestbookLabel. This label will encapsulate the configuration of the entire comment form, including the properties of each field.fieldsvariable, which we can use in the template.

{% guestbook fields %}
    {# 接下来将遍历 fields 变量，获取每个表单字段 #}
{% endguestbook %}

once we have obtainedfieldsA variable, which is actually an array object, containing each field (item) of the form. Therefore, we can usefora loop to process each field one by one:

{% guestbook fields %}
    {% for item in fields %}
        {# 这里的 item 就代表了表单中的一个具体字段，例如“姓名”、“电话”或者“感兴趣的产品” #}
    {% endfor %}
{% endguestbook %}

For the radio, checkbox and dropdown selection fields we are concerned about,itemthe object will have aTypeattribute, with values of"radio"/"checkbox"or"select". And these specific types of fields will also include an additionalItemsProperty, thisItemsThe property itself is also an array, storing the string values of each option.

To render these options accurately in the template, we need to base onitem.TypePerform a conditional judgment, thenitem.ItemsPerform another iteration. Below is a specific template code example that elegantly demonstrates how to obtain and render these selective fields:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
            <div>
                <label>{{ item.Name }}</label>
                <div>
                    {% 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">
                    {% elif item.Type == "textarea" %}
                        {# 处理多行文本输入框 #}
                        <textarea name="{{ item.FieldName }}" {% if item.Required %}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 }}" id="{{ item.FieldName }}_{{ loop.index }}" {% if item.Content == val %}checked{% endif %}>
                            <label for="{{ item.FieldName }}_{{ loop.index }}">{{ val }}</label>
                        {% endfor %}
                    {% elif item.Type == "checkbox" %}
                        {# 处理多选框组 #}
                        {# 注意：多选框的 name 属性通常需要带 [] 以便后端接收数组 #}
                        {% for val in item.Items %}
                            <input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}" id="{{ item.FieldName }}_{{ loop.index }}" {% if item.Content | contain:val %}checked{% endif %}>
                            <label for="{{ item.FieldName }}_{{ loop.index }}">{{ val }}</label>
                        {% endfor %}
                    {% elif item.Type == "select" %}
                        {# 处理下拉选择框 #}
                        <select name="{{ item.FieldName }}" {% if item.Required %}required{% endif %}>
                            {% for val in item.Items %}
                                <option value="{{ val }}" {% if item.Content == val %}selected{% endif %}>{{ val }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}
                </div>
            </div>
        {% endfor %}

        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
</form>

In the above code:

  1. the outermost{% for item in fields %}The loop is responsible for traversing each form field.
  2. item.NameUsed to display the Chinese name of the field (e.g., “The products you are interested in”).*
  3. item.FieldNameIt is the actual field when the form is submitted.nameAttribute, the backend will receive data through this name.
  4. item.RequiredDetermine whether this field is required.
  5. The key is in{% if item.Type == "radio" %}/"checkbox"or"select"branch. Within these branches, we use it again{% for val in item.Items %}Loop to iterate over each option. Here is thevaltext value of the option directly.
  6. For checkboxes (checkbox),nameproperties usually need to be prefixed with[]for examplename="interests[]"such that when the form is submitted, even if multiple options are selected, the backend can receive them in the form of an array.
  7. item.ContentHere it can be used as the basis for the default selected item, for radio buttons and drop-downs, a direct judgment is made.item.Content == val；For multiple choice, you can usecontainfilters (for exampleitem.Content | contain:val）to determine whether the current option is in the default value list.
  8. loop.indexis the index of the current element in the loop, which can be used to generate a uniqueidattribute, so thatlabelTags can be used toforattribute andinput关联，提升用户体验。

Through this dynamic traversal method, AnQiCMS greatly enhances the flexibility and maintainability of the form.You do not need to hardcode every option in the template. Just configure it simply in the background, and the front-end can automatically adapt and display the complete form.This not only reduces the development workload, but also makes subsequent form adjustments effortless.

Summary

AnQiCMS 的留言表单设计充分体现了其“高效、可定制、易扩展”的理念。通过guestbooktags to getfieldsarray and based onitem.Type智能地遍历item.ItemsWe can easily build comprehensive, highly adaptive radio, checkbox, and dropdown forms in the frontend template.This unified data structure and flexible traversal mechanism is undoubtedly an important embodiment of the strong support provided by AnQiCMS in content operation and website management.

Common Questions (FAQ)

  1. 问：If I set a multi-line "default value" for non-selectable fields (such as "single-line text") in the background,Itemshow will the field behave?答：English in design strictly distinguishes field types.ItemsThe field has actual significance only for 'Single choice', 'Multiple choice', and 'Drop-down selection' types. For non-choice types such as 'Single-line text', 'Multi-line text', or 'Number', even if you enter multiple lines of content in the 'Default value' configuration area in the background, the system will not parse it.Itemsfield. This multi-line content is only used asitem.Contentvalue is recognized, usually used to set the default fill content of the text input box orplaceholdertext.

  2. Q:Itemseach option in the field, except itsvalueItself, does it still contain other metadata (such aslabelorid)?Answer: According to the current document and template tag usage of AnQiCMS,item.ItemsArray stores the string values of options directly (for example"红色","蓝色")。It is a pure list of values, without any extralabeloridmetadata. When rendering on the frontend, you usually willval(i.e., the current value being traversed) also used as<input>or<option>Tagsvalueand display text. If you need to generate a unique HTML for each optionid, you can combine as shown in the above example,loop.indexauto

  3. autoItemsauto答：AnQiCMS 的表单提交机制非常直观。当您按照示例模板代码中的方式，为<input>（单选、多选）或<select>（下拉）标签正确设置name="{{ item.FieldName }}"(Checkboxes arename="{{ item.FieldName }}[]") properties, the choices made by the user on the frontend page will be sent as corresponding key-value pairs or arrays when the form is submitted,/guestbook.htmlRoute.AnQiCMS Backend will automatically recognize and process these data, matching them with the form fields configured on the backend, ensuring that the data can be correctly stored or used for subsequent processing.nameproperties and the backend fieldsFieldNameMatching, as well as the correct use of multi-select types[].