Flask 如何使用Flask/WTForms预填充复选框
在本文中,我们将介绍如何使用Flask和WTForms预填充复选框。Flask是一个轻量级的Python Web框架,而WTForms是Flask中常用的表单工具。预填充复选框可以在页面加载时自动选择一些选项,以提供更好的用户体验。
阅读更多:Flask 教程
1. 创建Flask应用
首先,我们需要创建一个简单的Flask应用。在这个例子中,我们将创建一个表单页面,用于选择喜欢的编程语言。
from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import SelectMultipleField
app = Flask(__name__)
app.config['SECRET_KEY'] = 'supersecretkey'
class LanguageForm(FlaskForm):
languages = SelectMultipleField('Languages', choices=[('python', 'Python'), ('java', 'Java'), ('c', 'C')])
@app.route('/', methods=['GET', 'POST'])
def home():
form = LanguageForm()
return render_template('index.html', form=form)
if __name__ == '__main__':
app.run()
在上面的代码中,我们引入了Flask和WTForms,并创建了一个简单的Flask应用。LanguageForm是一个继承自FlaskForm的类,其中定义了一个SelectMultipleField用于展示编程语言选项。
2. 创建HTML模板
接下来,我们需要创建一个HTML模板来渲染表单页面。在这个例子中,我们将使用Jinja2模板引擎来渲染HTML。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Flask WTForms Example</title>
</head>
<body>
<form method="POST">
{{ form.csrf_token }}
<fieldset>
<legend>Choose your favorite programming language(s):</legend>
{% for subfield in form.languages %}
<div>
<input type="checkbox" id="{{ subfield.id }}" value="{{ subfield.data }}" {% if subfield.checked %}checked{% endif %}>
<label for="{{ subfield.id }}">{{ subfield.description }}</label>
</div>
{% endfor %}
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>
在上面的代码中,我们通过{% for %}循环遍历了form.languages,为每个选项创建了一个复选框,并使用{% if %}条件语句来判断是否选中。
3. 预填充复选框
要预填充复选框,我们需要在创建表单实例的时候,将选中的值传递给languages字段。以下是修改后的代码:
@app.route('/', methods=['GET', 'POST'])
def home():
form = LanguageForm()
# 预填充复选框
form.languages.data = ['python', 'java']
return render_template('index.html', form=form)
在这个例子中,我们通过为form.languages.data赋值来预填充复选框。在['python', 'java']中,我们指定了两个选中的编程语言。
4. 接收表单数据
最后,我们需要修改Flask应用,以接收并处理表单数据。
@app.route('/', methods=['GET', 'POST'])
def home():
form = LanguageForm()
if form.validate_on_submit():
selected_languages = form.languages.data
return render_template('result.html', selected_languages=selected_languages)
return render_template('index.html', form=form)
@app.route('/result')
def result():
return render_template('result.html')
在上面的代码中,我们添加了一个叫做result的路由,用于展示表单数据提交后的结果。在/result路由中,我们可以使用selected_languages来获取表单中被选中的编程语言。
总结
在本文中,我们介绍了如何使用Flask和WTForms预填充复选框。首先,我们创建了一个Flask应用,并使用WTForms定义了一个带有复选框选项的表单。然后,我们在HTML模板中通过Jinja2模板引擎渲染了该表单,并使用循环和条件语句实现了复选框的预填充。最后,我们修改了Flask应用,以接收并处理表单数据。
通过本文的示例,你可以学会如何使用Flask和WTForms来预填充复选框,提供更好的用户体验。希望本文对你有所帮助!
极客笔记