Flask Web 极简教程(四)- Flask WTF Froms(Part A)
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第30天,点击查看活动详情
一、表单
表单在页面中主要负责数据采集,一个表单有三个基本组成部分:
- 表单标签:这里面包含了处理表单数据所用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,自定义多个字段构成的选项
相关文章
- OMI 在线互动教程上线,趣味学习 Web Components
- 下载和运行GitHub上的代码教程总结
- Java教程分享Java面向对象与面向过程[通俗易懂]
- 领养一只可爱的小真寻—绪山真寻Bot部署教程
- Photoshop CS2软件下载地址及安装教程--所有PS版本都有!
- EasyCVR平台基于GB28181协议的语音对讲配置操作教程
- 很火的AI绘图web网页源码附带接口教程
- pr2022中文版下载及详细安装教程
- Proguard使用最新,最全教程,亲自试验详解编程语言
- 构建未来:Linux 架构的Web 开发(linux架构web)
- Linux中创建文件夹的简易教程(linux下创建文件夹)
- 给你一个美观、安全的Web连接MySQL指南(web连接mysql)
- 给你的Web服务加上Linux强化保障(web服务linux)
- Oracle 教程:如何将两列合并至一列?(oracle把两列合并)
- Linux新版本发布,让你的Web项目发布更简单!(linux发布web项目)
- 管理MSSQL的好帮手:在线Web管理器来帮忙!(在线web管理mssql)
- Linux开发助力Web创新之路(linux开发 web)
- Web构建Redis连接简单而有效的实现方式(web 连接redis)
- Redis在Web开发中的光辉成就(web框架redis)
- Redis锁与控制技术实战教程(redis锁控制教程)
- 从零开始Redis连接池使用教程(redis连接池教程)
- Oracle Web访问企业无线界面新体验(oracle web访问)
- Oracle Web客户端让网络更加强大(oracle web客户端)
- 轻松学习XML教程
- IIS6.0安装与网站架设教程[图文]