Flask Form 多个数据|极客笔记

Flask Form 多个数据

在Web开发中，表单是非常常见的一种交互方式，用户可以通过表单向服务器提交数据。在Flask框架中，我们可以使用Flask-WTF扩展来处理表单的验证和提交。本文将详细介绍如何在Flask中处理多个数据的表单提交。

安装 Flask 及 Flask-WTF

在开始之前，我们需要先安装Flask和Flask-WTF库。可以通过以下命令来安装：

pip install Flask Flask-WTF

创建 Flask 应用

首先，我们需要创建一个简单的Flask应用，并配置一些基本的设置。在项目目录下创建一个名为app.py的文件，并添加以下内容：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'

class MyForm(FlaskForm):
    name = StringField('Name')
    email = StringField('Email')
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        name = form.name.data
        email = form.email.data
        return f'Name: {name}, Email: {email}'
    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

在上面的代码中，我们创建了一个MyForm类，该类包含两个字段：name和email，以及一个提交按钮。index函数用于处理表单的提交，当用户提交表单时，会将用户输入的姓名和邮箱地址展示在页面上。

创建 HTML 模板

接下来，我们需要创建一个HTML模板来渲染表单。在项目目录下创建一个名为templates的文件夹，并在其中创建一个名为index.html的文件，添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Form</title>
</head>
<body>
    <h1>Flask Form</h1>
    <form method="POST" action="/">
        {{ form.hidden_tag() }}
        <p>
            {{ form.name.label }}
            {{ form.name }}
        </p>
        <p>
            {{ form.email.label }}
            {{ form.email }}
        </p>
        <p>
            {{ form.submit }}
        </p>
    </form>
</body>
</html>

在上面的代码中，我们使用Flask-WTF提供的模板渲染标签{{ form.hidden_tag() }}来生成表单所需的隐藏字段，以及对应的姓名、邮箱字段。

运行应用

现在我们可以运行Flask应用，并在浏览器中访问http://127.0.0.1:5000来查看效果。填写表单并点击提交按钮后，页面将展示您输入的姓名和邮箱信息。

python app.py

提交多个数据

有时候，我们可能需要在表单中提交多个数据，例如一个包含姓名、邮箱、电话等多个字段的表单。在Flask中处理多个数据的表单和处理单个数据的表单并无太大区别，只需在MyForm类中添加对应的字段即可。

class MyForm(FlaskForm):
    name = StringField('Name')
    email = StringField('Email')
    phone = StringField('Phone')
    submit = SubmitField('Submit')

在HTML模板中也对应添加对应的标签即可：

<p>
    {{ form.phone.label }}
    {{ form.phone }}
</p>

通过以上方式，我们可以很方便地处理多个数据的表单提交。

总结

本文介绍了如何在Flask中处理多个数据的表单提交。通过Flask-WTF扩展，我们可以轻松地验证用户输入并获取用户提交的数据。当需求升级到需要更多字段的表单时，也可以很方便地添加多个字段。

Flask Form 多个数据