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

  • Z时代
  • 2024-01-10
  • 分类：问答

我阅读了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 }}…我失去了编辑课程的特权，而没有这样做。

回答：

可以使用将在呈现的输入上设置的属性来调用 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) }}

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

以上是 使用Flask-WTForms，如何设置html的表单部分的样式？ 的全部内容， 来源链接： utcz.com/qa/432639.html

回到顶部