在模板中渲染表单
为了能够在模板中渲染表单，我们需要把表单类实例传入模板。首先在视图函数里实例化表单类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> © 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 在模板中渲染表单的更多相关文章
-
flask 在模板中渲染错误消息
在模板中渲染错误消息 如果form.valicate_on_submit()返回False,说明验证没有通过,对于没有验证通过的字段,WTForms会把错误信息添加到表单类的errors属性中,这是一 ...
-
[Flask]通过render_form快捷渲染表单
依赖: Bootstrap-Flask 实例化方式与flask_bootstrap相同. 关于render_form(): Bootstrap-Flask内置了两个用于渲染WTForms表单类的宏,r ...
-
flask 使用宏渲染表单（包含错误信息）
在模板中渲染表单时,有大量的工作: 1.调用字段属性,获取<input>定义 2.调用对应的label属性,获取<label>定义 3.渲染错误消息 为了避免为每一个字段重复这 ...
-
【flask】使用Flask-WTF处理表单
我的理解是Flask-WTF与html文件的关系就如同SQLAlchemy与数据库之间的关系. 通过python Form类,生成html代码,并在html模板文件中通过{{}}变量的方式引用这些生 ...
-
Django中的表单
目录 表单 Django中的表单 用表单验证数据 自定义验证 表单 HTML中的表单是用来提交数据给服务器的,不管后台服务器用的是 Django 还是 PHP还是JSP还是其他语言.只要把 inpu ...
-
Flask--（一对多）模型渲染表单数据
模型建立一一对多模型: 多表添加外键,建立两张表之间的关系 一表关联多表的属性,可以方便快速访问多表的数据 模板一层循环渲染一表数据,二层循环渲染多表的数据 代码展示: from flask impo ...
-
Flask - WTF和WTForms创建表单
目录 Flask - WTF和WTForms创建表单 一. Flask-WTF 1.创建基础表单 2.CSRF保护 3.验证表单 4.文件上传 5.验证码 二. WTForms 1. field字段 ...
-
flask 单个页面多个表单（单视图处理、多视图处理）
单个页面多个表单 除了在单个表单上实现多个提交按钮,有时还需要在单个页面上创建多个表单.比如,在程序的主页上同时添加登录和注册表单.当在同一个页面上添加多个表单时,我们需要解决的问题是在视图函数中判断 ...
-
flask用宏渲染表单模板时，表单提交后，如果form.validate_on_submit()返回的是false的可能原因
flask用宏渲染表单模板时,表单提交后,提交的内容符合DataRequired()校验, 但是form.validate_on_submit()返回的是False, 原因可能是表单模板中的<f ...
随机推荐
-
java的四种引用，强弱软虚
1.利用软引用和弱引用解决OOM问题:用一个HashMap来保存图片的路径和相应图片对象关联的软引用之间的映射关系,在内存不足时,JVM会自动回收这些缓存图片对象所占用的空间,从而有效地避免了OOM的 ...
-
ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表)
6月27日京东商城发布了中国电子商务领域首张电子发票,同时宣布相关系统正式上线,这标志着中国电子商务的步伐又向前迈出了重要的一步.目前“电子发票”覆盖的服务范围是在北京地区购买图书.音像商品的个人消费 ...
-
angularjs中关于当前路由再次点击强制刷新
angularjs中,有一个机制,就是当前路由再次点击的时候,不会再刷新页面,这实在是愁坏了包子,因为业务人员要求一定要刷新,于是我各种百度,然并卵....呜呜呜~~~~~ 于是乎,我就想到写指令了, ...
-
java io InputStream 转 byte
InputStream is ; ByteArrayOutputStream baos = new ByteArrayOutputStream(); byte[] b = new byte[1024] ...
-
JS 学习笔记--4---运算符
1.JS 中包含的运算符有:一元运算符.二元运算符.三元运算符.算术运算符.关系运算符.逻辑运算符.位运算符.赋值运算符.其他的运算符等. 2.表达式:简单来讲就是一句代码(分号隔开),解释器会把它翻 ...
-
转:Gulp使用指南
原文来自于:http://www.techug.com/gulp Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更 ...
-
C字符数组及其应用
1.字符数组和其他数值类型的数组的定义引用和初始化都是相同的. 特别注意的是: 在C语言中没有专门的字符串变量,通常用一个字符数组来存放一个字符串. \0'是由C编译系统自动加上的. 2. C语言允许 ...
-
OpenStack运维（三）：OpenStack存储节点和配置管理
1.对象存储节点维护 1.1 重启存储节点 如果一个存储节点需要重启,直接重启即可. 1.2 关闭存储节点 如果一个存储节点需要关闭很长一段时间,可以考虑将该节点从存储环中移除. swift-ring ...
-
python 日志
logger.conf 配置文件 #logger.conf ############################################### [loggers] keys=root,ex ...
-
阿里云CentOS 7.4 64位，jdk1.6、mysql5.7、tomcat6部署步骤（个人记录）
jdk1.6.mysql5.7.tomcat6部署步骤 一.安装jdk1.6 查看当前系统jdk的版本:java -version 方法一:利用yum源来安装jdk(此方法不需要配置环境变量) 查看y ...