CODEWITHSUNDEEP
cssflaskwtforms
pheven
pheven

Reputation: 999

Add a css class to a field in wtform

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:

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):

  f.test_field = forms.ClassedTextField('Test Name')

The rest of the form is created correctly, but this 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.

Upvotes: 85

Views: 86228

Answers (5)

Neil McGuigan
Neil McGuigan

Reputation: 48277

There are at least 5 ways to do it, depending on what you want to do:

  1. in your template:

    {{ field(class="form-control") }}

  2. in the field definition:

    class MyForm(Form):
  name = StringField("name", render_kw={"class":"form-control"})

  3. sub-classing fields:

    class MyStringField(StringField):
   def __call__(self, **kwargs):
      kwargs.setdefault("class", "form-control")
      return super().__call__(**kwargs)

class MyForm(Form):
   name = MyStringField("name")

  4. using Meta (applies to all field):

    class MyMeta(wtforms.meta.DefaultMeta):
   def render_field(self, field, render_kw):
      render_kw.setdefault("class", "form-control")
      return super().render_field(field, render_kw)

class MyForm(Form):
   name = StringField("name")

   class Meta(MyMeta):
      ...

  5. using Widgets:

    class MyTextInput(wtforms.widgets.TextInput):
   def __call__(self, field, **kwargs):
      kwargs.setdefault("class", "form-control")
      return super().__call__(field, **kwargs)

class MyForm(Form):
   name = StringField("name", widget=MyTextInput())

Upvotes: 2

Deekshith Anand
Deekshith Anand

Reputation: 2672

Pretty late though, but here is what I found. While rendering a template you can pass any key-value pairs inside the parenthesis, and it just puts those key values while rendering. For example, if you had to put a class along with some placeholder text you can do it like below:

{{ form.email(class='custom-class' placeholder='email here') }}

will actually render like below:

<input class="custom-class" id="email" name="email" placeholder="email here" type="text" value="">

Basically, you can even try experimenting by adding some non-existent HTML attribute with some value and it gets rendered.

To make it a less of pain its good to have helper functions as macros and render them instead of actual fields directly. Let's say you have common classes and error-classes. You can have a helper macro like this:

{% macro render_field(field,cls,errcls) %}

  {% if field.errors %}
  <div class="form-group">
    <label for="{{ field.id}}">{{ field.label.text }}</label>
    
    {{ field(class = cls + " " + errcls,**kwargs) | safe}}
    <div class="invalid-feedback">
      {% for error in field.errors %}
      <span> {{error}}</span>
      {% endfor %}
    </div>
  </div>

  {% else %}

  <div class="form-group">
    <label for="{{ field.id}}">{{ field.label.text }}</label>
    {{ field(class = cls,**kwargs) | safe}}
  </div>
  
  {% endif %}
{% endmacro %}

Now while rendering a field you can call like this with additional attributes like this in the template:

{{render_field(form.email,cls="formcontrol",errcls="isinvalid",placeholder="Your Email") }}

Here I have used bootstrap classes, just modify the helper function to your needs!

Hope that helps! Happy coding!

Upvotes: 9

Tri
Tri

Reputation: 3039

In WTForms 2.1 I using extra_classes, like the line bellow:

1. The first way

{{ f.render_form_field(form.email, extra_classes='ourClasses') }}

We can also use @John Go-Soco answers to use render_kw attribute on our form field, like this way.

2. The second way

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.

Upvotes: 12

John Go-Soco
John Go-Soco

Reputation: 955

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_kw argument.

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>

Upvotes: 41

user559633
user559633

Reputation:

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.

e.g. 

    {{ form.email(class_="form-control") }}

will result in the following 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:

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.

Upvotes: 227

Related Questions