python - 将 WTForms 提交按钮设置为图标

Question

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

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

{{ form.submit }}

This post指的是 icon 方法，但我找不到关于它的更多信息。

Answer 1

您链接的示例使用的是 Flask-Bootstrap 提供的宏。宏使得使用 Bootstrap 构建表单变得容易，但可能不灵活。例如，他们可能不支持使用 Open Iconic 图标。

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

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

如果您确实需要在表单中使用 SubmitField，您可以使用 HTML 将标签设置为 Markup 字符串。需要 Markup 来告诉 Jinja 在不转义的情况下渲染是安全的。

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