我的理解是Flask-WTF与html文件的关系就如同SQLAlchemy与数据库之间的关系

通过python Form类,生成html代码,并在html模板文件中通过{{}}变量的方式引用这些生成的html代码

好处就是可以使用python类管理html的表单,而不需要自己去敲html代码

下载依赖:

flask-wtf

flask的处理机制:

  • 定义WTForms表单类
  • 输出HTML代码
  • 在模板中渲染表单

实例:

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
{{form.csrf_token}}
{{form.username.label}}{{form.username}}<br>
{{form.password.label}}{{form.password}}<br>
{{form.remember}}{{form.remember.label}}<br>
{{form.submit}}<br>
</form>
</body>
</html>

forms.py

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')

app.py

from flask import  Flask,render_template
from demo1.form.forms import LoginForm app = Flask(__name__)
app.secret_key='secret string' @app.route('/basic')
def basic():
form = LoginForm()
return render_template('basic.html',form=form) if __name__=='__main__':
app.run(debug=True)

效果: 

 知识扩展:

在创建HTML表单时,我们经常会需要使用HTML<input>元素的其他属性来对字段进行设置。比如添加class属性设置对应的CSS类为字段添加样式;

添加placeholder属性设置占位文本。默认情况下,WTForms输出的字段HTML代码只会包含id和name属性,属性值均为表单类中对应的字段属性名称。

如果要添加额外的属性,通常有两种方法。

1.使用render_kw属性

username = StringField('Username', render_kw={'placeholder':'Your Username'})

这个字段被调用后输出的HTML代码如下所示:

<input type="text" id ="username" name="username" placeholder="Your Username">

2.在调用字段时传入

在调用字段属性时,通过添加括号使用关键字参数的形式也可以传入字段额外的HTML属性:

form.username(style='width:200px;',class_='bar')

输出的HTML代码如下所示:

u'<input class="bar" id="username" name="username" style=""width:200px;" type="text">

注意:

class是Python的保留关键字,在这里我们使用class_来代替class,渲染后的<input>会获得正确的class属性,在模板中调用时

则可以直接使用class

通过上面的方法也可以修改id和name的属性,但表单被提交后,WTForms需要通过name属性来获取对应的数据,所以不能

修改name属性值。

修改后的forms.py

    username=StringField('Username',render_kw={'placeholder':'Your Username'},validators=[DataRequired()])

修改后的basic.html

<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>BootStrap Style Form</h1>
<dov class="container" >
<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-control')}}
</div>
<div class="form-check">
{{form.remember(class='form-check-input')}}
{{form.remember.label}}
</div>
{{form.submit(class='btn bth-primary')}}
</form>
</dov>
</body>
</html>

效果: 

【flask】使用Flask-WTF处理表单的更多相关文章

  1. Flask开发系列之Web表单

    Flask开发系列之Web表单 简单示例 from flask import Flask, request, render_template app = Flask(__name__) @app.ro ...

  2. flask 在模板中渲染表单

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

  3. flask插件系列之Flask-WTF表单

    flask_wtf是flask框架的表单验证模块,可以很方便生成表单,也可以当做json数据交互的验证工具,支持热插拔. 安装 pip install Flask-WTF Flask-WTF其实是对w ...

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

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

  5. flask 单个页面多个表单(单视图处理、多视图处理)

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

  6. flask实战-个人博客-表单

    表单 下面我们来编写所有表单类,personalBlog中主要包含下面这些表单: 登录表单: 文章表单: 评论表单: 博客设置表单: 这里仅介绍登录表单.文章表单.分类表单和评论表单,其他的表单在实现 ...

  7. 【Flask】 WTForm表单编程

    WTForm表单编程 在网页中,为了和用户进行信息交互总是不得不出现一些表单.flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据.WTForm中最重要的几个概念如下: Fo ...

  8. flask表单,orm,csrf

    flask表单是flask中最基本的功能. 它是负责HTML页面中数据采集的部分,它由三部分组成:表单标签,表单域,表单按钮组成,通过表单用户输入的数据提交给服务器. flask表单封装了WTForm ...

  9. Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器

    from flask import Flask from flask import request from flask import render_template from flask_wtf i ...

随机推荐

  1. 树莓派wifi环境下初始化及环境配置

    在此放一下我的系统 链接:https://pan.baidu.com/s/192cL6qSsMd-wqxHeDWfIug 提取码:0lrq 1.准备一张内存卡,最好是32G class10 16G的话 ...

  2. Delphi SpeedButton组件

  3. 14、Nginx四层负载均衡

    1.Nginx四层负载均衡基本概述 1.1.什么是四层负载均衡 四层负载均衡基于传输层协议包来封装的(如:TCP/IP),那我们前面使用到的七层是指的应用层,它的组装在四层基础之上,无论四层还是七层都 ...

  4. iscsi原理

    iscsi原理 一,[名词解释] SCSI:小型计算机系统接口,SCSI作为i输入/输出接口, FC:光纤通道 DAS:直连式存储,指将存储设备通过SCSI接口或光纤通道直接连到一台计算机上. NAS ...

  5. Balancing Act POJ - 1655 (树的重心)

    Consider a tree T with N (1 <= N <= 20,000) nodes numbered 1...N. Deleting any node from the t ...

  6. 【AGC006 C】Rabbit Exercise

    题意 有 \(n\) 只兔子在数轴上,第 \(i\) 只兔子的初始坐标为整数 \(x_i\). 现在这些兔子会按照下面的规则做体操.每一轮体操都由 \(m\) 次跳跃组成:在第 \(j\) 次跳跃时, ...

  7. 同步windows时间到linux服务器

    输入date -R 查看系统时间 输入命令  ntpdate time.windows.com 同步windows时间到linux

  8. poi导出excel数据量过大

    问题:使用poi导出excel,数据量过大导致内存溢出 解决思路:1.多sheet导出 2.生成多个excel打包下载 3.生成csv下载 本文使用的是第二个思路,代码如下: poiUtil工具类 p ...

  9. selenium-Xpath使用方法

    01:什么是Xpath Xpath是一门xml文档中查找信息的语言,Xpath可用来在xml文档中对元素和属性进行遍历,主流的浏览器都支持xpath,因为HTML页面在DOM中表示xhtml文档 xp ...

  10. css文件分类

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...