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}} в приведенном выше фрагменте

Интерфейс ввода полей должен выглядеть следующим образом:

Но мой интерфейс выглядит так:

my urls.py имеет:

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

Где я должен добавить поля формы, чтобы я мог получить желаемый интерфейс для ввода поля

Answer 1

Используя django -widget-tweaks , я смог создать эту прекрасную страницу входа. Нам просто нужно добавить имя класса в render_field

Настроить рендеринг поля формы в шаблонах, а не в определениях уровня python. Поддерживается изменение CSS классов и HTML атрибутов.

Этого должно быть достаточно для дизайнеров, чтобы настроить представление поля (используя CSS и ненавязчивый javascript), не касаясь кода python.

Изменения, которые я сделал:

{% 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 2

{{form.username}} будет go вместо ввода type = "username" и {{form.password}} вместо ввода типа ввода, это создаст почтовые ящики по умолчанию.

Если вы хотите использовать свой собственный пользовательский интерфейс, просто убедитесь, что элемент input 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>