Web 表单是 Web 应用程序的基本功能,它是 HTML 页面中负责数据采集的部件。通常情况下,表单有三个 部分组成,分别是表单标签、表单域、表单按钮。表单允许用户输入数据,负责HTML 页面数据采集,通过表单 将用户输入的数据提交给服务器。 实际上,要让模板动态呈现表单数据,可使用 request.form 属性传递数据过来即可。
创建 py文件
# 引入Flask
from flask import Flask, render_template, request
# 创建Flask实例
app = Flask(__name__)
app.debug = True
@app.route('/logintest/')
def login_test():
return render_template("login_test.html")
@app.route('/handle/', methods=['POST'])
def handle():
# form 表单信息
form_results = request.form
# 显示
name = form_results.get('name')
age = form_results.get('age')
pro = form_results.get('pro')
description = form_results.get('description')
# 数据
results = {
'姓名': name,
'年龄': age,
'程序成绩': pro,
'自我评价': description,
}
return render_template("results.html", results=results)
if __name__ == '__main__':
# 在测试环境下开启服务
app.run()
在 templates目录下创建对应的两个html文件:
login_test.html results.html
login_test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录测试</title>
</head>
<body>
<h1>表单显示</h1>
{# action="handle" 意思是从路由访问这个函数 #}
{# 注意这个 /handle/ 要跟路由保持一致,斜杠也要对应上否则会出错 #}
<form method="post" action="/handle/">
<p>姓名:<input type="text" name="name" ></p>
<p>年龄:<input type="number" name="age"></p>
<p>编程成绩:<input type="number" name="pro"></p>
<p>自我评价:<textarea name="description" ></textarea> </p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
results.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示结果</title>
</head>
<body>
<h1>结果</h1>
<table border="1">
{% for key,value in results.items() %}
<tr>
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
现在查看结果:
提交之后立马跳转
![](https://i-blog.csdnimg.cn/blog_migrate/febd87b9b308bc9343e2dda5c1f3f2c3.png)
还需特别注意的是,使用 Flask-WTF 库时,必须要配置参数 SECRET_KEY 属性。当设定好了 SECRET_KEY 后,可用来生成加密令牌,当 CSRF 激活时,该设置会根据设置的密匙生成加密令牌。
*使用 Flask-WTF 实现表单
对于 Flask-WTF 扩展库,可以定义模型,此时需要继承自 Form 基类,需从 flask.ext.wtf 中导入,且字段和验 证函数可以直接从 WTForms 包中导入。此处,因 Flask 与 werkzeug 的兼容性问题,因此要安装 werkzeug pip install werkzeug==0.16.0
用一个简单案例来实现表单,功能有输入用户名、输入密码与确认密码,以及提交按钮
新建一个py文件,注意py名不要为flask_wtf,否则会出现库名文件名相同导致执行不成功
# 引入Flask
from flask import Flask, render_template, request, flash
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, PasswordField
from wtforms.validators import DataRequired, EqualTo
# 创建Flask实例
app = Flask(__name__)
app.debug = True
# 密钥
app.config["SECRET_KEY"] = "123abchello"
class LoginForm(FlaskForm):
# 用户名
username = StringField(label=u'用户名', validators=[DataRequired()])
# 密码
password = PasswordField(label=u"密码", validators=[DataRequired()])
# 确认密码
repwd = PasswordField(label=u'确认密码', validators=[DataRequired(), EqualTo("password", "两次密码输入不一致")])
# 提交
submit = SubmitField(label=u"提交")
@app.route("/index/")
def index():
post_form = LoginForm()
return render_template("wtf_index.html", form=post_form)
@app.route("/login/", methods=["GET", "POST"])
def login():
if request.method == "POST":
post_form = LoginForm()
if post_form.validate_on_submit():
name = post_form.username.data
password = post_form.password.data
repwd = post_form.repwd.data
print("姓名:", name)
print("密码:", password)
print("确认密码:", repwd)
flash(f"欢迎{name}")
else:
flash("信息有误,请重新输入!")
return render_template("wtf_hello.html", form=post_form)
if __name__ == '__main__':
# 在测试环境下开启服务
app.run()
在 templates目录下创建对应的两个html文件:wtf_index.html wtf_hello.html
wtf_index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wtf_login</title>
</head>
<body>
<h1>登录表单</h1>
<form method="post" action="/login/">
{{ form.csrf_token() }}
<p><b>{{ form.username.label }}</b>{{ form.username }}</p>
<p><b>{{ form.password.label }}</b>{{ form.password }}</p>
<p><b>{{ form.repwd.label }}</b>{{ form.repwd }}</p>
<p><b>{{ form.submit() }}</b></p>
{% for msg in get_flashed_messages() %}
{{ msg }}
{% endfor %}
</form>
</body>
</html>
wtf_hello.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你好\(@^0^@)/你好</title>
</head>
<body>
{% for msg in get_flashed_messages() %}
<h1>{{ msg }}</h1>
{% endfor %}
</body>
</html>
运行上述程序,在地址栏输入 http://127.0.0.1:5000/index 后,效果如下
输入密码正确就会自动跳转页面
错误则显示