如何将 <span> 元素添加到从 WTForms 呈现的按钮？

Question

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

forms.py:

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

login.html:

<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 元素。

Answer 1

您是否尝试过使用 element:after 伪选择器？内容：'icon'。

Answer 2

您应该可以使用 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>

How can I add a <span> element to a button rendered from WTForms?