Flask Web 极简教程(四)- Flask WTF Froms(Part A)

简介: Flask Web 极简教程(四)- Flask WTF Froms(Part A)

一、表单

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

  • 表单标签:这里面包含了处理表单数据所用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

4316b311224046cc8f047359b0c6d07d_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

表单渲染成功,但是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

image.png

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

image.png

表单模型的字段类型

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

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


相关文章
|
20天前
|
Python
python3之flask快速入门教程Demo
python3之flask快速入门教程Demo
38 6
|
20天前
|
开发框架 数据库 开发者
Web开发新境界:用Python玩转Django和Flask!
【6月更文挑战第12天】Python的Web开发框架Django和Flask各有千秋。Django是全能型框架,适合快速开发大型应用,提供ORM、模板引擎、URL路由和后台管理等全面功能。Flask则轻量级且灵活,适用于小型到中型应用,以其简单易用、高度可扩展和灵活路由著称。两者结合使用,能应对各种Web开发需求。
|
14天前
|
关系型数据库 MySQL 数据库
如何使用Python的Flask框架来构建一个简单的Web应用
如何使用Python的Flask框架来构建一个简单的Web应用
27 0
|
6天前
|
JavaScript 程序员 应用服务中间件
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
21 7
|
6天前
|
XML 存储 JavaScript
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
19 5
|
13天前
|
开发框架 开发者 Python
使用 Flask 为 Web 应用添加路由
通过学习 Flask 中的视图函数和路由规则,你可以使用 Flask 构建强大的 Web 应用程序并为其添加功能。在 Flask 中,视图函数以 Python 函数的形式定义,每个视图函数都与一个 URL 相关联。在 Flask 中,URL 处理程序被称为视图函数,它们用于响应客户端请求并返回响应。在 Flask 应用程序中,这是可选的。在这里,我们将其命名为 'hello',并将其与 URL '/hello/<name>' 绑定在一起。在上面的示例中,我们使用了默认的视图函数名称 'hello'。
15 2
|
20天前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
18 3
|
27天前
|
SQL 前端开发 关系型数据库
28. Python Web 编程:Django 基础教程
28. Python Web 编程:Django 基础教程
22 2
|
6天前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
28天前
|
API 数据库 数据库管理
Flask Web开发基础:数据库与ORM实战
该文介绍了如何使用 Flask、SQLAlchemy 和 SQLite 实现数据库操作。首先,通过创建虚拟环境和安装 flask-sqlalchemy(版本2.5.1)及 sqlalchemy(版本1.4.47)来设置环境。接着,配置数据库URI,定义User和Movie模型类表示数据库表,并通过db.create_all()创建表。文章还展示了如何插入、查询、更新和删除记录,强调了db.session.commit()在保存更改中的关键作用。查询涉及filter、order_by等方法,提供了一系列示例。
305 1