html - 如何在 Django 的 UserCreationForm 中连续放置两个密码字段，或者如何在 UserCreationForm 中添加我自己的 html？

Question

我通过扩展 Django 的 UserCreationForm 创建了一个注册表单。由于 Django 默认添加所有 HTML，我无法将自己的 HTML 放入其中，只是稍微自定义一下。

这是我当前的注册表单的样子:

可以看到password和password confirmation是相继添加的。我想并排展示它们，如下所示:

我不知道在哪里添加我的 HTML 以使其看起来像上面的那样，这是我的 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 %}。

谢谢