如何设置这个 django 表单的样式？

Question

{% extends 'base.html' %}
{% block head %}
{% endblock head %}
{% block body %}
    <div>
        <div class="container" id="outer">
    <div>
        <h1>User Login Form</h1>
    </div>
    <div>
        <form method="post">

            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit" class="btn btn-block">Login</button>
        </form>
      </div>
</div>
</div>
{% endblock body %}

我在没有使用forms.py 的情况下编写了这段代码，并且在设置forms.so 的样式时遇到了麻烦。请帮我解决我的问题。

Answer 1

当您为表单显示为

{{ form.as_p }}

您只是在它们自己的段落标签中显示所有表单元素。

设置表单样式的一种方法是在自己的 div 中显示每个表单元素，如下所示，

{% for field in form %}
    <div>
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
     </div>
{% endfor %}

将它们放在自己的 div 中可以让您更好地控制它们的显示。 同样，您可以在 forms.py 的定义中为元素提供自己的类。例如，如果我有一个带有用户名字段的登录表单，我可以执行以下操作

username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'})) 

这将创建一个看起来像这样的 HTML 元素

<div> username <input type="text" class="form-control"></div>

然后，您可以使用正确的类来设置表单样式。更多信息在这里：https://docs.djangoproject.com/en/1.11/topics/forms/