CSS Not Working on Django Password Form Field

CSS not working on django password form field

password1 and password2 are "custom" fields on the UserCreationForm since they do not exist as model fields on the User model. Meta.widgets will not work for these custom fields, you will need to redefine these fields and their widgets in your form

class CreateUserForm(UserCreationForm):

    password1 = forms.CharField(
        label="Password",
        widget=forms.PasswordInput(attrs={'class':'pass', 'type':'password', 'align':'center', 'placeholder':'password'}),
    )
    password2 = forms.CharField(
        label="Confirm password",
        widget=forms.PasswordInput(attrs={'class':'pass', 'type':'password', 'align':'center', 'placeholder':'password'}),
    )

    class Meta:
        model = User
        fields = ['username', 'email']
        widgets={
            'username': forms.TextInput(attrs={'class':'un', 'type':'text', 'align':'center', 'placeholder':'UserName'}),
            'email':forms.TextInput(attrs={'class':'un', 'type':'text', 'align':'center', 'placeholder':'Email'}),
        }

How to add a CSS class to Django registration password form

In the attrs , add "id" field so that you can access the fields with their id and then you can apply css in that .

class CustomUserCreationForm(UserCreationForm):
class Meta(UserCreationForm):
    model = CustomUser
    fields = ('username', 'email', 'password1', 'password2', 'password')
    widgets = {
        'username': TextInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': "Username",
            'id' : "id_register_form_username" , 
        }),
        'email': EmailInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': 'Email address' ,
            'id' : "id_register_form_email' , 
        }),
        'password1': PasswordInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'type': 'password',
            'name': 'password',
            'placeholder': 'Password',
            'id' : "id_register_form_password1" , 
        }),
        'password2': PasswordInput(attrs={
            'class': "form-control text-lg h-8 rounded-full px-2 pt-1 border-2 border-black",
            'placeholder': 'Password'
            'id' : "id_register_form_password2" , 
        }),
    }

Then in your html , just use css using the id .

Is there any method to add bootstrap style to Django password input field?

You don't have to send the bootstrap classes as attrs. Just use Crispy Forms

pip install django-crispy-forms

settings.py

INSTALLED_APPS = [
    ...
    "crispy_forms",
]

CRISPY_TEMPLATE_PACK = "bootstrap4"

HTML:

{% load crispy_forms_tags %}

<form method="post">
    {{ my_formset|crispy }}
</form>

Django sign in form, the stylizing with Bootstrap is not doing anything

Authentication forms like login have a tendency to override customisations unless set up in a particular way.

Try the following

urls.py

from django.contrib.auth import views
from .forms import LogINFO
....
    path('login/',
    views.LoginView.as_view(
        template_name="registration/login.html", #this is default, change as needed
        authentication_form=LogINFO,
        ),
    name='login'
),

views.py

from django.contrib.auth.forms import AuthenticationForm,

class LogINFO(AuthenticationForm):
    username= forms.CharField(label= 'Usuario: ', max_length=20, widget=forms.TextInput(attrs={"placeholder": "Username", 'style': 'width: 300px;', "class": "form-control"}))
    password=forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Password', 'style': 'width: 300px;', 'class': 'form-control'}))
    def __init__(self, *args, **kwargs):
        super(LogINFO, self).__init__(*args, **kwargs) 

The key elements are:

• making your form a subclass of the AuthenticationForm class (which makes sense as you are using Django's auth)
• calling the super init function (which allows the subclass to use all the methods of the class)
• and providing the class of the authentication_form in your URLs.py file

One final note, when I am overriding a template for another app like django.config.auth, I place the app in question before it in settings.py INSTALLED_APPS so that it finds my new template first.

Custom SetPasswordForm not changing password on submit

Instead of password1 and password2 it is expecting a new_password1 and a new_password2 field. Also why are you overriding a form just to add css? Look into django-widget-tweaks, It lets you modify how the widget looks from the template.

---

Related Topics