将 WTForms 提交按钮设置为图标
Set WTForms submit button to icon
我想要一个显示图标而不是文本的提交按钮。该按钮是 WTForms 表单中的一个字段。我正在使用 Bootstrap 和 Open Iconic 来设置样式和图标。如何设置提交字段显示图标?
class MyForm(Form):
submit = SubmitField('')
{{ form.submit }}
指的是icon
方法,但我找不到更多关于它的信息。
您链接的示例使用的是 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)
如果您想使用 图像图标而不是提交标签文本呈现提交字段,在您的 html 模板中,您可以这样做:
(假设你的表单域名称是isubmit):
<button type="submit" style="border: 0 none; background: none;" name="isubmit" value="x"><img src="/static/previousButton.png"></button>
注意:值必须是非空的,但它是什么并不重要;只会显示img。
我遇到了类似的问题,所以,你可以这样做来使用 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
我的回复是基于这个post WTForms creating a custom widget.
我想要一个显示图标而不是文本的提交按钮。该按钮是 WTForms 表单中的一个字段。我正在使用 Bootstrap 和 Open Iconic 来设置样式和图标。如何设置提交字段显示图标?
class MyForm(Form):
submit = SubmitField('')
{{ form.submit }}
icon
方法,但我找不到更多关于它的信息。
您链接的示例使用的是 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)
如果您想使用 图像图标而不是提交标签文本呈现提交字段,在您的 html 模板中,您可以这样做:
(假设你的表单域名称是isubmit):
<button type="submit" style="border: 0 none; background: none;" name="isubmit" value="x"><img src="/static/previousButton.png"></button>
注意:值必须是非空的,但它是什么并不重要;只会显示img。
我遇到了类似的问题,所以,你可以这样做来使用 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
我的回复是基于这个post WTForms creating a custom widget.