表单处理Flask-WTF(三)

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