Django: How do I add arbitrary html attributes to input fields on a form?

python

django

forms

widget-tweaks

byAnton Shumikhin·Oct 28, 2024

Here's the quick fix for what you're looking for—adding custom HTML attributes to Django form inputs:

class MyForm(forms.Form):
    # Calling in Mr. CharField!
    my_field = forms.CharField()

    # Dr. __init__, I presume?
    def __init__(self, *args, **kwargs):
        # Commencing superpower activation!
        super().__init__(*args, **kwargs)
        # Time for some magic dust sprinkle...✨
        self.fields['my_field'].widget.attrs['data-custom'] = 'value'

Now, my_field will appear onstage donning a data-custom="value" badge.

Attributes are to form fields what sprinkles are to donuts—an extra touch that just makes everything better. Need to add a class or onclick event? Or maybe disable an annoying autocomplete? Here's how you can do it.

To add a class (or a fancy new outfit!) to our field:

# New identity loading...
self.fields['my_field'].widget.attrs.update({'class': 'my-css-class'})

To turn off autocomplete (the autocomplete ghost bothering you):

# Ghostbusting time...
self.fields['my_field'].widget.attrs.update({'autocomplete': 'off'})

And here's how you make your attributes dynamic:

# Time for a little fairy tale...
if some_condition:
    self.fields['my_field'].widget.attrs['data-condition'] = 'true'  # And they lived happily ever after.
else:
    self.fields['my_field'].widget.attrs['data-condition'] = 'false'  # Then came the dragon... 🐉

Manipulating model forms

Now, if you're trying to charm a ModelForm, you can go ahead and declare widgets in the Meta class:

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['my_field']
        widgets = {
            'my_field': forms.TextInput(attrs={'autocomplete': 'off', 'class': 'my-class'})
        }

This will let your my_field strut on the runway with an autocomplete="off" and class="my-class" sash.

django-widget-tweaks can be your magical wand for setting attributes within your templates:

{% load widget_tweaks %}
{# Reverse spell casting in 3...2..1..! #}
{{ form.my_field|add_class:"my-css-class" }}
{{ form.my_field|attr:"data-custom:value" }}

Common hiccups (and how to avoid them)

While you're busy immersing in the wizardry of form fields' HTML attributes, be sure to ward off these common demons:

The attribute eraser: Always use .update() or risk wiping out all other attributes.
The class collision: Ensure a new class won't clash with others. Remember, balance is key.
The browser ghost: Some browsers cache forms—your changes might be invisible unless the cache is cleared.

explain-codes / Python / Django: How do I add arbitrary html attributes to input fields on a form?

Linked

Django set default form values



Disabling Chrome Autofill



:not(:empty) CSS selector is not working?



How to use a dot "." to access members of a dictionary?



Can I apply a CSS style to an element name?

