How to customize default auth login form in Django?

Question

How do you customize the default login form in Django?

# demo_project/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('', include('pages.urls')),
    path('users/', include('users.urls')), # new
    path('users/', include('django.contrib.auth.urls')), # new
    path('admin/', admin.site.urls),
]

<!-- templates/registration/login.html -->
    <h2>Login</h2>
    <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Login</button>
    </form>

Above code works but I need to customize that {{form.as_p}} Where is that form or can it be override? Thanks for the help.

Answer 1

you can overide default Authentication form

like this

from django.contrib.auth.forms import AuthenticationForm, UsernameField

from django import forms


class UserLoginForm(AuthenticationForm):
    def __init__(self, *args, **kwargs):
        super(UserLoginForm, self).__init__(*args, **kwargs)

    username = UsernameField(widget=forms.TextInput(
        attrs={'class': 'form-control', 'placeholder': '', 'id': 'hello'}))
    password = forms.CharField(widget=forms.PasswordInput(
        attrs={
            'class': 'form-control',
            'placeholder': '',
            'id': 'hi',
        }
))

in url.py you can pass this custom authentication form like this

from django.contrib.auth import views

from myapp.forms import UserLoginForm
urlpatterns = [

    path(
        'login/',
        views.LoginView.as_view(
            template_name="login.html",
            authentication_form=UserLoginForm
            ),
        name='login'
)
]

also, you can override the login template

and customize the template as per you requirement

<form method="post">
    {{ form.non_field_errors }}
    <div class="form-group">
        
        <label for="{{ form.username.id_for_label }}">Username:</label>
        {{ form.username }}
        {{ form.username.errors }}

    </div>
    <div class="form-group">
       
        <label for="{{ form.password.id_for_label }}">Password:</label>
        {{ form.password }}
        {{ form.password.errors }}
    </div>
    <button type="submit">Login</button>
</form>

Answer 2

You can customise your form rendering by overriding/editing templates/registration/login.html as below.

This is for example only you can change css styles and formatting as you want.

<h2>Login</h2>
<form method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.username.errors }}
        <label for="{{ form.username.id_for_label }}">Username:</label>
        {{ form.username }}
    </div>
    <div class="fieldWrapper">
        {{ form.password.errors }}
        <label for="{{ form.password.id_for_label }}">Password:</label>
        {{ form.password }}
    </div>
    <button type="submit">Login</button>
</form>

You may also loop over form's fields

<h2>Login</h2>
<form method="post">
    {% for field in form %}
        <div class="fieldWrapper">
            {{ field.errors }}
            {{ field.label_tag }} {{ field }}
            {% if field.help_text %}
            <p class="help">{{ field.help_text|safe }}</p>
            {% endif %}
        </div>
    {% endfor %}
    <button type="submit">Login</button>
</form>

You could also check more form rendering options from here

Answer 3

From question, I assume you want to change the html template's look and feel instead of python forms class. In this case all you need to do is include input type fields with the matching names and ids attributes what default django-auth form expects. You can achieve this using following steps.

1. Render the template as you are rendering right now (using {{form.as_p}}).
2. Inspect elements and check user name, password and submit button's name and ids generated by default auth form.
3. Recreate same tags using your own custom style.

It comes something similar to below:

<form method="POST">
  {% csrf_token %}
  <input type="input" class="form-control" name="username" id="inputEmail" placeholder="Username" required >
  <input type="password" class="form-control" name="password" id="inputPass" placeholder="Password" required>
  <button type="submit" style="opacity: 1 !important;">Login</button>
  <a href="/password_reset">Reset Password</a>
</form>

After this you can use your imagination and design the login form as per your requirement.

Hope this helps.