如何制作一个漂亮的登录 Django 表单

如果您正在开发一个 Django 网站，您可能需要一个漂亮而直观的登录表单。在这篇文章中，我们将向您展示如何使用 Django 自带的表单类创建一个漂亮的登录表单。

创建 Django 登录表单的步骤

步骤 1: 创建一个 Django 表单类

首先，我们需要创建一个 Django 表单类，并指定该类使用的字段和验证规则。在这个例子中，我们使用一个 UsernameField 和一个 PasswordField 来输入用户名和密码。

from django import forms

class LoginForm(forms.Form):
    username = forms.CharField(max_length=100)
    password = forms.CharField(max_length=100, widget=forms.PasswordInput)

这个表单类还使用了一个 PasswordInput 控件来隐藏密码输入内容。

步骤 2: 创建一个 Django 视图函数

接下来，我们需要创建一个 Django 视图函数，负责处理用户提交的表单数据。在这个例子中，我们将会注册一个 login 视图函数，处理用户的登录请求。

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login

def login(request):
    if request.method == 'POST':
        form = LoginForm(request.POST)
        if form.is_valid():
            username = form.cleaned_data['username']
            password = form.cleaned_data['password']
            user = authenticate(request, username=username, password=password)
            if user is not None:
                login(request, user)
                return redirect('/dashboard/')
    else:
        form = LoginForm()
    return render(request, 'login.html', {'form': form})

在这个 login 视图函数中，我们首先声明一个表单类实例来处理传入的表单数据。如果表单数据有效，我们使用 Django 内置的 authenticate 方法来验证用户是否有效，使用 login(request, user) 方法来将用户登录到网站，并最后将其重定向到 /dashboard/ 页面。

步骤 3: 创建一个 Login HTML 模板

最后，我们需要创建一个 HTML 模板，用于呈现登录表单。在这个例子中，我们采用 Bootstrap 来呈现漂亮的表单样式。

{% extends "base.html" %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Sign In</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" method="post">
                            {% csrf_token %}
                            {{ form.as_p }}
                            <button type="submit" class="btn btn-lg btn-success btn-block">Login</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

在这个模板中，我们将表单类实例作为模板参数传递，并使用 form.as_p 来将表单渲染为 HTML 元素。

步骤 4: 执行 Django 项目进行测试

现在，您已经成功创建了一个 Django 登录表单。启动项目以测试您的表单，并访问 /login/ 页面来查看漂亮的登录表单。

总结

在本文中，我们向您展示了如何使用 Django 自带的表单类来创建一个漂亮的登录表单。我们的教程涵盖了创建表单类、视图函数和 HTML 模板的步骤。通过这篇文章，相信你可以创建出自己所需的登录表单，并为您的用户提供良好的网站体验。