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.

More Related Contents:

  1. Django Forms: if not valid, show form with error message
  2. Django form field choices, adding an attribute
  3. Applying bootstrap styles to django forms
  4. Setting the selected value on a Django forms.ChoiceField
  5. How to update an object from edit form in Django?
  6. Django ModelChoiceField: filtering query set and setting default value as an object
  7. Django ModelForm: What is save(commit=False) used for?
  8. Django: How do I add arbitrary html attributes to input fields on a form?
  9. Create Custom Error Messages with Model Forms
  10. Django/jQuery Cascading Select Boxes?
  11. Inline Form Validation in Django
  12. Initial populating on Django Forms
  13. Django multi-select widget?
  14. How do I add a Foreign Key Field to a ModelForm in Django?
  15. Django form with choices but also with freetext option?
  16. Add class to form field Django ModelForm
  17. How can I restrict Django’s GenericForeignKey to a list of models?
  18. Dropdown in Django Model
  19. Grouped CheckboxSelectMultiple in Django template
  20. Django – Overriding the Model.create() method?
  21. Django templates: verbose version of a choice
  22. Django unique_together with nullable ForeignKey
  23. resize image on save
  24. Django’s forms.Form vs forms.ModelForm
  25. How to add Check Constraints for Django Model fields?
  26. Using AuthenticationForm in Django
  27. ModelForm with OneToOneField in Django
  28. How to limit file types on file uploads for ModelForms with FileFields?
  29. Get type of Django form widget from within template
  30. Multiple form classes in django generic (class) views

Leave a Comment