如何在Django的UserCreationForm中将两个密码字段放在一行，或者如何在UserCreationForm中添加我自己的html？

Question

我通过扩展Django的UserCreationForm创建了一个注册表单。因为Django默认添加了所有的HTML，所以我不能在其中放入我自己的HTML，只是为了稍微定制一下。

这是我当前的注册表：

​

​

您可以看到password和password confirmation是相继添加的。我想把它们并排展示，就像这样：

​

​

我不知道在哪里添加我的超文本标记语言让它看起来像上面的那个，这是我的signup.html：

{% block content %}
<form action="." method="POST" class="signup">
    <h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" value="Sign up" class="btn btn-primary btn-block">
    <p class="display-6 bg-signup p-3">Have an account <a href="#">Sign In</a></p>
</form>
{% endblock content %}

Answer 1

在过去的36小时内，没有人回答我的问题。终于，我找到了我自己问题的答案。所以我回答了我自己的问题，也许将来有人会读到它，并发现它是有用的。

在添加了自定义的HTML和CSS之后，我终于设法并排显示了两个密码域，如下所示：

​

​

我使用django-widget-tweaks来实现此结果:正如您在上图中所看到的，两个密码字段被并排添加。此外，还显示了错误。

这是之前的html表单：

{% block content %}
<form action="." method="POST" class="signup">
    <h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" value="Sign up" class="btn btn-primary btn-block">
    <p class="display-6 bg-signup p-3">Have an account <a href="#">Sign In</a></p>
</form>
{% endblock content %}

现在HTML代码看起来像下面的代码，代码很好地解释了自己。所以我不想详细阐述它。我使用的是bootstrap 4。

{% block content %}
<div class="accountform">
    <form method="POST">
        <h4 class="display-6 text-white p-3">Create your account</h4>
        {% csrf_token %}

        <div class="alert alert-danger p-0" style="border:none;">
            {% for field in form.visible_fields %}
            {% for error in field.errors %}
            <span class="err">{{ error }}</span><br>
            {% endfor %}
            {% endfor %}
        </div>

        <div class="form-group">
            <label for="id_username">Username</label>
            {% render_field form.username class='form-control' placeholder='John Doe' %}
        </div>

        <div class="form-group">
            <label for="id_email">Email</label>
            {% render_field form.email class='form-control' placeholder='johndoe@email.com' %}
        </div>

        <div class="row">
            <div class="form-group col-md-6">
                <label for="id_password1">Password</label>
                {% render_field form.password1 class='form-control' placeholder='****' %}
            </div>
            <div class="form-group col-md-6">
                <label for="id_password2">Confirm Password</label>
                {% render_field form.password2 class='form-control' placeholder='****' %}
            </div>
        </div>

        <input type="submit" value="Sign up" class="btn btn-primary btn-block">
        <p class="display-6 bg-signup p-3">Have an account <a href="{% url 'signin' %}">Sign In</a></p>
    </form>
</div>

</div>
{% endblock content %}

不要忘记在模板的顶部添加{% load widget_tweaks %}。

谢谢