1. HTML渲染的表单
表单域是可调用的,调用时从模板渲染它们到HTML。假设视图函数传递一个参数名为form的NameForm实例给模板,模板就会生成一个简单的HTML表单,如下所示:
- 隐藏的 CSRF 令牌会被自动地创建。你可以在模板这样地渲染它: {{ form.csrf_token }}
- 为了创建有效的 XHTML/HTML, Form 类有一个 hidden_tag 方法, 它在一个隐藏的 DIV 标签中渲染任何隐藏的字段,包括 CSRF 字段;
2. 自定义表单样式
为了改变表单的外观显示,任何发送给该表单域的参数会被转换为HTML表单域属性;例如,你可以给定表单域id或class属性,然后定义CSS样式:
方法1:
<form method="POST" action="/">
{{ form.csrf_token }}
{{ form.name.label }} {{ form.name(id='myname') }}
{{ form.submit() }}
</form>
方法2:
<form method="POST" action="/">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name(class='myname') }}
{{ form.submit() }}
</form>
3. 使用Bootstrap自带的表单样式
即使有HTML属性,努力用这种方式渲染表单是非常重要的,所以最好是尽可能的使用Bootstrap自带的一系列表单样式。Flask-Bootstrap使用Bootstrap的预定义表单样式来提供高级的帮助函数来渲染整个Flask-WTF表单,这些操作都只需要一个调用即可完成。使用Flask-Bootstrap,上一个表单可以像下面这样来渲染:
# import允许模板元素被导入并在许多模板中使用。
{% import "bootstrap/wtf.html" as wtf %}
# wtf.quick_form()函数传入Flask-WTF表单对象并使用默认Bootstrap样式渲染它。
{{ wtf.quick_form(form) }}
完整样式
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
</div>
{{ wtf.quick_form(form) }}
{% endblock %}