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 "