Wtforms, add a class to a form dynamically
Solution 1
WTForms does not allow you to set display options (such as class name) in the field initialization. However, there are several ways to get around this:
-
If all of your fields should include a class name as well as an ID then just pass in each field's
short_name
to it when you render it:<dl> {% for field in form %} <dt>{{field.label}}</dt> <dd>{{field(class_=field.short_name)}}</dd> {% endfor %} </dl>
-
Create a custom widget mixin that provides the class name:
from wtforms.fields import StringField from wtforms.widgets import TextInput class ClassedWidgetMixin(object): """Adds the field's name as a class when subclassed with any WTForms Field type. Has not been tested - may not work.""" def __init__(self, *args, **kwargs): super(ClassedWidgetMixin, self).__init__(*args, **kwargs) def __call__(self, field, **kwargs): c = kwargs.pop('class', '') or kwargs.pop('class_', '') kwargs['class'] = u'%s %s' % (field.short_name, c) return super(ClassedWidgetMixin, self).__call__(field, **kwargs) # An example class ClassedTextInput(ClassedWidgetMixin, TextInput): pass class Company(Form): company_name = StringField('Company Name', widget=ClassedTextInput)
Solution 2
Alternatively you can add the class in your template like this for jinja2:
{{ form.name(size=20, class_='input-small') }}
Solution 3
Use render_kw
if using WTForms >= 2.1 :
submit = SubmitField(u'Block Submit Buttom', render_kw={"class": "btn btn-primary btn-block"})
verrochio
Updated on July 19, 2020Comments
-
verrochio almost 4 years
is there a way i could send a form's (css) class from python? For example:
class Company(Form): companyName = TextField('Company Name', [validators.Length(min=3, max = 60)])
This renders a simple text field, but i want that text field to have the css class of
.companyName
, is that possible directly from python?I know that i can put a
id="companyName"
directly from python, but not class.Help.
Update: I tried
class_="companyName"
and it did not work, i got:__init__() got an unexpected keyword argument '_class'
-
sofly almost 9 yearsSaved me as well :) This is a wonderful solution, not sure why an example along these lines isn't somewhere in the WTForm docs
-
benjaminz almost 9 yearsI'd vote up ten times if it is possible, this is a much better solution. Now I can sit back and watch WTForms rock~~~
-
benjaminz almost 9 yearsAlthough the underscore after class doesn't seem to be necessary
-
David over 8 yearsIn Python functions you can't use "class" as a named argument because it's a language keyword. For example,
myfunc(class='xyz')
results in a SyntaxError. Using themyfunc(**{'class': 'xyz'})
like shown above gets around that problem. Thanks for your example! -
renatov over 8 yearsThis solution is much better than the one chosen as the correct answer.
-
Tony Chou about 6 yearsIt works for me many days age, but it just failed now. I don't remember what I did then, but almost just like your answer. After Ctrl+F5, the submit button also shows it class btn btn-default:-(... Any possible errors?
WTForms==2.1
andFlask-WTF==0.14.2
-
Sukma Saputra over 4 yearsIt's perfectly what I need when I use parsley js for email validate.