使用Flask-WTForms，如何样式化html的表单部分？

Question

我通读了Flask-WTF极其简化的wiki，并不能理解我能用它做些什么。我的印象是，html的<form>部分现在只能看起来像这样

<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">中，但现在我用{{ form.date }}替换了整个<input>行……我失去了编辑这个类的特权。

Answer 1

WTForms字段可以是带有属性的called，这些属性将在它们呈现的输入上设置。将样式化、JavaScript功能等所需的属性传递给字段，而不仅仅是引用字段。标签的行为方式相同，并且可以使用field.label进行访问。

for、value、type、id和name不需要传递，因为它们是自动处理的。有一些rules用于处理属性的特殊情况。如果属性名称是class等Python关键字，则追加下划线：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)

但我更喜欢使用第一种方式。