HTTP Form v.s. Flask-WTF Form v.s. Bootstrap Form

以三种方式创建表单界面:

1. 创建传统的HTTP Form

2. 使用Flask-WTF创建Form

3. 使用Bootstrap-Flask库创建Form

同时,在Flask-WTF表单和Bootstrap-Flask表单中,分别显示“错误信息”和“Flash Messages”。

相比Flask_WTF, Bootstrap用 render_form(form)渲染样式,自动带错误提示,不需要像Flask_WTF那样手写 for error in ... 。

项目结构:

register_app/
├── HTTP_Form_App.py
├── FlaskWTF_Form_App.py
├── Bootstrap_Form_App.py
└── templates/
    ├── http_form.html
    ├── flask_wtf_form.html
    └── bootstrap_form.html

 HTTP_Form_App.py

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index()
### 如何在 Flask 中结合 BootstrapFlask-WTF 实现日期选择器功能 要在 Flask 项目中实现日期选择器功能,可以通过集成 `Flask-WTF` 表单扩展以及前端的 Bootstrap 插件(如 `Bootstrap-datepicker` 或其他类似的插件)完成。以下是具体方法: #### 使用 Flask-WTF 创建表单类 通过定义一个继承自 `FlaskForm` 的表单类,在该类中添加字段用于接收用户的输入数据。 ```python from flask_wtf import FlaskForm from wtforms import StringField, SubmitField from wtforms.validators import DataRequired class DateForm(FlaskForm): date_field = StringField('Select a date', validators=[DataRequired()]) submit = SubmitField('Submit') ``` 此部分代码创建了一个简单的表单,其中包含一个字符串类型的字段用来捕获用户选定的日期[^2]。 #### 配置 HTML 页面支持日期选择器 为了使页面能够显示并操作日期选择控件,需引入必要的 CSS 和 JavaScript 文件,并利用特定的初始化脚本来激活日期选择器的功能。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flask WTF with Datepicker</title> <!-- Include Bootstrap and Datepicker's CSS --> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/datepicker.css') }}"> </head> <body> {% import "bootstrap/wtf.html" as wtf %} <div class="container"> <h1>Date Picker Example</h1> {{ wtf.quick_form(form) }} <!-- Initialize the date picker plugin on your input field --> <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap-datepicker.min.js') }}"></script> <script type="text/javascript"> $(document).ready(function(){ $('#date_field').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight: true }); }); </script> </div> </body> </html> ``` 在此模板文件中,除了常规的表单渲染外,还特别加入了针对日期选择框的行为设置逻辑[^4]。 #### 处理提交的数据 最后一步是在服务器端编写路由来接受来自客户端发回的信息,并做进一步处理或者存储到数据库当中去。 ```python @app.route('/date-picker', methods=['GET', 'POST']) def date_picker(): form = DateForm() if form.validate_on_submit(): selected_date = form.date_field.data return f'Selected Date is {selected_date}' return render_template('date_picker.html', form=form) ``` 以上就是整个流程的大致描述,它涵盖了从前端界面搭建直到后台业务逻辑实现的所有环节[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

魔尔助理顾问

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值