如何垂直排列表单字段？

Question

我正在使用表单 class 创建登录表单。不幸的是，当我运行页面时，我发现字段的排列是水平的。能帮我竖着做吗？

在下面的 forms.py 代码中：

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)

这里是 views.py 代码：

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})

这里是 login.html 代码：

{% block content %}
    <form method="POST">
        {% csrf_token %}
        {{loginform}}            
        <input type="submit" value="Save">
    </form>
{% endblock content %}

Answer 1

第一种方式使用as_p

{% block content %}
    <form method="POST">
        {% csrf_token %}
        {{loginform.as_p}}            
        <input type="submit" value="Save">
    </form>
{% endblock content %}

使用循环的第二种方式 如果您想向表单添加任何其他样式，则

{% 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 使用 table

{% block content %}
<form method="POST">
    {% csrf_token %}
    <table>
       {{ loginform.as_table }}
    </table>
    <button type="submit">Save</button>
</form>
{% endblock %}

如何垂直排列表单字段？

How to arrange forms fields vertically?

django

django-views

django-forms

django-templates