Django forms styling input field for login page - django

Question

I am working with Django templets and I am trying to create a beautiful login page.
I want to use this snippet to beautify my login page input fields.
<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>
where should I keep my {{form.username}} and {{form.password}} in the above snippet
The input fields UI should look like :
But my UI looks like :
my urls.py has :
path('login/', auth_views.LoginView.as_view(template_name='post/login.html'), name='login'),
Where should i add the form fields so that i can get the desired UI for my input fields

Answer 1

The {{form.username}} will go inplace of input type="username" and {{form.password}} inplace of input type password this will create default email boxes.
If you want to use your own UI just make sure, the input html element has corresponding name="username" and name="password" as an attribute.
<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

By using django-widget-tweaks I was able to create this beautiful login page.
We just need to add the class name to the render_field
Tweak the form field rendering in templates, not in python-level form definitions. Altering CSS classes and HTML attributes are supported.
That should be enough for designers to customize field presentation (using CSS and unobtrusive javascript) without touching the python code.
The changes which I made are:
{% 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 is an excellent solution. Here are the steps to install.
pip install django-widget-tweaks.
add 'widget_tweaks' to APPLICATION_INSTALLED in settings.py.
use in template.
{% load widget_tweaks %}