Attempting to add a class attribute to input element on django form.

Question

I am trying to add a class attribute to some input elements on my Django form but I'm not sure how to do it specifically. Currently I just have a placeholder attribute, and I'd like to start adding classes/id's so that I can style the form. I have two questions. The first one is how would I go about adding a class/id attribute to the existing placeholder attribute(s) in the following code:

forms.py

class EditUserProfileForm(forms.ModelForm):
    class Meta:
        model = models.UserProfile
        fields = '__all__'

        widgets = {
            'description': forms.TextInput(attrs={'placeholder': 'Motto'}),
            'city': forms.TextInput(attrs={'placeholder': 'City'}),
            'website': forms.TextInput(attrs={'placeholder': 'Website/Brand'}),
            'phone': forms.TextInput(attrs={'placeholder': 'Phone Number'}),
            }

and secondly, after I do this would I need to then makemigrations/migrate? From my understanding you need to migrate whenever a database level change has been made, but I'm not sure what that means entirely.

Any insight is always greatly appreciated. Thanks

You are not making a database level change when modifying a form definition, so no migrations are required. — solarissmoke
– solarissmoke, Commented Oct 20, 2018 at 4:47

Uroš Trstenjak · Accepted Answer · 2018-10-20 04:42:56Z

1

First, to add a class to your widgets simply declare it the same way as you did it for placeholder attr. For example...

widgets = {
            'description': forms.TextInput(attrs={'class': 'my_class', 'placeholder': 'Motto'},)
           }

Second, you should perform makemigrations/migrate whenever you change your models. In order to adjust your database tables to the new models. Read Django docs for the details.

answered Oct 20, 2018 at 4:42

Uroš Trstenjak

9038 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ruslaniv Over a year ago

I wonder if it is possible to add classes in dict notation. I tried attrs=dict(class='my_class') but this obviously did not work, since Django (i.e. Python) was expecting a class declaration after class

Joel G Mathew · Accepted Answer · 2020-03-09 04:11:34Z

1

You can use Widget Tweaks. With help of this you can add classes to your input and edit other attribute also. Here is good tutorial.

edited Mar 9, 2020 at 4:11

Joel G Mathew

8,13116 gold badges62 silver badges94 bronze badges

answered Oct 20, 2018 at 6:36

Pankaj Sharma

2,2773 gold badges28 silver badges57 bronze badges

Comments

Bidhan Majhi · Accepted Answer · 2018-10-21 06:24:05Z

Below I have changed your form. For your second question Do you need to call makemigration? Answer is no. You only need to call makemigration and migrate, when you make any changes in your models.py, for views.py or forms.py etc. You do not need.

class EditUserProfileForm(forms.ModelForm):

    class Meta:
        model = models.UserProfile
        fields = '__all__'

    widgets = {
        'description': forms.TextInput(attrs={'class':'#add class name','placeholder': 'Motto'}),
        'city': forms.TextInput(attrs={'class':'#add class name','placeholder': 'City'}),
        'website': forms.TextInput(attrs={'class':'#add class name','placeholder': 'Website/Brand'}),
        'phone': forms.TextInput(attrs={'class':'#add class name','placeholder': 'Phone Number'}),
        }

Note: You also don't need to add class name, unless you have specific requirement. If you want to add class name for css, then you can simply write id_description , id_city, You can check your id in browser developers tool.

Collectives™ on Stack Overflow

Attempting to add a class attribute to input element on django form.

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related