将 WTForms 提交按钮设置为图标

Question

我想要一个显示图标而不是文本的提交按钮。该按钮是 WTForms 表单中的一个字段。我使用 Bootstrap 和 Open Iconic 来设计样式和图标。如何设置提交字段以显示图标？

class MyForm(Form):
    submit = SubmitField('')

{{ form.submit }}

这篇文章提到了一种icon方法，但我找不到关于它的更多信息。

Answer 1

您链接的示例使用 Flask-Bootstrap 提供的宏。这些宏使使用 Bootstrap 构建表单变得容易，但可能不够灵活。例如，他们可能不支持使用“打开图标”图标。

通常，您不需要在表单中指定提交按钮，因为它不会提供有用的数据。手动将提交呈现为模板中的按钮并设置您需要的任何内容。

<button type=submit class="btn btn-primary"><span class="oi oi-check" title="Submit"></span></button>

如果您SubmitField的表单中确实需要标签，则可以将标签设置为Markup带有 HTML 的字符串。需要Markup告诉 Jinja 可以安全地渲染而无需转义。

from markupsafe import Markup
submit_value = Markup('<span class="oi oi-check" title="Submit"></span>')
submit = SubmitField(submit_value)