Django Password Field Not Rendering with Bootstrap Attributes

Question

I was trying to style my password fields in the registration of my Django Accounts App.

'password1': forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Password','required': 'required'}, ),
'password2': forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Confirm password','required': 'required'}, ),

My view renders to the register.html which is in the code below

<div class="col-12 mt-4">
    {{ form.password1 }}
</div>
<div class="col-12 mt-4">
    {{ form.password2 }}
</div>

But the result for the Password field is not styled as the other fields. The rendered register page is as shown below

What could be the fix to give the following output

imxitiz · Accepted Answer · 2023-01-11 04:56:13Z

1

After research, it turns out the default Django register fields i.e "username", "password1" and "password2" widgets can be tweaked at the constructor, here is the working code

def __init__(self, *args, **kwargs):
    super(SignUpForm, self).__init__(*args, **kwargs)

    self.fields['username'].widget.attrs['class'] = 'form-control'
    self.fields['username'].widget.attrs['placeholder'] = 'Username'
    self.fields['password1'].widget.attrs['class'] = 'form-control'
    self.fields['password1'].widget.attrs['placeholder'] = 'Password'
    self.fields['password2'].widget.attrs['class'] = 'form-control'
    self.fields['password2'].widget.attrs['placeholder'] = 'Confirm password'

edited Jan 11, 2023 at 4:56

imxitiz

4,0253 gold badges14 silver badges36 bronze badges

answered Aug 22, 2020 at 12:05

Franklin Okech

213 bronze badges

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

Comments

Riyas Ac · Accepted Answer · 2020-08-22 12:12:37Z

0

I would suggest like this: Please try this.

Method 1

password1 = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Password','required': 'required'}, ))
password2 = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Confirm password','required': 'required'}, ))

Method 2

Using constructor (Reduce code)

def __init__(self, *args, **kwargs):
    super(SignUpForm, self).__init__(*args, **kwargs)
    self.fields['username'].widget.attrs = {'class': 'form-control', 'placeholder': 'Password','required': 'required'}
    self.fields['password1'].widget.attrs = {'class': 'form-control', 'placeholder': 'Confirm password','required': 'required'}
    self.fields['password2'].widget.attrs = {'class': 'form-control', 'placeholder': 'Confirm password','required': 'required'}

edited Aug 22, 2020 at 12:12

answered Aug 22, 2020 at 8:57

Riyas Ac

1,6131 gold badge11 silver badges24 bronze badges

1 Comment

Franklin Okech Over a year ago

I was able to fix it using the constructor, turns out the default fields from django i.e username, password1 and password2 widgets can be enhanced at the constructor..Here is the code

Ali Durrani · Accepted Answer · 2023-01-11 08:37:30Z

0

Try using crispy_fields or django-crispy-forms. I faced same issue but after that I implemented crispy-forms and resolved issue. https://django-crispy-forms.readthedocs.io/en/latest/

answered Jan 11, 2023 at 8:37

Ali Durrani

1

Collectives™ on Stack Overflow

Django Password Field Not Rendering with Bootstrap Attributes

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related