How to set css class of a label in a django form declaration?

by

Widgets have an attrs keyword argument that take a dict which can define attributes for the input element that it renders. Forms also have some attributes you can define to change how Django displays your form. Take the following example:

class MyForm(forms.Form):
    error_css_class="error"
    required_css_class="required"
    my_field = forms.CharField(max_length=10,
                               widget=forms.TextInput(attrs={'id': 'my_field',
                                                             'class': 'my_class'}))

This works on any Widget class. Unfortunately, there isn’t an easy way to change how Django renders labels if you just do {{ field }}. Luckily, you play with the form object a little bit in the template:

<form>
    {% for field in form %}
        <label class="my_class" for="{{ field.auto_id }}">{{ field.label }}</label>
        {{ field }}
    {% endfor %}
    <button type="submit">Submit</button>
</form>

Then again, you can always add arbitrary attributes to the objects you’re working with:

# In a view...
form = MyForm()
form.label_classes = ('class_a', 'class_b', )
# Or by hijacking ```__init__```
class MyForm(forms.Form):
    def __init__(self, *args, **kwargs):
        self.my_field = forms.CharField(max_length=10,
                                        widget=forms.TextInput(attrs={'id': 'my_field',
                                                                      'class': 'my_class'}))
        self.my_field.label_classes = ('class_a', 'class_b', )
        super(MyForm, self).__init__(*args, **kwargs)

Render your template with the form in context, and in the template you can do:

<form>
    {% for field in form %}
        <label class="{% for class in field.label_classes %}{{ class }} {% endfor %}"
               for="{{ field.auto_id }}">{{ field.label }}</label>
        {{ field }}
    {% endfor %}
    <button type="submit">Submit</button>
</form>

Whatever suits your fancy.

Leave a Comment

tech