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

最新推荐文章于 2025-08-17 10:49:09 发布

原创最新推荐文章于 2025-08-17 10:49:09 发布 · 1.4w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#Flask #Python #bootstrap #wtform

Python 同时被 2 个专栏收录

21 篇文章

订阅专栏

Flask

10 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

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 %}