如何自定义 Django 更改密码表单的外观

Question

如何自定义 Django 更改密码表单的外观，我尝试过，但没有任何反应，我不知道为什么，有什么想法吗？

forms.py：

from django.contrib.auth.forms import PasswordChangeForm

class MyPasswordChangeForm(PasswordChangeForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["old_password"].widget = forms.PasswordInput(attrs={"class": "form-control"})
        self.fields["new_password1"].widget = forms.PasswordInput(attrs={"class": "form-control"})
        self.fields["new_password2"].widget = forms.PasswordInput(attrs={"class": "form-control"})

urls.py：

# Change Password
path(
    'change-password/',
    auth_views.PasswordChangeView.as_view(
        template_name='user/commons/change-password.html',
        success_url = '/'
    ),
    name='change_password'
),

views.py：

from django.contrib.auth.views import PasswordChangeView
from blog_app.forms import MyPasswordChangeForm

class PasswordChangeView(PasswordChangeView):
    form_class = MyPasswordChangeForm
    template_name = "user/commons/change-password.html"

change_password.html：

<div class="form-group">
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <a href="{% url 'home' %}">Back</a>
    <button type="submit">Submit</button>
</form>
</div>

Answer 1

哎呀，我的错误问题出在 urls.py 中，它一定是这样的

views.PasswordChangeView.as_view

而不是

auth_views.PasswordChangeView.as_view

一定是这样的

    # Change Password
path(
    'change-password/',
    views.PasswordChangeView.as_view(
        template_name='user/commons/change-password.html',
        success_url = '/'
    ),
    name='change_password'
),

Answer 2

<style>
.container2 {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
}

<div class="container2 mt-5">
<h2>Change Password</h2>
<form method="POST">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_old_password">Old Password</label>
        <input type="password" id="id_old_password" name="old_password">
    </div>
    <div class="form-group">
        <label for="id_new_password1">New Password</label>
        <input type="password" id="id_new_password1" name="new_password1">
    </div>
    <div class="form-group">
        <label for="id_new_password2">Confirm New Password</label>
        <input type="password" id="id_new_password2" name="new_password2">
    </div>
    <button type="submit" class="btn">Submit</button>
</form>