表單字段是可調用的,在模板中調用后會渲染成HTML。假設視圖函數把一個NameForm 實例通過參數form 傳入模板,在模板中可以生成一個簡單的表單,如下所示:
<form method="POST"> {{ form.hidden_tag() }} {{ form.name.label }} {{ form.name() }} {{ form.submit() }} </form>
當然,這個表單還很簡陋。要想改進表單的外觀,可以把參數傳入渲染字段的函數,傳入的參數會被轉換成字段的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 渲染Falsk-WTF 表單對象的輔助函數。wtf.quick_form() 函數的參數為Flask-WTF 表單對象,使用Bootstrap 的默認
樣式渲染傳入的表單。hello.py 的完整模板如一下示例:
{% extends "base.html" %} {% import "bootstrap/wtf.html"as wtf %} {% block title %}Flask{% endblock %} {% block page_content %} <div> <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, Stranger!”。內容區的第二部分使用wtf.quick_form() 函數渲染NameForm 對象。