WTForms 全自动表格生成

Question

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

我现在正在尝试将 WTF Forms 插件与 Flask 一起使用。现在我这样做是为了生成我的输入。我的问题是我不知道如何使用每个输入的 class 来制作 bootstrap 行。（例如：输入 class 是 col-md-12，因此仅使用此输入创建一行。如果以下输入 class 是 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 class 以添加我可以在自定义 StringField class

中使用的自定义属性

WTForms 全自动表格生成

WTFForms totally automatize form generation

python

flask

wtforms

flask-wtforms