向 wtform 中的字段添加 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22084886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a css class to a field in wtform
提问by pheven
I'm generating a dynamic form using wtforms (and flask). I'd like to add some custom css classes to the fields I'm generating, but so far I've been unable to do so. Using the answer I found here, I've attempted to use a custom widget to add this functionality. It is implemented in almost the exact same way as the answer on that question:
我正在使用 wtforms（和烧瓶）生成动态表单。我想向我生成的字段添加一些自定义 css 类，但到目前为止我一直无法这样做。使用我在这里找到的答案，我尝试使用自定义小部件来添加此功能。它的实现方式与该问题的答案几乎完全相同：
class ClassedWidgetMixin(object):
"""Adds the field's name as a class.
(when subclassed with any WTForms Field type).
"""
def __init__(self, *args, **kwargs):
print 'got to classed widget'
super(ClassedWidgetMixin, self).__init__(*args, **kwargs)
def __call__(self, field, **kwargs):
print 'got to call'
c = kwargs.pop('class', '') or kwargs.pop('class_', '')
# kwargs['class'] = u'%s %s' % (field.name, c)
kwargs['class'] = u'%s %s' % ('testclass', c)
return super(ClassedWidgetMixin, self).__call__(field, **kwargs)
class ClassedTextField(TextField, ClassedWidgetMixin):
print 'got to classed text field'
In the View, I do this to create the field (ClassedTextField is imported from forms, and f is an instance of the base form):
在视图中，我这样做是为了创建字段（ClassedTextField 是从表单导入的，f 是基本表单的一个实例）：
f.test_field = forms.ClassedTextField('Test Name')
The rest of the form is created correctly, but this jinja:
表单的其余部分已正确创建，但是这个 jinja：
{{f.test_field}}
produces this output (no class):
产生这个输出（没有类）：
<input id="test_field" name="test_field" type="text" value="">
Any tips would be great, thanks.
任何提示都会很棒，谢谢。
回答by
You actually don't need to go to the widget level to attach an HTML class attribute to the rendering of the field. You can simply specify it using the class_parameter in the jinja template.
您实际上不需要到小部件级别将 HTML 类属性附加到字段的呈现。您可以使用class_jinja 模板中的参数简单地指定它。
e.g.
例如
{{ form.email(class_="form-control") }}
will result in the following HTML::
将导致以下 HTML::
<input class="form-control" id="email" name="email" type="text" value="">
to do this dynamically, say, using the name of the form as the value of the HTML class attribute, you can do the following:
要动态执行此操作，例如，使用表单名称作为 HTML 类属性的值，您可以执行以下操作：
Jinja:
金贾：
{{ form.email(class_="form-style-"+form.email.name) }}
Output:
输出：
<input class="form-style-email" id="email" name="email" type="text" value="">
For more information about injecting HTML attributes, check out the official documentation.
有关注入 HTML 属性的更多信息，请查看官方文档。
回答by John Go-Soco
If you would like to programatically include the css class (or indeed, any other attributes) to the form field, then you can use the render_kwargument.
如果您想以编程方式将 css 类（或实际上，任何其他属性）包含到表单字段中，那么您可以使用该render_kw参数。
eg:
例如：
r_field = RadioField(
'Label',
choices=[(1,'Enabled'),(0,'Disabled')],
render_kw={'class':'myclass','style':'font-size:150%'}
)
will render as:
将呈现为：
<ul class="myclass" id="r_field" style="font-size:150%">
<li><input id="r_field-0" name="r_field" type="radio" value="1"> <label for="r_field-0">Enabled</label></li>
<li><input id="r_field-1" name="r_field" type="radio" value="0"> <label for="r_field-1">Disabled</label></li>
</ul>
回答by Tri
In WTForms 2.1I using extra_classes, like the line bellow:
在WTForms 2.1 中，我使用extra_classes，如下行：
1. The first way
1.第一种方式
{{ f.render_form_field(form.email, extra_classes='ourClasses') }}
We can also use @John Go-Soco answers to use render_kwattribute on our form field, like this way.
我们还可以使用 @John Go-Soco 答案render_kw在我们的表单字段上使用属性，就像这样。
2. The second way
2.第二种方式
style={'class': 'ourClasses', 'style': 'width:50%;'}
email = EmailField('Email',
validators=[InputRequired(), Length(1, 64), Email()],
render_kw=style)
But I would like more prefer to use the first way.
但我更喜欢使用第一种方式。
