Question

我正在使用WTForms在烧瓶中渲染一个提交按钮，例如：

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中的String上，但这没有用。它只是引发了语法错误。

在下面您可以看到图片。我只想将箭头添加到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>

Answer 2

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

Answer 3

您是否尝试过下载png箭头，然后在注册后将其堆叠在里面？只是一个想法....