使用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 }}放在哪里？

编辑：让我再详细解释一下我的回答： 例如，我想要像物化的datepicker（一个好的弹出日历，允许用户选择日期），这应该在<input class='datepicker' length="50">中，但现在我要用{{ form.date }}替换整个<input>行。。。我失去了编辑这个类的特权。

Answer 1

在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)

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