将 WTForms 提交按钮设置为图标答案

【问题标题】：Set WTForms submit button to icon将 WTForms 提交按钮设置为图标
【发布时间】：2017-01-02 00:30:56
【问题描述】：

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

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

{{ form.submit }}

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

【问题讨论】：

标签： python flask jinja2 wtforms iconic

【解决方案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)

【讨论】：

【解决方案2】：

我遇到了类似的问题，所以，你可以这样做来使用 wtforms，只需在 html 中调用 {{ render_temple(form) }} 即可得到这个结果。

class InlineButtonWidget(object):
    def __init__(self, class_=None):
        self.class_ = class_

    def __call__(self, field, **kwargs):
        kwargs.setdefault('type', 'submit')
        kwargs["class"] = self.class_
        title = kwargs.pop('title', field.description or '')
        params = html_params(title=title, **kwargs)

        html = '<button %s>%s</button>'
        return HTMLString(html % (params, escape(field.label.text)))


class InlineButton(Field):
    widget = InlineButtonWidget()

    def __init__(self, label=None, validators=None, text='Save', **kwargs):
        super(InlineButton, self).__init__(label, validators, **kwargs)
        self.text = text

    def _value(self):
        if self.data:
            return u''.join(self.data)
        else:
            return u''

用法：

class BookForm(FlaskForm):
    text = Markup('<i class="fas fa-sign-in-alt"></i> Submit')
    submit = SubmitField(text, widget=InlineButtonWidget(class_="btn btn-info")) #This class_ param it's applied in the class of the button in HTML.

输出：

Html code

Display

我的回复是基于WTForms creating a custom widget这个帖子。

【讨论】：

【解决方案3】：

如果你想在你的html模板中用一个图像图标而不是提交标签文本来呈现一个提交字段，你可以这样做：

（假设您的表单字段名称是 isubmit）：

<button type="submit" style="border: 0 none; background: none;" name="isubmit" value="x"><img src="/static/previousButton.png"></button>

注意：值必须是非空的，但它是什么并不重要；只会显示 img。

【讨论】：