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

Question

我正在使用 WTForms 在 Flask 中渲染一个提交按钮，如下所示:

表单.py:

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

登录.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

您应该能够使用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>