如何在保留内置功能的前提下自定义Django的UserCreationForm与AuthenticationForm样式？

问题背景 #

用Django的AuthenticationForm实现登录、UserCreationForm实现注册，原本用{{ form.as_p }}渲染一切正常，但为了添加Tailwind样式重写表单后，UserCreationForm原本的密码一致性校验和提示功能丢失了。需求是保留表单所有内置功能，仅给表单元素添加Tailwind类block border border-grey-light w-full p-3 rounded mb-4。

原重写的表单及登录视图代码如下：

原LoginForm #

class LoginForm(AuthenticationForm):
    username = forms.CharField(required=True, widget=TextInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "username", "placeholder": "Username"}))
    password = forms.CharField(widget=PasswordInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "password", "placeholder": "Password"}))

原RegistrationForm #

class RegistrationForm(UserCreationForm):
    email = forms.EmailField(required=True, widget=EmailInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "email", "placeholder": "Email"}))
    password1 = forms.CharField(widget=PasswordInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "password1", "placeholder": "Password"}))
    password2 = forms.CharField(widget=PasswordInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "password2", "placeholder": "Confirm password"}))

    class Meta:
        model = User
        fields = ['username', 'first_name', 'last_name', 'email', 'password1', 'password2']
        widgets = {
            'username': TextInput(attrs={'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                         "type": "text", "name": "username", "placeholder": "Username"}),
            'first_name': TextInput(attrs={'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                           "type": "text", "name": "first_name", "placeholder": "First Name"}),
            'last_name': TextInput(attrs={'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                          "type": "text", "name": "last_name", "placeholder": "Last Name"}),
        }

原登录视图 #

def login_user(request, *args, **kwargs):
    if request.method == "POST":
        form = LoginForm(data=request.POST)
        username = request.POST['username']
        password = request.POST['password']
        if form.is_valid():
            user = authenticate(request, username=username, password=password)
            if user is not None:
                login(request, user)
                return redirect('/first')
            else:
                pass
        else:
            pass
    else:
        form = LoginForm()

    context = {
        'form': form
    }
    return render(request, "registration/login.html", context)

问题原因 #

直接在子类中重新定义password1、password2、username等字段时，会完全覆盖父类表单中原有的字段定义，连带丢失父类字段绑定的内置校验逻辑（比如UserCreationForm中检查密码一致性的clean_password2方法）。

解决方案 #

不要重新定义字段，而是通过重写表单的__init__方法，给原有字段的widget添加样式类，既保留父类所有内置功能，又能自定义外观。

1. 修正后的LoginForm #

from django.contrib.auth.forms import AuthenticationForm
from django.forms import TextInput, PasswordInput

class LoginForm(AuthenticationForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 给username字段添加样式和占位符
        self.fields['username'].widget.attrs.update({
            'class': "block border border-grey-light w-full p-3 rounded mb-4",
            'placeholder': "Username"
        })
        # 给password字段添加样式和占位符
        self.fields['password'].widget.attrs.update({
            'class': "block border border-grey-light w-full p-3 rounded mb-4",
            'placeholder': "Password"
        })

2. 修正后的RegistrationForm #

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django.forms import TextInput, EmailInput, PasswordInput
from django import forms

class RegistrationForm(UserCreationForm):
    # 仅扩展email字段，保留默认widget，后续在__init__中添加样式
    email = forms.EmailField(required=True)

    class Meta:
        model = User
        fields = ['username', 'first_name', 'last_name', 'email', 'password1', 'password2']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 提取公共样式类，避免重复编写
        base_css_class = "block border border-grey-light w-full p-3 rounded mb-4"
        
        # 逐个给字段设置样式和占位符
        self.fields['username'].widget.attrs.update({
            'class': base_css_class,
            'placeholder': "Username"
        })
        self.fields['first_name'].widget.attrs.update({
            'class': base_css_class,
            'placeholder': "First Name"
        })
        self.fields['last_name'].widget.attrs.update({
            'class': base_css_class,
            'placeholder': "Last Name"
        })
        self.fields['email'].widget.attrs.update({
            'class': base_css_class,
            'placeholder': "Email"
        })
        self.fields['password1'].widget.attrs.update({
            'class': base_css_class,
            'placeholder': "Password"
        })
        self.fields['password2'].widget.attrs.update({
            'class': base_css_class,
            'placeholder': "Confirm password"
        })

3. 优化后的登录视图（可选） #

原视图中直接从request.POST取用户名密码没必要，form.is_valid()后可通过form.get_user()直接获取用户，简化代码：

def login_user(request, *args, **kwargs):
    if request.method == "POST":
        form = LoginForm(data=request.POST)
        if form.is_valid():
            user = form.get_user()
            login(request, user)
            return redirect('/first')
    else:
        form = LoginForm()

    return render(request, "registration/login.html", {'form': form})

修改后既能保留UserCreationForm的密码一致性校验、密码强度提示，以及AuthenticationForm的登录校验逻辑，又能给所有表单元素添加上需要的Tailwind样式。

内容的提问来源于stack exchange，提问作者Callum