How to arrange forms fields vertically? [duplicate] - django

Question

This question already has answers here:
How to change form layouts in Django 1.8
(6 answers)
Closed last year.
I am creating a login form by using the Forms class. Unfortunately, when I run the page I found the arrangement of the fields is horizontal. Can you help me to make it vertically, please?
In the bellow the forms.py code:
from django import forms
class LoginForm(forms.Form):
username = forms.CharField(label='Your name', max_length = 50)
password = forms.CharField(max_length = 50, widget=forms.PasswordInput)
And here is the views.py code:
from django.shortcuts import render
from .models import Login
from .forms import LoginForm
# Create your views here.
def login_function(request):
try:
username = request.POST.get('username')
password = request.POST.get('password')
data = Login(username = username, password = password)
data.save()
except:
x = 'error'
return render(request,'pages/login.html', {'loginform':LoginForm})
And here is login.html code:
{% block content %}
<form method="POST">
{% csrf_token %}
{{loginform}}
<input type="submit" value="Save">
</form>
{% endblock content %}

Answer 1

First Way using as_p
{% block content %}
<form method="POST">
{% csrf_token %}
{{loginform.as_p}}
<input type="submit" value="Save">
</form>
{% endblock content %}
Second Way using loop
If you want to add any additional styles to your form, then
{% block content %}
<form method="POST">
{% csrf_token %}
{% for field in loginform%}
<div class="fieldWrapper">
{{ field.errors }}
{{ field.label_tag }} <br/>
{{ field }}
</div>
{% endfor %}
<button type="submit">Save</button>
</form>
{% endblock %}
Third-way using table
{% block content %}
<form method="POST">
{% csrf_token %}
<table>
{{ loginform.as_table }}
</table>
<button type="submit">Save</button>
</form>
{% endblock %}