处理表单和用户输入是 Web 开发的一个基本方面。 Flask 是 Python 中的轻量级 WSGI Web 应用程序框架，提供了多种工具来有效管理表单和用户输入。本博客将介绍 Flask 中处理表单的基础知识，从创建 HTML 表单到处理表单数据，并且我们将提供演示来说明这些概念。
安装 Flask
首先，确保您已安装 Flask。 您可以使用 pip 安装 Flask：
pip install Flask为您的项目创建一个新目录并导航到其中。然后，创建一个虚拟环境：
python -m venv venv
source venv/bin/activate # On Windows, use `venv\Scripts\activate`创建一个名为“app.py”的新文件并设置一个基本的 Flask 应用程序：
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def home():
return "Hello, Flask!"
if __name__ == "__main__":
app.run(debug=True)
运行您的 Flask 应用程序：
python app.py在浏览器中访问“http://127.0.0.1:5000/”即可查看基本的 Flask 应用程序正在运行。
演示 1：创建 HTML 表单
让我们创建一个 HTML 表单来捕获用户输入。创建一个名为“templates”的新目录并添加一个名为“form.html”的文件：
<!-- templates/form.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Input Form</title>
</head>
<body>
<h1>Enter Your Details</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>更新 `app.py` 以呈现此表单：
@app.route('/form')
def form():
return render_template('form.html')
现在，访问“http://127.0.0.1:5000/form”查看表单。
演示 2：处理表单提交
要处理表单提交，请创建一个处理表单数据的路由。更新 `app.py` 如下：
@app.route('/submit', methods=['POST'])
def submit():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
return f"Hello, {name}! Your email is {email}."该路由捕获通过 POST 请求发送的表单数据，并显示包含提交信息的简单响应。
演示 3：验证表单数据
表单验证对于确保收到的数据正确且安全至关重要。 Flask-WTF 是一个 Flask 扩展，可简化表单处理和验证。安装 Flask-WTF：
pip install Flask-WTF
创建一个名为“forms.py”的新文件来使用 Flask-WTF 定义表单：
# forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Email
class UserForm(FlaskForm):
name = StringField('Name', validators=[DataRequired()])
email = StringField('Email', validators=[DataRequired(), Email()])
submit = SubmitField('Submit')更新 `app.py` 以使用此形式：
from forms.py import UserForm
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
@app.route('/form', methods=['GET', 'POST'])
def form():
form = UserForm()
if form.validate_on_submit():
name = form.name.data
email = form.email.data
return redirect(url_for('success', name=name, email=email))
return render_template('form_wtf.html', form=form)
@app.route('/success')
def success():
name = request.args.get('name')
email = request.args.get('email')
return f"Hello, {name}! Your email is {email}."
创建一个新模板“form_wtf.html”来渲染 Flask-WTF 表单：
<!-- templates/form_wtf.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Input Form with Flask-WTF</title>
</head>
<body>
<h1>Enter Your Details</h1>
<form method="post">
{{ form.hidden_tag() }}
<p>
{{ form.name.label }}<br>
{{ form.name(size=32) }}<br>
{% for error in form.name.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>
{{ form.email.label }}<br>
{{ form.email(size=32) }}<br>
{% for error in form.email.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>{{ form.submit() }}</p>
</form>
</body>
</html>演示 4：处理文件上传
处理文件上传是 Web 应用程序的常见要求。 Flask 提供了有效管理文件上传的工具。
第 1 步：更新 `app.py` 以处理文件上传
from flask import Flask, render_template, request, redirect, url_for
import os
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'uploads/'
if not os.path.exists(app.config['UPLOAD_FOLDER']):
os.makedirs(app.config['UPLOAD_FOLDER'])
@app.route('/upload', methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
file = request.files['file']
if file:
file_path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
file.save(file_path)
return f'File {file.filename} uploaded successfully!'
return render_template('upload.html')
if __name__ == "__main__":
app.run(debug=True)步骤 2：创建 `upload.html` 模板
<!-- templates/upload.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
</head>
<body>
<h1>Upload a File</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"><br><br>
<input type="submit" value="Upload">
</form>
</body>
</html>演示 5：使用 Flask-WTF 进行 CSRF 保护
跨站点请求伪造 (CSRF) 保护对于 Web 应用程序至关重要。 Flask-WTF 提供简单的 CSRF 保护。
步骤 1：更新 `app.py` 以使用 Flask-WTF CSRF 保护
如果尚未安装 Flask-WTF：
pip install Flask-WTF
然后，更新`app.py`：
from flask_wtf.csrf import CSRFProtect
csrf = CSRFProtect(app)
app.config['SECRET_KEY'] = 'your_secret_key'
@app.route('/form', methods=['GET', 'POST'])
def form():
form = UserForm()
if form.validate_on_submit():
name = form.name.data
email = form.email.data
return redirect(url_for('success', name=name, email=email))
return render_template('form_wtf.html', form=form)
HTML模板中不需要进行任何更改，因为 Flask-WTF 的“form.hidden_tag()”已经包含 CSRF 令牌。
演示 6：使用 WTForms 的动态表单
有时您需要具有基于用户输入或其他条件的动态字段的表单。
第 1 步：在“forms.py”中创建动态表单
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, FieldList, FormField
from wtforms.validators import DataRequired
class AddressForm(FlaskForm):
street = StringField('Street', validators=[DataRequired()])
city = StringField('City', validators=[DataRequired()])
class DynamicForm(FlaskForm):
name = StringField('Name', validators=[DataRequired()])
addresses = FieldList(FormField(AddressForm), min_entries=1, max_entries=5)
submit = SubmitField('Submit')步骤 2：更新 `app.py` 以处理动态表单
from forms import DynamicForm, AddressForm
@app.route('/dynamic_form', methods=['GET', 'POST'])
def dynamic_form():
form = DynamicForm()
if form.validate_on_submit():
name = form.name.data
addresses = [(addr.street.data, addr.city.data) for addr in form.addresses]
return f"Name: {name}, Addresses: {addresses}"
return render_template('dynamic_form.html', form=form)步骤 3：创建 `dynamic_form.html` 模板
<!-- templates/dynamic_form.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Form</title>
</head>
<body>
<h1>Dynamic Form</h1>
<form method="post">
{{ form.hidden_tag() }}
<p>
{{ form.name.label }}<br>
{{ form.name(size=32) }}<br>
{% for error in form.name.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
{% for address in form.addresses %}
<p>
{{ address.street.label }}<br>
{{ address.street(size=32) }}<br>
{% for error in address.street.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>
{{ address.city.label }}<br>
{{ address.city(size=32) }}<br>
{% for error in address.city.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
{% endfor %}
<p>{{ form.submit() }}</p>
</form>
</body>
</html>演示 7：处理 JSON 数据
有时，您需要处理通过 AJAX 发送的 JSON 数据。
第 1 步：更新 `app.py` 以处理 JSON 数据
@app.route('/json', methods=['POST'])
def json_data():
data = request.json
name = data.get('name')
email = data.get('email')
return {'message': f'Hello, {name}! Your email is {email}.'}
步骤 2：创建 `json.html` 模板
<!-- templates/json.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Data</title>
<script>
function sendData() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
fetch('/json', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({name: name, email: email})
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerText = data.message;
});
}
</script>
</head>
<body>
<h1>Send JSON Data</h1>
<p>
<label for="name">Name:</label>
<input type="text" id="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email"><br><br>
<button onclick="sendData()">Send</button>
</p>
<p id="result"></p>
</body>
</html>在`app.py`中添加渲染`json.html`的路由：
@app.route('/json_form')
def json_form():
return render_template('json.html')凭借 Flask-WTF 等内置功能和扩展，在 Flask 中处理表单和用户输入非常简单。本篇博客介绍了创建 HTML 表单、处理表单数据以及使用 Flask-WTF 验证输入的基础知识。这些示例应该可以帮助您在 Flask 应用程序中保存健壮的表单。您可以通过添加更多字段、自定义验证器或与数据库集成来存储表单数据来随意扩展此基本示例。祝您快乐编码！