As an experienced website operations expert, I fully understand the importance of a flexible and efficient content management system for corporate websites.AnQiCMS stands out among many content management systems with its lightweight and high concurrency features.Its powerful customization capabilities are particularly noteworthy, including those seemingly simple yet crucial 'selection' fields in the comment form, such as radio buttons, checkboxes, and drop-down options.Today, let's delve deeply into the fields behind the AnQiCMS comment form.ItemsData structures and their traversal methods in templates.

Discovering the AnQiCMS comment form.Itemsfield

When configuring the message form in the AnQiCMS backend, we often encounter scenarios where users need to make selections, such as 'How did you hear about us?'(Single choice)These options' configurations will ultimately be reflected in the message form fieldsItemsthe attribute.ItemsThe field, as the name implies, carries all the options available in the list and is the core of implementing these selection form functions.

From the design philosophy of AnQiCMS, it pursues great flexibility. Therefore, no matter which type you choose when customizing fields in the background content model, whether it is 'Single Selection', 'Multiple Selection' or 'Dropdown Selection', 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 presents. This means that regardless of the type of choice, their basic structure at the data level is consistent: an array of strings.When configuring these options in the background, you will find that they are required to be entered one per line, the system will intelligently parse and store them as a list, which is what we will traverse nextItemsarray.

RevelationItemsThe structure and traversal of the field

Now, let's understand in detail how to get and traverse in the AnQiCMS templateItemsthe field data.

First, to get all the fields of the message form, we need to use the AnQiCMS providedguestbookA tag that encapsulates the entire comment form configuration, including the properties of each fieldfieldsA variable for us to use in the template

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

Once we have obtainedfieldsA variable, which is actually an array object containing each field (item) from 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 oneTypeproperty, whose values are"radio"/"checkbox"or"select". And these specific types of fields will also include an extra one,ItemsProperty, thisItemsThe property itself is also an array, containing the string values of each option.

To accurately render these options in the template, we need to base on the followingitem.TypePerform a conditional judgment and then performitem.ItemsPerform another loop. Below is a specific template code example that elegantly demonstrates how to retrieve and render these optional 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 iterating over each form field.
  2. item.NameUsed to display the Chinese name of the field (such as "The products you are interested in").
  3. item.FieldNameIs 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,valThis is the text value of the option directly.
  6. For the checkbox (checkbox),name属性通常需要加上[]For examplename="interests[]"so that even if multiple options are selected when the form is submitted, the backend can receive them in the form of an array.
  7. item.ContentThis can be used as the basis for the default selected option, for single selection and dropdown, judgment is made directlyitem.Content == val; For multiple selection, you can usecontainfor example, a filter (such asitem.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 uniqueidProperty, so thatlabelTags can be used toforProperty withinputAssociated to improve user experience.

By this dynamic traversal method, AnQiCMS greatly enhances the flexibility and maintainability of forms.You do not need to hardcode each option in the template, just configure it simply in the background, and the front end can automatically adapt and present the complete form.This not only reduces the development workload, but also makes it easy to adjust the form later.

Summary

The AnQiCMS form design fully embodies its 'efficient, customizable, and easy to expand' philosophy. Throughguestbooktag to obtainfieldsarray and based onitem.Typesmartly traverseitem.ItemsArrays can easily be built into fully functional, highly adaptive single-choice, multiple-choice, and dropdown forms on the front-end template.This unified data structure and flexible traversal mechanism is undoubtedly an important embodiment of AnQiCMS's strong support in content operation and website management.

Frequently Asked Questions (FAQ)

  1. Ask: If I configure a multi-line "default value" for non-selective fields (such as "single-line text") in the background,Itemshow will the field behave?Answer: AnQiCMS strictly distinguishes field types in its design.ItemsThe field is meaningful only for 'Single choice', 'Multiple choice', and 'Drop-down' types. For non-choice types such as 'Single-line text', 'Multi-line text', or 'Number', even if you enter multiple lines in the 'Default value' configuration area in the background, the system will not parse it toItemsThe field contains. This multiline content is only used asitem.ContentThe value is recognized, usually used to set the default fill content of the text input box orplaceholder.

  2. Question:ItemsEach option in the field, except itsvalueDoes it also contain other metadata such aslabelorid)?Answer: According to the current document and template tag usage of AnQiCMS,item.ItemsThe array directly stores the string values of the options (for example"红色","蓝色")。It is a pure list of values and does not contain any additionallabeloridmetadata. When rendering on the front end, you usually willval(The value currently being traversed) is also used as<input>or<option>label'svalueand displayed text. If you need to generate a unique HTML for each optionidyou can combine it like the example above,loop.indexGenerate dynamically.

  3. How can you ensure that users pass throughItemsThe value selected in the field can be submitted correctly and received by the backend?Answer: AnQiCMS's form submission mechanism is very intuitive. When you follow the example template code, set the<input>(radio, checkbox) or<select>(drop-down) label correctlyname="{{ item.FieldName }}"(The selected options arename="{{ item.FieldName }}[]"), the choices made by the user on the front-end page, will be sent as corresponding key-value pairs or arrays when the form is submitted to/guestbook.htmlRouting. The AnQiCMS backend will automatically identify and process this data, matching it with the form fields configured in the background to ensure that the data is stored correctly or used for subsequent processing.The key is to ensurenameattributes corresponding to the background fieldsFieldNameThe match, as well as the correct use for multi-choice types[].