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

来源：互联网发布：手机淘宝店名可以改吗编辑：程序博客网时间：2024/06/16 15:12

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