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/

如何设计这款django表格？

1 个答案: