在模板中渲染表单

为了能够在模板中渲染表单，我们需要把表单类实例传入模板。首先在视图函数里实例化表单类LoginForm，然后再render_template()函数中使用关键脑子参数form将表单实例传入模板，例如：form/app.py

#传入表单类实例

from forms import LoginForm

@app.route('/basic')

def basic():

    form=LoginForm()

    return render_template('login.html',form=form)
 

在模板中，需要调用表单类的属性即可获取字段对应的HTML代码，如果需要传入参数，也可以添加括号，如form/templates/basic.html：在模板中渲染表单

<form method="post">

    {{ form.csrf_token }}<!-- 渲染CSRF令牌隐藏字段 -->

    {{ form.username.label }}{{ form.username }}<br>

    {{ form.password.label }}{{ form.password }}<br>

    {{ form.remember }}{{ form.remember.label }}<br>

    {{ form.submit }}<br>

</form>

在上面的代码中，除了渲染各个字段的标签和字段本身，还调用了form.csrf_token属性渲染Flask-WTF为表单类自动创建的CSRF令牌字段。form.csrf_token字段包含了自动生成的CSRF令牌值，在提交表单后会自动被验证，为了确保表单通过验证，我们必须在表单中手动渲染这个字段。

Flask_WTF为表单类实例提供了一个form.hidden_tag()方法，这个方法会依次渲染表单中所有的隐藏字段。因为csrf_token字段也是隐藏字段，所有当这个方法被调用时也会渲染csrf_token字段。

渲染后获得的实际HTML代码如下：

<form method="post">

    <input id="csrf_token" name="csrf_token" type="hidden" value="ImE1M2QxNDEyNDA2YTE5NGI3NmU1NGY1M2U2ZDkxNjQ2NDc5NTI3ZjYi.XH0xaQ.RvNFnjwMfAiUyiv58pU2xJkQ42g"><!-- 渲染CSRF令牌隐藏字段 -->

    <label for="username">Username</label><input id="username" name="username" required type="text" value=""><br>

    <label for="password">Password</label><input id="password" name="password" required type="password" value=""><br>

    <input id="remember" name="remember" type="checkbox" value="y"><label for="remember">Remember me</label><br>

    <input id="submit" name="submit" type="submit" value="Log in"><br>

</form>

运行该程序，访问127.0.0.1:5000/basic可以看到渲染后的表单，页面中的表单和我们在上面使用HTML编写的表单相同

在前面介绍过，使用render_kw字典或是在调用字段时传入参数来定义字段的额外HTML属性，可以通过这种方式添加CSS类，我们编写一个Bootstrap风格的表单：

form/templates/bootstrap.html

{% extends 'base.html' %}

{% block styles %}

    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

{% endblock %}

{% block content %}

    <h1 class="display-4">Bootstrap Style Form</h1>

    <form method="post">

        {{ form.csrf_token }}

        <div class="form-group">

            {{ form.username.label }}

            {{ form.username(class='form-control') }}

        </div>

        <div class="form-group">

            {{ form.password.label }}

            {{ form.password(class='form-contrl') }}

        </div>

        <div class="form-check">

            {{ form.remember(class='form-check-input') }}

            {{ form.remember.label }}

        </div>

        {{ form.submit(class='btn btn-primary') }}

    <form/>

{% endblock content %}

页面上访问127.0.0.1:5000/bootstrap

base.html:

<!DOCTYPE html>

<html lang="en">

<head>

    {% block head %}

        {% block metas %}

            <meta charset="utf-8">

        {% endblock metas %}

        <title>

            {% block title %}

                Form - HelloFlask

            {% endblock title %}

        </title>

        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='favicon.ico') }}">

        {% block styles %}

            <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

        {% endblock styles %}

    {% endblock head %}

</head>

<body>

<nav>

    {% block nav %}

        <ul>

            <li><a href="{{ url_for('basic') }}">Home</a></li>

        </ul>

    {% endblock %}

</nav>

<main>

    {% for message in get_flashed_messages() %}

        <div class="alert">

            {{ message }}

        </div>

    {% endfor %}

    {% block content %}{% endblock %}

</main>

<footer>

    {% block footer %}

        <small> &copy; 2019 <a href="https://www.cnblogs.com/xiaxiaoxu/" title="xiaxiaoxu's blog">夏晓旭的博客</a> /

            <a href="https://github.com/xiaxiaoxu/hybridDrivenTestFramework" title="Contact me on GitHub">GitHub</a> /

            <a href="http://helloflask.com" title="A HelloFlask project">Learning from GreyLi's HelloFlask</a>

        </small>

    {% endblock %}

</footer>

{% block scripts %}{% endblock %}

</body>

</html>

style.css文件：

body{

    margin:auto;

    width:750px;

}

img{

    max-width:710px;

}

nav ul{

    list-style-type:none;

    margin:;

    padding:;

    overflow:hidden;

    background-color:#333;

}

nav li{

    float:left;

}

nav li.a{

    display:block;

    color:white;

    text-align:center;

    padding:14px 16px;

    text-decoration:none;

}

h1{

    color:red;

    text-align:center;

    padding:14px 16px;

    text-decoration:none;

}

label{width:200px;display:inline-block;}

nav li a:hover{

    background-color:#111;

}

main{

    padding:10px 20px;

}

footer{

    font-size:13px;

    color:#888;

    border-top:1px solid #666;

    margin-top:25px;

    text-align:center;

    padding:10px;

}

.alert{

    position:relative;

    padding:0.75rem 1.25rem;

    margin-bottom:1rem;

    border:1px solid #b8daff;

    border-radius:0.25rem;

    color:#004085;

    background-color: #cce5ff;

}

.error{

    color:red;

}
 

app.py:

#encoding=utf-8

from flask import Flask,render_template,flash,redirect,url_for,session

import os

app = Flask(__name__)

app.secret_key = os.getenv('SECRET_KEY','secret string')

@app.route('/html',methods=['GET','POST'])

def html():

    return render_template('pure_html.html')

from forms import LoginForm

#传入表单类实例

@app.route('/basic')

def basic():

    form=LoginForm()

    return render_template('basic.html',form=form)

@app.route('/bootstrap',methods=['GET','POST'])

def bootstrap():

    form = LoginForm()

    if form.validate_on_submit():

        username = form.username.data

        flash('welcome home,%s!'% username)

        return redirect(url_for('basic'))

    return render_template('bootstrap.html', form=form)

if __name__ == '__main__':

    app.run(debug=True)
 

forms.py:

#encoding=utf-8

from flask_wtf import FlaskForm

from wtforms import StringField, PasswordField, BooleanField, SubmitField

from wtforms.validators import DataRequired, Length

class LoginForm(FlaskForm):

    username = StringField('Username', validators=[DataRequired()])

    password = PasswordField('Password', validators=[DataRequired(), Length(8, 128)])

    remember = BooleanField('Remember me')

    submit = SubmitField('Log in')

from flask import Flask,render_template,flash,redirect,url_for,session

import os

app = Flask(__name__)

app.secret_key = os.getenv('SECRET_KEY','secret string')

if __name__ == '__main__':

    app.run(debug=True)
如果想手动编写HTML表单的代码，需要注意表单字段的name属性值必须和表单类的字段名称相同，这样在提交表单时WTForms才能正确地获取数据并进行验证。

flask 在模板中渲染表单的更多相关文章

  1. flask 在模板中渲染错误消息

    在模板中渲染错误消息 如果form.valicate_on_submit()返回False,说明验证没有通过,对于没有验证通过的字段,WTForms会把错误信息添加到表单类的errors属性中,这是一 ...

  2. [Flask]通过render_form快捷渲染表单

    依赖: Bootstrap-Flask 实例化方式与flask_bootstrap相同. 关于render_form(): Bootstrap-Flask内置了两个用于渲染WTForms表单类的宏,r ...

  3. flask 使用宏渲染表单（包含错误信息）

    在模板中渲染表单时,有大量的工作: 1.调用字段属性,获取<input>定义 2.调用对应的label属性,获取<label>定义 3.渲染错误消息 为了避免为每一个字段重复这 ...

  4. 【flask】使用Flask-WTF处理表单

     我的理解是Flask-WTF与html文件的关系就如同SQLAlchemy与数据库之间的关系. 通过python Form类,生成html代码,并在html模板文件中通过{{}}变量的方式引用这些生 ...

  5. Django中的表单

    目录 表单 Django中的表单 用表单验证数据 自定义验证 表单 HTML中的表单是用来提交数据给服务器的,不管后台服务器用的是 Django  还是 PHP还是JSP还是其他语言.只要把 inpu ...

  6. Flask--（一对多）模型渲染表单数据

    模型建立一一对多模型: 多表添加外键,建立两张表之间的关系 一表关联多表的属性,可以方便快速访问多表的数据 模板一层循环渲染一表数据,二层循环渲染多表的数据 代码展示: from flask impo ...

  7. Flask - WTF和WTForms创建表单

    目录 Flask - WTF和WTForms创建表单 一. Flask-WTF 1.创建基础表单 2.CSRF保护 3.验证表单 4.文件上传 5.验证码 二. WTForms 1. field字段 ...

  8. flask 单个页面多个表单（单视图处理、多视图处理）

    单个页面多个表单 除了在单个表单上实现多个提交按钮,有时还需要在单个页面上创建多个表单.比如,在程序的主页上同时添加登录和注册表单.当在同一个页面上添加多个表单时,我们需要解决的问题是在视图函数中判断 ...

  9. flask用宏渲染表单模板时，表单提交后，如果form.validate_on_submit()返回的是false的可能原因

    flask用宏渲染表单模板时,表单提交后,提交的内容符合DataRequired()校验, 但是form.validate_on_submit()返回的是False, 原因可能是表单模板中的<f ...

随机推荐

  1. sed命令 windows与linux换行

    Linux的Bash命令中有一个sed操作,SSD的create_list.sh中有用到这个操作: 结合着下面这个解释: 也就是删除所有行里面的以VOC2007/Annotations/(这里的\代表 ...

  2. JavaScript深度克隆

    深度克隆函数: function deepClone(obj){ var str = ""; var newobj = obj.constructor === Array ? [] ...

  3. 【托业】【新托业TOEIC新题型真题】学习笔记11-题库六-P7

    1.scam [skæm] n.骗局; 诡计; <美俚>诓骗; 故事;vt.欺诈; 诓骗; 2.interpersonal adj.人与人之间的; 人际的; 人与人之间的关系的; 涉及人与 ...

  4. 更改配置：远程访问gitlab的postgresql数据库

    作为这篇文章的补充: 将gitlab中的postgresql数据库开通远程访问 https://www.cnblogs.com/andy9468/p/10609682.html 替代(二)中的2.3. ...

  5. linux 查看磁盘读写：iostat

    iostat命令用来查看磁盘IO的读写情况,用法如下: 安装iostat命令 [root@mysql ~]# yum install -y sysstat [root@mysql ~]# iostat ...

  6. 亚马逊IOT-SDK，线程池数

    1111

  7. [xdoj]1303jlz的刷题黑科技

    先分析复杂度,给的数据是1e5的,那么我们至少需要一个nlogn的算法才可以.由于答案是一个数字,首先想到是二分法(一般答案是一个数字都可以通过二分法来完成) 下面是思路: 1.可以完成题目的条件是, ...

  8. 7.C# 多态的实现

    C# 多态的实现 封装.继承.多态,面向对象的三大特性,前两项理解相对容易,但要理解多态,特别是深入的了解,对于初学者而言可能就会有一定困难了.我一直认为学习OO的最好方法就是结合实践,封装.继承在实 ...

  9. 制作正式版10.11 OS X El Capitan 安装U盘（优盘）

    一.准备工作:1.准备一个 8GB 或以上容量的 U 盘,确保里面的数据已经妥善备份好(该过程会抹掉 U 盘全部数据)2.从官网Appstore下载下来的 “安装 OS X El Capitan”,当 ...

  10. Anaconda 使用指南

    Anaconda 使用指南 参考文章: 致Python初学者:Anaconda入门使用指南 Anaconda使用总结 概述 很多学习python的初学者甚至学了有一段时间的人接触到anaconda或者 ...