WTForms：如何呈现 HTML5 小部件？答案

【问题标题】：WTForms: How to render an HTML5 Widget?WTForms：如何呈现 HTML5 小部件？
【发布时间】：2020-08-24 11:14:58
【问题描述】：

我正在尝试使用 WTForms 颜色输入字段。

这就是我定义表单的方式：

from wtforms.widgets.html5 import ColorInput

class ColoursForm(Form):
   background_color = ColorInput()

这是视图：

@app.route("/colours/<token>/", methods=['GET', 'POST'])
def edit_colours(token):
   form = ColoursForm(request.form)
   if request.method == 'GET':
       return render_template('colours_edit.html', form=form, token=token)
   else:  # Request = post

      return redirect(url_for('view_scoreboard', token=token))

在我的 Jinja2 模板 (colours_edit.html) 中，我这样做：

<p> {{ form.background_color }} Pick a color here </p>

但是，它没有按预期呈现 HTML 颜色选择器，而是我在呈现的 HTML 中看到了这一点：

选择颜色这里

为什么输入没有被渲染？

【问题讨论】：

能否请您添加更多的 HTML 代码和 .py 视图？另外我不明白它在哪里显示背景颜色？一旦你选择它？你在哪里退货？
@FedericoBaù 我添加了更多信息。现在清楚了吗？
<p> {{ form.background_color() }} Pick a color here </p>?
@snakecharmerb 这导致TypeError: __call__() missing 1 required positional argument: 'field'
我认为您越来越接近找到解决方案。我认为它错过了“颜色”输入。您何时收到此错误？何时提交表单？

标签： python flask flask-wtforms wtforms

【解决方案1】：

我解决了。我的代码有 2 个问题：

我在这里错过了（）：

<p> {{ form.background_color() }} Pick a color here </p>

表格应该是这样的：

class ColoursForm(Form):
"""Used when editing scoreboard colours"""
   background_color = StringField(widget=ColorInput())

来自this Stackoverflow answer。

最后，我不得不说，WTForms 文档在这方面不是很好。一些例子肯定会有所帮助。

【讨论】：