[英]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
中的SubmitField
,您可以將標簽設置為帶有 HTML 的Markup
字符串。 需要Markup
來告訴 Jinja 在不轉義的情況下渲染是安全的。
from markupsafe import Markup
submit_value = Markup('<span class="oi oi-check" title="Submit"></span>')
submit = SubmitField(submit_value)
我遇到了類似的問題,因此,您可以這樣做以使用 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.
輸出:
我的回復基於這篇文章WTForms created a custom widget 。
如果您想使用圖像圖標而不是提交標簽文本呈現提交字段,在您的 html 模板中,您可以執行以下操作:
(假設您的表單字段名稱是 isubmit):
<button type="submit" style="border: 0 none; background: none;" name="isubmit" value="x"><img src="/static/previousButton.png"></button>
注意:值必須是非空的,但它是什么並不重要; 只會顯示 img。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.