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

Posted 2023-02-23

【中文标题】使用 Flask-WTForms，如何设置 html 表单部分的样式？

【英文标题】：Using Flask-WTForms, how do I style my form section of the html?

【发布时间】：2016-04-16 18:04:56

【问题描述】：

我阅读了 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"> 中，但现在我用 @987654329 替换整个 <input> 行@...我失去了编辑课程的特权，什么都没有。

【参考方案1】：

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

for、value、type、id 和 name 不需要传递，因为它们是自动处理的。有一些rules 用于处理属性的特殊情况。如果属性名称是 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) 

请注意，不需要直接调用任何链接方法，这些文档仅描述调用字段时的行为。

【参考方案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)

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

【讨论】：

f 在您的第一种方式中指的是什么？