如何将 元素添加到从 WTForms 呈现的按钮中？答案

【问题标题】：How can I add a element to a button rendered from WTForms?如何将 元素添加到从 WTForms 呈现的按钮中？
【发布时间】：2019-11-22 23:56:07
【问题描述】：

我正在使用 WTForms 在烧瓶中呈现一个提交按钮，如下所示：

forms.py：

class SignupForm(Form):
    submit = SubmitField("Register")

<form method="POST" action="/register">
    {{ form.hidden_tag() }}
    {{ form.submit(class_="primary-btn") }}
</form>

它呈现一个如下所示的按钮：

<input class="primary-btn" id="submit" name="submit" type="submit" value="Register">

但我真正想要的是一个按钮元素，我可以在其中添加一个元素，这样我就可以添加这样的箭头：

<button class="primary-btn">Register<span class="lnr lnr-arrow-right"></span></button>

我尝试将 span 元素附加到 SubmitField 中的字符串，但这不起作用。它只是引发了语法错误。

您可以在下面看到图片。我只想将箭头添加到 WTForm 元素。

【问题讨论】：

【解决方案1】：

您应该可以使用MarkUp。 Documentation here

import flask
submit_value = flask.Markup('<span class="lnr lnr-arrow-right"></span>')
submit_button = SubmitField(submit_value)

并结合您当前的代码...

class SignupForm(Form):
    submit = submit_button

需要Markup 函数来告诉您的表单可以安全地呈现而无需转义。

如果您想避免这种情况，还有其他方法。通常，您不需要在 python 中指定提交按钮，因为您通常不需要输入任何有用的数据。我会像你说的那样手动将提交按钮 HTML 添加到模板中：

<button class="primary-btn" type="submit">Register<span class="lnr lnr-arrow-right"></span></button>

【讨论】：

太棒了！谢谢，我试试。但最后一个问题：手动添加按钮不会破坏我的 CSRF 保护吗？这难道不是人们应该使用 WTForms 的原因吗？
不，绝对不是 :) CSRF 所做的只是在您的表单中添加一个额外的字段，该字段与表单提交一起发送，然后在服务器上得到验证。您可以根据需要添加任意数量的 HTML 元素。虽然，如果你在 python 中做其余的事情，我个人仍然会避免使用纯 HTML。将所有内容放在一个地方更有意义。
好吧，我无法让它工作。使用标记呈现如下输入字段：<input class="primary-btn" id="submit" name="submit" type="submit" value="">，当使用手动方法时，我得到错误：方法不允许，即使启用了 POST？
@LGR 嗯，这很奇怪。在过去的 30 分钟里，我一直在尝试做一些研究，但我真的没有找到任何运气......
@A 朋友对不起，手动方式现在有效。我在 if 语句中有一个错误.... 很抱歉造成混淆。总而言之：标记不起作用，因为我只能更改值中的字符串，但手动添加按钮是有效的。

【解决方案2】：

您是否尝试过使用element:after 伪选择器？内容：“图标”。

【讨论】：