Flask_wtf自定义 field样式(Placeholder, Style)、wtf.html、匹配 Bootstrap4、jinja2 quick_form

本文介绍了如何在Flask-WTF中结合Flask-bootstrap自定义表单样式,包括错误提示的定制,以及如何优化_wtf.html模板以充分利用Bootstrap4的样式。同时提到了使用Vue-validator进行客户端验证,并探讨了添加删除图标的addClear功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Flask-wtf + Flask-bootstrap


简简单单用一条语句就能让 jinja2 渲染出 form:wtf.quick_form(form)


但如果要实现自定义的表单样式,如下图,怎么做呢?


Live Demo: http://tianya.heroku.com/wtf




自定义错误提示:



很简单,修改3个地方就行:


forms.py

class CommentForm(Form):
    name = StringField('', validators=[Length(0, 64)], render_kw={"placeholder": "Your name",
                                                                  "style": "background: url(/static/login-locked-icon.png) no-repeat 15px center;text-indent: 28px"})
    email = StringField('', description='* We\'ll never share your email with anyone else.', validators= \
        [DataRequired(), Length(4, 64), Email(message=u"邮件格式有误")], render_kw={"placeholder": "E-mail: yourname@example.com"})
    comment = TextAreaField('', description=u"请提出宝贵意见和建议", validators=[DataRequired()],
                            render_kw = {"placeholder": "Input your comments here"})
    submit = SubmitField(u'提交')

复制 c:\git\tianya\venv\Lib\site-packages\flask_bootstrap\templates\bootstrap\wtf.html 

to: c:\git\tianya\app\templates\_wtf4.html


_wtf4.html

修改成 Bootstrap4 的告警样式

  {%- if field.errors %}
    {%- for error in field.errors %}
     <small class="form-text text-warning">{{error}}</small>
     {%- endfor %}
  {%- elif field.description -%}
<small class="form-text text-muted">{{field.description|safe}}</small>
   {%- endif %}
{%- endif %}

about.html

{% extends "base.html" %}
{% block title %}关于天涯脱水机 - {{ super() }}{% endblock %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_wtf4.html" as _wtf4 %}
{% block page_content %}

<div class="row comment-form" style="margin-top: 80px">
<div class="col-lg-6 offset-lg-3">
 <h3 class="panel-title">
    <a href="#" ><i class="fa fa-pencil">&nbsp</i>留言板</a></h3>
        {{ _wtf4.quick_form(form, form_type="basic ", button_map={'submit':'primary', } ) }}
</div>
</div>


2016-11-10:

可以进一步优化 _wtf.html,使其充分利用 Bootstrap4 的样式,更加美观!比如:


修改2个地方:

forms.py

添加一个字典fa_addon,通过 form.fa_addon 就可以传递样式给 wtf.html

class CommentForm(Form):
    name = StringField('', validators=[Length(0, 64)], render_kw={"placeholder": "your name",})
    email = StringField('', description='* We\'ll never share your email with anyone else.', validators= \
        [DataRequired(), Length(4, 64), Email(message=u"邮件格式有误")], render_kw={"placeholder": "yourname@example.com"})
    comment = TextAreaField('', description=u"* 请提出宝贵意见和建议", validators=[DataRequired()],
                            render_kw = {"placeholder": "input your comments here"})
    submit = SubmitField(u'提交')
    # FontAwesome css, show icon as prefix of fields
    fa_addon = {
        'email': 'fa-envelope-o',
        'name': 'fa-user-o',
    }

_wtf4.html

修改两处:添加 fa_addon参数,渲染field的fa_addon,最后,把 description移出div以外

{% macro quick_form(form,
。。。

  {%- for field in form %}
    {% if not bootstrap_is_hidden_field(field) -%}
      {{ form_field(field,
                    form_type=form_type,
                    horizontal_columns=horizontal_columns,
                    button_map=button_map,
                    fa_addon=form.fa_addon[field.name]) }}
    {%- endif %}
  {%- endfor %}

</form>
{%- endmacro %}

{% macro form_field(field,
                    form_type="basic",
                    horizontal_columns=('lg', 2, 10),
                    button_map={},
                    fa_addon="") %}
。。。
{% else -%}
  <div class="form-group">
  <div class="input-group {% if field.errors %} has-danger{% endif -%}
                         {%- if field.flags.required %} required{% endif -%}
  ">
      {%- if fa_addon %}
        <span class="input-group-addon"><i class="fa {{ fa_addon }} fa-fw"></i></span>
      {% endif %}
      {%- if form_type == "inline" %}
        {{field.label(class="sr-only")|safe}}
        {% if field.type == 'FileField' %}
          {{field(**kwargs)|safe}}
        {% else %}
          {{field(class="form-control", **kwargs)|safe}}
        {% endif %}
      {% elif form_type == "horizontal" %}
        {{field.label(class="control-label " + (
          " col-%s-%s" % horizontal_columns[0:2]
        ))|safe}}
        <div class=" col-{{horizontal_columns[0]}}-{{horizontal_columns[2]}}">
          {% if field.type == 'FileField' %}
            {{field(**kwargs)|safe}}
          {% else %}
            {{field(class="form-control", **kwargs)|safe}}
          {% endif %}
        </div>
        {%- if field.errors %}
          {%- for error in field.errors %}
            {% call _hz_form_wrap(horizontal_columns, form_type, required=required) %}
              <p class="help-block error"><small>{{error}}</small></p>
            {% endcall %}
          {%- endfor %}
        {%- elif field.description -%}
          {% call _hz_form_wrap(horizontal_columns, form_type, required=required) %}
            <p class="help-block grey"><small>{{field.description|safe}}</small></p>
          {% endcall %}
        {%- endif %}
      {%- else -%}
        {{field.label(class="control-label")|safe}}
        {% if field.type == 'FileField' %}
          {{field(**kwargs)|safe}}
        {% else %}
          {{field(class="form-control", **kwargs)|safe}}
        {% endif %}
    </div>
          {%- if field.errors %}
          {%- for error in field.errors %}
           <small class="form-text text-warning">{{error}}</small>
           {%- endfor %}
        {%- elif field.description -%}
        <small class="form-text text-muted">{{field.description|safe}}</small>
         {%- endif %}
      {%- endif %}
  </div>
{% endif %}

{% endmacro %}

源码:

https://github.com/kevinqqnj/wtf4.html.git

TODO:

Bootstrap4 - Forms -> Validation

.form-control -> 自带各种格式


2016-11-15

使用 Vue-validator,做客户端检查




表单信息没有填写准确时,不允许提交表单。





TODO:
radiobox, checkbox, pwd-repeat等验证
已完成,密码两次不一样时会提示。代码: https://github.com/kevinqqnj/wtf4.html



2016-11-17

在input框内,添加 删除 图标 addClear





方法: 点击打开链接


TODO:
Flask-WTF 自定义Form type: http://python.jobbole.com/84356/ 
Python 中,`Flask-WTF` 是一个用于简化 Flask 应用中表单处理的扩展库。它基于 `WTForms`,提供了与 Flask 集成的便捷方式来创建和验证表单。 ### 下载与安装 要下载并安装 `Flask-WTF`,可以使用 Python 的包管理工具 `pip`,这是最简单且推荐的方式。 #### 安装命令: ```bash pip install Flask-WTF ``` 如果你使用的是虚拟环境(如 `venv` 或 `conda`),请确保你已经激活了相应的环境,以便将库安装到正确的位置。 #### 使用国内镜像加速安装(可选): 由于网络原因,有时从 PyPI 安装可能会比较慢。你可以通过指定国内镜像源来加速安装过程。例如,使用清华大学的镜像: ```bash pip install Flask-WTF -i https://pypi.tuna.tsinghua.edu.cn/simple ``` ### 验证安装 安装完成后,可以通过以下方式验证是否成功导入 `Flask-WTF`: ```python from flask_wtf import FlaskForm from wtforms import StringField, validators class MyForm(FlaskForm): name = StringField('Name', [validators.DataRequired()]) # 如果没有报错,则说明安装成功 ``` ### 基本使用示例 下面是一个简单的 Flask 应用中使用 `Flask-WTF` 的示例: ```python from flask import Flask, render_template_string, request from flask_wtf import FlaskForm from wtforms import StringField, validators app = Flask(__name__) app.config['SECRET_KEY'] = 'your_secret_key_here' class MyForm(FlaskForm): name = StringField('Name', [validators.DataRequired()]) @app.route('/', methods=['GET', 'POST']) def index(): form = MyForm() if form.validate_on_submit(): return f'Hello {form.name.data}' return render_template_string(''' <form method="post"> {{ form.csrf_token }} {{ form.name.label }} {{ form.name }} <input type="submit" value="Submit"> </form> ''', form=form) if __name__ == '__main__': app.run(debug=True) ``` 运行上述代码后,访问 `http://127.0.0.1:5000/`,你将看到一个带有输入框的表单。提交后,会显示“Hello + 输入内容”。 ### 注意事项 - 确保你已安装 Flask[^4]。 - `Flask-WTF` 依赖于 `Werkzeug` 和 `WTForms`,这些都会在安装时自动安装。 - 设置 `SECRET_KEY` 是必须的,否则在使用表单时会出现错误。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值