WTForms 与 Material Design Lite

Question

我正在尝试使用 mdl 和 flask-wtf 来呈现一个简单的表单。根据 documentation 我必须将 mdl classes 添加到表格中。

5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the class attribute.

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label class="mdl-textfield__label" for="user">User name</label>
  <span class="mdl-textfield__error">Letters and spaces only</span>
</div>

所以我在我的模板中使用了这个：

<form method="POST">
  {{ form.hidden_tag() }}
  <div class=mdl-textfield mdl-js-textfield mdl-textfiedl--floating-label">
    {{ form.email.label }}
    {{ form.email(class="mdl-textfield__input") }}
  </div>
</form>

这并不完全有效，因为我需要将 mdl-textfield__label class 添加到标签中。

有没有办法使用 wtforms 来做到这一点，还是我必须忽略 {{ form.email.label }} 部分并自己制作标签？

Answer 1

我建议编写您自己的模板宏。这样您就可以让您的表单看起来完全符合您的要求，并且您的所有表单在整个站点中看起来都一样。

看这里：http://bear-z.com/python/render-bootstrap-3-forms-with-wtforms-and-jinja/

WTForms 与 Material Design Lite

WTForms with Material Design Lite

wtforms

flask-wtforms

material-design-lite