WTFForms完全自动化表单生成

Question

使用基本HTML生成，我有以下表单：

我现在尝试将WTF表单插件与Flask一起使用。现在，我这样做是为了产生我的输入。我的问题是，我不知道如何使用每个输入的类生成引导行。（例如：输入类为col-md-12，因此仅使用此输入创建一行。如果以下输入类为col-md-6，则为多个输入创建一行）

class SupplierForm(Form):
    supplierInfo_name = StringField(
        lazy_gettext('NAME'),
        [validators.required()],
        render_kw={
            'class': 'col-md-12 form-control',
            'onfocus': "searchSupplier()",
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        },
    )
    supplierInfo_address = StringField(
        lazy_gettext('ADDRESS'),
        [validators.required()],
        render_kw={
            'class': 'col-md-12 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_postal_code = StringField(
        lazy_gettext('ZIP_CODE'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_city = StringField(
        lazy_gettext('CITY'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_vat_number = StringField(
        lazy_gettext('VAT_NUMBER'),
        [validators.required()],
        render_kw={
            'class': 'col-md-12 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_siret_number = StringField(
        lazy_gettext('SIRET_NUMBER'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_siren_number = StringField(
        lazy_gettext('SIREN_NUMBER'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )

我的HTML现在，所有的输入都是逐行显示的

{% macro render_field(field) %}
<div class="form-group">
    <label for="{{ field.id }}">
        {{ field.label }}
    </label>
    <div class="input-group mb-2">
        <div onclick="drawRectangle(document.getElementById('{{ field.id }}'))" class="input-group-prepend">
            <div class="input-group-text"><i class="fas fa-eye" aria-hidden="true"></i></div>
        </div>
        {{ field(**kwargs)|safe }}
        {% if field.errors %}
            <ul class=errors>
                {% for error in field.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>
{% endmacro %}
    
<form method=post>
    {% for field in form %}
        {{ render_field(field) }}
    {% endfor %}
    <p><input type=submit value=Register>
</form>

Answer 1

我终于设法做了我想做的事。我重写WTFORMS的Fied类，以添加可用于自定义StringField类的自定义属性