在flask中，用bootstrap5对表单进行渲染。一个简单的示例

最新推荐文章于 2024-04-30 12:12:22 发布

图灵生信

最新推荐文章于 2024-04-30 12:12:22 发布

阅读量512

点赞数 1

分类专栏： flask 文章标签： flask python 后端

本文链接：https://blog.csdn.net/liangbilin/article/details/131209497

版权

flask 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考链接：

https://bootstrap-flask.readthedocs.io/en/stable/macros/#render-form

一个案例

1. 初始化一个flask app

from flask import Flask, render_template,request
from flask_wtf import FlaskForm, CSRFProtect
from wtforms.fields import *
from flask_bootstrap import Bootstrap5

# 初始化一个flask app
app = Flask(__name__)

# 设置秘钥，没有的话，会失败。作用是？？？
app.secret_key = 'dev'
csrf = CSRFProtect(app)

# 注意这里
bootstrap = Bootstrap5(app)

2. 基于wtf，做一个Form

其实就是继承FlaskForm类，然后创建字段。

class ContactForm(FlaskForm):
    name = TextAreaField("Name of Student")
    email = EmailField("Input your Email")
    password = PasswordField("Input your Password")
    submit = SubmitField("提交")

3. 做一个视图函数，并将 Form 传入模板

# 这个视图函数是传入Form的
@app.route('/', methods=['GET'])
def contact():
    form = ContactForm()  # 先实例化Form
    return render_template('contact.html', form=form)


# 顺别做一个表格提交后，跳转的视图
@app.route('/out', methods=['GET', 'POST'])
def out():
    print(request.form)
    return '123'

4. 模板

注意看，下面这个模板，有几点：

{{ bootstrap.load_css() }} 这句话表示冲bootstrap中导入css。如果没有这行，那么渲染会失败。
{% from 'bootstrap5/form.html' import render_form %} 这句话表示导入render_form方法，用于form的渲染。
{{ render_form(form) }} 这句话表示对form执行渲染，form的内容来源于app 视图函数传入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap-Flask Demo Application</title>
    {{ bootstrap.load_css() }}
</head>
<body>
    
    {% from 'bootstrap5/form.html' import render_form %}

    <main class="container">
        {{ render_form(form) }}
    </main>

</body>
</html>

来看看实际效果

在这里插入图片描述

拓展

其实除了render_form，还有render_field和render_form_row渲染方式，详细的可以看看官方文档。

图灵生信

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在flask中，用bootstrap5对表单进行渲染。一个简单的示例

参考链接：https://bootstrap-flask.readthedocs.io/en/stable/macros/#render-form2. 基于wtf，做一个Form其实就是继承类，然后创建字段。3. 做一个视图函数，并将 Form 传入模板4. 模板注意看，下面这个模板，有几点：来看看实际效果
复制链接

扫一扫