4.3 把表单渲染成HTML

表单字段是可调用的，在模板中调用后会渲染成 HTML。假设视图函数通过 form 参数把 一个 NameForm 实例传入模板，在模板中可以生成一个简单的 HTML 表单，如下所示：

<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name() }} 
    {{ form.submit() }}
</form>

注意，除了 name 和 submit 字段，这个表单还有个 form.hidden_tag() 元素。这个元素生成 一个隐藏的字段，供 Flask-WTF 的 CSRF 防护机制使用。

当然，这种方式渲染出的表单还很简陋。调用字段时传入的任何关键字参数都将转换成字 段的 HTML 属性。例如，可以为字段指定 id 或 class 属性，然后为其定义 CSS 样式：

<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name(id='my-text-field') }} 
    {{ form.submit() }}
</form>

即便能指定 HTML 属性，但按照这种方式渲染及美化表单的工作量还是很大，所以在条件 允许的情况下，最好使用 Bootstrap 的表单样式。

Flask-Bootstrap 扩展提供了一个高层级的辅助函数，可以使用 Bootstrap 预定义的表单样式渲染整个 Flask-WTF 表单，而这些操作 只需一次调用即可完成。

使用 Flask-Bootstrap，上述表单可以用下面的方式渲染：

{% import "bootstrap/wtf.html" as wtf %} 
{{ wtf.quick_form(form) }}

import 指令的使用方法和普通 Python 代码一样，通过它可以导入模板元素，在多个模板 中使用。

导入的 bootstrap/wtf.html 文件中定义了一个使用 Bootstrap 渲染 Flask-WTF 表单 对象的辅助函数。

wtf.quick_form() 函数的参数为 Flask-WTF 表单对象，使用 Bootstrap 的 默认样式渲染传入的表单。

hello.py 的完整模板如示例 4-3 所示。

示例 4-3　templates/index.html：使用 Flask-WTF 和 Flask-Bootstrap 渲染表单

{% 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 %}

模板的内容区现在有两部分。第一部分是页头，显示欢迎消息。这里用到了一个模板条 件语句。Jinja2 的条件语句格式为 {% if condition %}...{% else %}...{% endif %}。

如果条件的计算结果为 True，那么渲染 if 和 else 指令之间的内容。如果条件的计算结果 为 False，则渲染 else 和 endif 指令之间的内容。

在这个例子中，如果定义了 name 变量， 则渲染 Hello, {{ name }}!，否则渲染 Hello, Stranger!。内容区的第二部分使用 wtf. quick_form() 函数渲染 NameForm 对象。

《基于Python的Web应用开发实战(第二版)》