用于登录页面的 Django 表单样式输入字段

Question

我正在使用 Django 模板，我正在尝试创建一个漂亮的登录页面。

我想用这个片段来美化我的登录页面输入字段。

 <div class="form-label-group">
                                <input type="username" id="inputuser" class="form-control" placeholder="Email address" required autofocus>
                                <label for="inputuser">Username</label>
                            </div>

                            <div class="form-label-group">
                                <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                                <label for="inputPassword">Password</label>
                            </div>
</div>

我应该把我的 {{form.username}} 和 放在哪里{{form.password}} 上面的片段

输入字段 UI 应如下所示：

但是我的 UI 看起来像：

我的urls.py有：

path('login/', auth_views.LoginView.as_view(template_name='post/login.html'), name='login'),

我应该在哪里添加表单字段，以便我可以为我的输入字段获得所需的 UI

Answer 1

{{form.username}} 将代替输入类型="username"，{{form.password}} 将代替输入类型密码，这将创建默认邮箱。

如果您想使用自己的 UI，只需确保输入的 html 元素具有相应的 name="username" 和 name="password" 作为属性。

<div class="form-label-group">
                                <input type="username" id="inputuser" name="username" class="form-control" placeholder="Email address" required autofocus>
                                <label for="inputuser">Username</label>
                            </div>

                            <div class="form-label-group">
                                <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
                                <label for="inputPassword">Password</label>
                            </div>
</div>

Answer 2

通过使用 django-widget-tweaks 我能够创建这个漂亮的登录页面。我们只需要将 class 名称添加到 render_field

调整模板中的表单字段呈现，而不是 python 级表单定义。支持更改 CSS classes 和 HTML 属性。

这应该足以让设计人员在不触及 python 代码的情况下自定义字段表示（使用 CSS 和不显眼的 javascript）。

我所做的更改是：

{% load widget_tweaks %}     
                             <div class="form-label-group">
                             {% render_field form.username placeholder=form.username.label class+="form-control"  %}
                                <label for="id_username">User name</label> 
                            </div>

                            <div class="form-label-group">
                            {% render_field form.password placeholder=form.password.label class+="form-control"  %}
                                <label for="id_password">Password</label>
                            </div>

Answer 3

widget_tweak 是一个很好的解决方案。下面是安装步骤。

pip 安装 django-widget-tweaks。
将 'widget_tweaks' 添加到 settings.py 中的 APPLICATION_INSTALLED。
在模板中使用。

{% 负载 widget_tweaks %}

用于登录页面的 Django 表单样式输入字段

Django forms styling input field for login page

django

django-templates

django-forms

django-authentication

django-login