Flask Web 极简教程(四)- Flask WTF Froms_思维新观察的博客-程序员宝宝

技术标签: 大数据  

一、表单

表单在页面中主要负责数据采集,一个表单有三个基本组成部分:

  • 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 
  • 表单域:包含了文本框密码框、隐藏域多行文本框、复选框单选框下拉选择框和文件上传框等。
  • 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作

常见的表单有注册表单、登录表单、搜索表单等

视图函数中获取表单数据的方式有两种:

  • GET请求提交的表单:request.args.get('name', None)
  • POST请求提交的表单:request.from.get('age', None)

二、WTF表单

WTF 表单是一个第三方的库,可以通过Python代码生成表单,而Flask-WTF则是Flask集成了WTF表单功能的实现。

Flask-WTF可以实现这些功能,

  • 集成 wtforms。
  • 带有 csrf 令牌的安全表单。
  • 全局的 csrf 保护。
  • 支持验证码(Recaptcha)。
  • 与 Flask-Uploads 一起支持文件上传。
  • 国际化集成。

更多信息可以查看 Flask-WTF 官网。Flask-WTF需要通过安装才可以使用。

pip3 install Flask-WTF

在Pycharm中创建新的Flask项目flask-wtf,要使用Flask-WTF需要在app.py中创建Flask对象之后添加如下配置,

# 配置WTF的CSRF,Value可以是任意的字符串
app.config['WTF_CSRF_SECRET_KEY'] = 'abc21231fafae2'

第一个表单模型

在项目目录下新建一个form.py文件,专门用来编写表单模型,以登录表单为例,新增一个LoginForm对象,并增加相应的属性

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField


class LoginForm(FlaskForm):
    username = StringField(label='用户名')
    password = PasswordField(label='密码')
    submit = SubmitField(label='提交')

表单字段的常用核心属性如下

属性名 属性作用
label form表单中的label标签,如输入框前的文字描述
default 表单中输入框的默认值
validators 表单验证规则
widget 定制界面的显示方式
description 帮助文字

在app.py中增加视图函数

from flask import Flask, render_template
from form import LoginForm

@app.route('/form')
def form():
    login_form = LoginForm()
    # 返回login_form表单模型,在form.html中进行渲染
    return render_template('form.html', login_form=login_form)

在templates增加form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Form</title>
</head>
<body>
<h3>登录</h3>
<form action="">
    {# 渲染LoginForm表单模型中username字段的label属性#}
    {
   { login_form.username.label }}:
    {
   { login_form.username }} <br>
    {
   { login_form.password.label }}:
    {
   { login_form.password }} <br>
    {
   { login_form.submit }}
</form>
</body>
</html>

启动应用,浏览器访问 http://127.0.0.1:5000/form

表单渲染成功,但是input输入框是空白的,可以通过表单模型中字段的default属性来设置默认值

# 其余代码不变

class LoginForm(FlaskForm):
    username = StringField(label='用户名', default='stark')
    password = PasswordField(label='密码', default='1231231')
    submit = SubmitField(label='提交')

再次访问 http://127.0.0.1:5000/form

用户名字段类型是StringField并且显示了设置的默认值,密码是PasswordField类型,虽然设置了默认值,但是是不能显示的。在表单中的用户名和密码输入框中输入数据

可以看出密码是非明文显示的

表单模型的字段类型

在第一个表单模型中使用了两个字段类型,分别是StringField和PasswordField,并且在页面输入密码是也能够将密码以非明文的形式显示,除了这两个类型外还有其他的字段类型,

  • 文本/字符串相关类型
    • StringField,字符串输入
    • PasswordField,密码输入
    • TextAreaField,长文本输入
    • HiddenField,隐藏表单域
  • 数值类型既整数和小数相关类型
    • FloadField,浮点数输入
    • IntegerField,整数输入
    • DecimalField,精确小数输入
  • 单选多选等选择相关类型
    • RadioField,radio单选
    • SelectField,下拉单选
    • SelectMultipleField,下拉多选
    • BooleanField,勾选
  • 日期时间相关类型
    • DateField,日期选择
    • DateTimeField,日期时间选择
  • 文件上传相关类型
    • FileField,文件单选
    • MultipleFileField,文件多选
  • 其他类型
    • SubmitField,提交表单按钮
    • FieldList,自定义的表单选择列表
    • FormField,自定义多个字段构成的选项

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fzlhz/article/details/125553337

智能推荐

将长度为n的绳子分为m段求各段乘积的最大值_SlowIsFastLemon的博客-程序员宝宝_长度n剪成m段

文章目录1 将长度为n的绳子分为m段求各段乘积的最大值1.1 题目描述1.2 动态规划法解题1.3 贪心法求解1 将长度为n的绳子分为m段求各段乘积的最大值1.1 题目描述给你一根长度为 n 的绳子,请把绳子剪成 m 段 (m 和 n 都是整数,n&gt;1 并且 m&gt;1)每断绳子的长度记为 k[0],k[1],…,k[m].请问 k[0] k[1]…*k[m]可能的最大乘积是多少?1.2 动态规划法解题动态规划法:看题目就知道这玩意要用动态规划实现,可是就是不知道状态转移方程如何推导出

SharpDevelop源码分析 (三、插件系统)_heyubingzju的博客-程序员宝宝

三、插件系统   上回书说到SharpDevelop入口Main函数的结构,ServiceManager.Service在 InitializeServicesSubsystem方法中首次调用了AddInTreeSingleton的AddInTree实例, AddInTree在这里进行了初始化。本回进入AddInTree着重讲述SharpDevelop的插件系统。在叙述的时候为了方便起见,对于

Python语法糖自己总结!(try,with,装饰器)_QinZheng7575的博客-程序员宝宝_python with try

title: Python深入探究(三)一些小语法糖sticky: 3top_img:keywords: “Python,高级语言”cover: https://qinzheng7575-1.oss-cn-beijing.aliyuncs.com/pystudy/3.pngdescription: 参考《Python cookbook》abbrlink: 46be9372copyright_author: 秦政copyright_author_href: https://qinzheng7.

第四课jz2400裸板开发之按键_乱世半仙的博客-程序员宝宝

一、原理图及芯片手册分析开发板一共有四个按键 s2 s3 s4 s5,我们今天使用s2来进行开发测试。1.原理图分析由原理图可以看到,三个EINT0标号相连,按键未按下时,GFP0引脚外接3.3V,为高电平,当按键按下后,与地相连,为低电平。所以我么你可以设置GFP0引脚为输入模式,通过读取GPF0引脚的电平来判断按键是否按下,当为低电平的时候,表示按键按下。2.分析芯片手册我们打开芯片手册,找到GPF0引脚如图:看芯片手册知道我们要设置GPFCON寄存器[1:0]位为00,由于这里默认

在vscode中对Node.js进行debug_Z-Juln的博客-程序员宝宝

先记住哪个是启动文件2. 点击这个再点击这个3. 点击这个4. 点击这个5. vscode会自动帮你创建出launch.json的debug配置文件其中四个属性是最重要的, type, request, name 和 programtype是语言的类型, 如PHP, Java, Node.js等request是debug的类型, vscode中有两种debug类型, launch 和 attach, 我们只需要知道launch这种类型就够了name是配置名, 用于区分不同的配置prog..

C#基础巩固与进阶(定时语音播报+PDF水印+分片上传+EF6框架)_程序员ken的博客-程序员宝宝_wpf 分片上传

学习了C#编程语法,便需要一些小项目巩固基础,官方文档加上可靠的思维,是软件制造的第一步。本视频的小功能,在生活日常中应用也比较广泛。比如语音功能能否给饭店提供上菜播报?pdf添加水印能否给自媒体作者提供便利?分片上传能否快速解决用户网络差导致大文件上传失败的的问题?

随便推点

UITabBarItem设置selectedImage无效解决_DanielYQ的博客-程序员宝宝

在storyboard里面使用了UITabBarController,设置了tabBarItem的选中图片,但是无效,在代码中设置也是。 解决:在tabBarItem对应的viewController代码设置一下选中图片以及对应的渲染方式为UIImageRenderingModeAlwaysOriginal: [self.tabBarItem setImage:[UIImage imageName

1024 程序员节_丶无尘的博客-程序员宝宝

In memory of October 24th, 2021.

【Linux驱动编程】Linux字符驱动之sysfs接口实现_Acuity.的博客-程序员宝宝

1. sysfs1.1 前言  在linux系统中,用户空间访问驱动程序一般是以“设备文件”的方式通过“read/write/ioctl”访问,但这种方式有几个明显的缺点。read/write接口功能是单一。ioctl虽然可以根据cmd参数实现多重功能,但它们都无法直接在shell/mash脚本中直接调用,必须通过C语言方式访问。ioctl二进制数据接口存在大小端问题,不同平台CPU...

linux安装40g网卡,一种实现Chelsio40G网卡性能调优的方法_weixin_39577289的博客-程序员宝宝

一种实现Chelsio40G网卡性能调优的方法【技术领域:】[0001]本发明涉及计算机技术,具体地说是一种实现Chels140G网卡性能调优的方法。【背景技术:】[0002]随着目前测试技术的不断发展,各种测试工具、测试软件及方法被越来越多的应用于服务器产品及各种部件的测试。[0003]通常进行测试网卡过程中,都会遇见一些网卡的测试性能与理论性能相差甚远的情况,发生这种情况的原因各有不同。整体而...

TCP/IP协议学习记录之二十七:RTP和RTMP_小小柴的博客-程序员宝宝_rtp和rtmp

    以上两个协议和多媒体传输有关,所以今天特地来学习学习;转载自https://www.cnblogs.com/yoyotl/p/5650101.htmlhttps://www.cnblogs.com/lidabo/p/7233154.htmlRTP:   RTP全称是Real- time Transport Protocol(实时传输协议),是在Internet上处理多媒..._1671465600

axure element ui素材_【Axure分享】基于Element UI的Axure Web组件_凌晚晴的博客-程序员宝宝

有一段时间没做过产品原型了,前一阵有一个web产品需要做原型,正好在搞前端,于是顺便把Element UI移植到Axure上,基本上实现了大部分的功能组件,部分过于繁琐的组件未实现。自己觉得蛮满意的,投稿到某两个知名的Axure平台,居然回复我类似的东西过多,暂时不接收了,Excuse me?多了不挺好的么,让新同学也有的选择,多好的。后来才发现,我还是太年轻,因为他们是收费的........好吧...

推荐文章

热门文章

相关标签