Django добавление элемента в динамическую форму

Есть ли способ добавить элемент изображения для каждого ввода в форме?

Мне нужно иметь изображение рядом с каждым вводом из формы. Я создал этот образец формы и модели, который работает так же, как и в моем коде. Результат, который я хотел бы получить: this.

Код образца формы

class CreateProfileForm(forms.ModelForm):
    fieldsets = [
        ("Fieldset 1", {'fields': [
            'first_name', 'last_name'
        ]}),
        ("Fieldset 2", {'fields': [
            'address', 'phone'
        ]}),
    ]

    class Meta:
        model = Profile
        fields = '__all__'

Код примерной модели

class Profile(models.Model):
    # FIELDSET 1
    first_name = models.CharField(max_length=50, verbose_name="First name")
    last_name = models.CharField(max_length=50, verbose_name="Last name")

    # FIELDSET 2
    address = models.CharField(max_length=50, verbose_name="Address")
    last_name = models.EmailField(verbose_name="Email")

Вид

def create_profile(request):
    form = CreateProfileForm()
    return render(request, 'form.html', {'form': form})

Шаблон с формой

{% load forms_fieldset static %}
<div class="form data-form">
    <form>
        {{ form|fieldset:'#000080' }}

        <div class="form-group">
            <button name="upload" type="submit">Create</button>
        </div>
    </form>
</div>

Чтобы добавить элемент изображения для каждого ввода в форме, вы можете использовать метод as_table для формы в вашем шаблоне, чтобы отобразить поля формы в виде HTML-таблицы. Каждый ввод будет отображаться как строка таблицы, и вы можете добавить элемент img к каждой строке для отображения изображения.

Вот пример того, как это можно сделать в вашем шаблоне:

<div class="form data-form">
    <form>
        {% for fieldset in form.fieldsets %}
            <fieldset style="border-color: #000080;">
                <legend style="color: #000080;">{{ fieldset.legend }}</legend>
                <table>
                    {% for field in fieldset %}
                        <tr>
                            <td><img src="{{ field.image_url }}" alt="{{ field.label }}" /></td>
                            <td>{{ field }}</td>
                            <td>{{ field.help_text }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </fieldset>
        {% endfor %}

        <div class="form-group">
            <button name="upload" type="submit">Create</button>
        </div>
    </form>
</div>

В приведенном выше коде я использовал метод as_table на форме, чтобы отобразить поля формы в виде HTML-таблицы.

Вернуться на верх