Question

下一步是将表单添加到 HTML 模板以便渲染到网页上。 令人高兴的是在 LoginForm 类中定义的字段支持自渲染为 HTML 元素，所以这个任务相当简单。 我将把登录模板存储在文件 app/templates/login.html 中，代码如下：

{% extends "base.html" %}

{% block content %}
    <h1>Sign In</h1>
    <form action="" method="post">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}
        </p>
        <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

一如 第二章 ，在这个模板中我再次使用了 extends 来继承 base.html 基础模板。事实上，我将会对所有的模板继承基础模板，以保持顶部导航栏风格统一。

这个模板需要一个 form 参数的传入到渲染模板的函数中，form 来自于 LoginForm 类的实例化，不过我现在还没有编写它。

HTML <form> 元素被用作 Web 表单的容器。 表单的 action 属性告诉浏览器在提交用户在表单中输入的信息时应该请求的 URL。 当 action 设置为空字符串时，表单将被提交给当前地址栏中的 URL，即当前页面。 method 属性指定了将表单提交给服务器时应该使用的 HTTP 请求方法。 默认情况下是用 GET 请求发送，但几乎在所有情况下，使用 POST 请求会提供更好的用户体验，因为这种类型的请求可以在请求的主体中提交表单数据， GET 请求将表单字段添加到 URL，会使浏览器地址栏变得混乱。

form.hidden_tag() 模板参数生成了一个隐藏字段，其中包含一个用于保护表单免受 CSRF 攻击的 token 。 对于保护表单，你需要做的所有事情就是在模板中包括这个隐藏的字段，并在 Flask 配置中定义 SECRET_KEY 变量，Flask-WTF 会完成剩下的工作。

如果你以前编写过 HTML Web 表单，那么你会发现一个奇怪的现象——在此模板中没有 HTML 表单元素，这是因为表单的字段对象的在渲染时会自动转化为 HTML 元素。 我只需在需要字段标签的地方加上 {{ form.<field_name>.label }} ，需要这个字段的地方加上 {{ form.<field_name>() }} 。 对于需要附加 HTML 属性的字段，可以作为关键字参数传递到函数中。 此模板中的 username 和 password 字段将 size 作为参数，将其作为属性添加到 <input> HTML 元素中。 你页也可以通过这种手段为表单字段设置 class 和 id 属性。