如何在 Django 中自定义默认的 auth 登录表单？

Question

你如何自定义Django中的默认登录表单？# demo_project/urls.pyfrom django.contrib import adminfrom django.urls import include, pathurlpatterns = [    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>上面的代码有效，但我需要自定义 {{form.as_p}} 那个表单在哪里或者可以被覆盖？谢谢您的帮助。

Answer 1

您可以覆盖默认的身份验证表单

像这样

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',

        }

))

在 url.py 中，您可以像这样传递此自定义身份验证表单

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'

)

]

此外，您可以覆盖登录模板

并根据您的要求自定义模板

<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

您可以通过覆盖/编辑templates/registration/login.html来自定义您的表单呈现，如下所示。

例如，只有您可以根据需要更改 css 样式和格式。

<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>

您也可以遍历表单的字段

<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>

Answer 3

从问题中，我假设您想更改 html 模板的外观而不是 python 表单类。在这种情况下，您需要做的就是包含具有匹配名称和 ids 属性的输入类型字段，这是默认的 django-auth 表单所期望的。您可以使用以下步骤实现此目的。

1. 在渲染时渲染模板（使用 {{form.as_p}}）。

2. 检查元素并检查用户名、密码和提交按钮的名称和默认身份验证表单生成的 ID。

3. 使用您自己的自定义样式重新创建相同的标签。

它类似于以下内容：

<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>

在此之后，您可以发挥您的想象力并根据您的要求设计登录表单。

希望这可以帮助。