使用Flask-WTForms,我如何设置html的表单部分的样式？

Question

我通过Flask-WTF非常简化的wiki阅读,并且无法理解我能用它做什么.我的印象是<form>html 的部分现在只能看起来像

<form method="post">
    {{ form.hidden_tag() }}
    {{ form.name }}
    <input type="submit">
</form>

但我真的想要使用物化的样式,例如:

        <div class="row">
            <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input value="FN" id="first_name" type="text" class="validate">
                <label class="active" for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
                <input value="LN" id="last_name" type="text" class="validate">
                <label class="active" for="last_name">Last Name</label>
            </div>
        </div>

我在哪里能适应{{ form.first_name }}并{{ form.last_name }}进入？

编辑:让我详细说明我的答案:例如,我想要像Materialized datepicker(一个很好的弹出日历,让用户选择日期),这应该在<input class='datepicker' length="50">,但现在我正在替换整<input>行与{{ form.date }}...我失去了编辑课程的特权,但没有.

Answer 1

可以使用将在其呈现的输入上设置的属性调用 WTForms字段.将样式,JavaScript功能等所需的属性传递给字段,而不仅仅是引用字段.标签的行为方式相同,可以使用field.label.

for,value,type,id,并且name不需要进行传递,因为它们会自动处理.处理特殊属性的情况有一些规则.如果属性名称是Python关键字,例如class,附加下划线:class_.破折号不是有效的Python名称,因此单词之间的下划线将转换为破折号; data_toggle成为data-toggle.

{{ form.first_name(class_='validate') }}
{{ form.first_name.label(class_='active') }}

{{ form.begins(class_='datepicker', length=50) }}

请注意,这两个链接方法都不需要直接调用,这些文档只是描述调用字段时的行为.

Answer 2

在WTForms 2.1 中，我使用extra_classes，如下所示：

1.第一种方式

{{ f.render_form_field(form.first_name, extra_classes='ourClasses') }}

或者在你的情况下就像这样：

{{ form.first_name, extra_classes='ourClasses' }}

我们还可以render_kw像下面的第二种方式一样在表单字段上使用该属性：

2.第二种方式

style={'class': 'ourClasses', 'style': 'width:50%; other_css_style;'}
first_name = StringField('First name',
                     validators=[InputRequired(),Length(1, 64)],
                     render_kw=style)

但我更愿意使用第一种方式。