Django登录表单设置Bootstrap form-control类样式不生效问题

你在视图层没有实例化自定义的LogINFO表单类传入模板，而是直接使用了Django auth模块自带的AuthenticationForm，模板中渲染的{{ form.username }}、{{ form.password }}是auth自带表单的字段，你在自定义LogINFO里配置的所有widget属性自然完全不会生效。

两种方案按需选择即可：

• 方案1：视图层替换为自定义表单
  如果你要使用自己编写的LogINFO表单，在登录视图中实例化这个类传入模板上下文即可，注意自行补全登录校验逻辑，参考代码：

# views.py
from django.shortcuts import render, redirect
from django.contrib.auth import login, authenticate
from .forms import LogINFO

def login_view(request):
    if request.method == "POST":
        form = LogINFO(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("index") # 替换为登录成功后的跳转路由
    else:
        form = LogINFO()
    return render(request, "login.html", {"form": form})

• 方案2：继承Django自带认证表单扩展样式（推荐）
  不需要从零编写表单、重复实现认证逻辑，只需要覆写自带AuthenticationForm的字段widget属性即可，修改forms.py：

# forms.py
from django import forms
from django.contrib.auth.forms import AuthenticationForm

class LoginForm(AuthenticationForm):
    username = forms.CharField(
        label='Usuario: ',
        max_length=20,
        widget=forms.TextInput(attrs={
            "placeholder": "Username",
            "style": "width: 300px;",
            "class": "form-control"
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'placeholder': 'Password',
            'style': 'width: 300px;',
            'class': 'form-control'
        })
    )

如果你使用Django内置的LoginView，不需要额外编写视图，直接在路由配置中指定表单类即可：

# urls.py
from django.contrib.auth.views import LoginView
from .forms import LoginForm

urlpatterns = [
    # 其他路由配置
    path('login/', LoginView.as_view(
        form_class=LoginForm,
        template_name='login.html'
    ), name='login'),
]

如果修改表单后样式仍未生效，先确认模板中已经正确引入Bootstrap的CSS资源。另外你使用的form-floating浮动布局需要给输入框配套绑定label标签，否则浮动效果会异常，正确的模板片段参考：

<form method="post">
    {% csrf_token %}
    <div class="form-floating mb-3">
        {{ form.username }}
        <label for="{{ form.username.id_for_label }}">Username</label>
    </div>
    <div class="form-floating mb-3">
        {{ form.password }}
        <label for="{{ form.password.id_for_label }}">Password</label>
    </div>
    <button type="submit" class="btn btn-primary w-100">登录</button>
</form>

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