Как поместить два поля пароля подряд в UserCreationForm в Django, или как добавить свой собственный HTML в UserCreationForm?

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 %} вверху шаблона.

Спасибо