在UserCreationForm的默认元素周围添加自定义HTML元素

Question

我使用widget_tweaks添加自定义类到输入表单。
但是我如何添加这样的整个HTML元素来美化用户名呢?

<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" />
</div>

我正在使用一个基本的注册表单，但希望在它周围包含自定义HTML。

{% load widget_tweaks %}
{% for field in form %}
<div class="form-group mt-3 {% if field.errors %}alert alert-danger{% endif %}">
{{ field.errors }}
{{ field.label_tag }}
{% render_field field class="form-control" %}
{% if field.help_text %}<small class="text-muted">{{ field.help_text|safe }}</small>{% endif %}
</div>
{% endfor %}

Answer 1

我是这样解决的，但我不确定这是不是正确的方法。

{% load widget_tweaks %}
{% for field in form %}
<div class="form-group mt-3 {% if field.errors %}alert alert-danger{% endif %}">
{{ field.errors }}
{% if field.label == 'Username' %}
<label for="basic-url" class="form-label">{{ field.label_tag }}</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
{% render_field field class="form-control" %}
</div>  
{% else %}
{{ field.label_tag }}
{% render_field field class="form-control" %}
{% if field.help_text %}<small class="text-muted">{{ field.help_text|safe }}</small>{% endif %}  
{% endif %}      
</div>
{% endfor %}