Django как захватить пользовательские данные

Question

В настоящее время у меня есть сетка изображений 3 x 3, отображающая в общей сложности 9 изображений. Полученные изображения из 3 разных папок (представляющих 3 разные категории). Код для этого находится в файле random_image.py шаблон для отображения изображений в pickfeel.html

Интерфейс выглядит следующим образом:

Я хочу пользователь нажимает на изображение и нажимает кнопку «Далее». При нажатии кнопки «Далее» будут записаны следующие данные:

• имя пользователя
• Категория выбранного изображения

Что я должен сделать, чтобы реализовать это ?

PS: я неопытен с Django, и любая помощь будет принята с благодарностью

random_Image.py

@register.simple_tag
def random_images_category1(count=3):
    valid_extensions = ('.jpg', '.jpeg', '.png', '.gif')
    rand_dir = '/static/app_pickfeel/images/normal/'
    path = '/app_pickfeel/static/app_pickfeel/images/normal/'

    files = [f for f in os.listdir(settings.BASE_DIR + path)
             if f[f.rfind("."):] in valid_extensions]

    print(random.sample(files, count))
    return [rand_dir + filename for filename in random.sample(files, count)]


@register.simple_tag
def random_images_category2(count=9):
    valid_extensions = ('.jpg', '.jpeg', '.png', '.gif')
    rand_dir = '/static/app_pickfeel/images/mania/'
    path = '/app_pickfeel/static/app_pickfeel/images/mania/'

    files = [f for f in os.listdir(settings.BASE_DIR + path)
             if f[f.rfind("."):] in valid_extensions]

    print(random.sample(files, count))
    return [rand_dir + filename for filename in random.sample(files, count)]


@register.simple_tag
def random_images_category3(count=9):
    valid_extensions = ('.jpg', '.jpeg', '.png', '.gif')
    rand_dir = '/static/app_pickfeel/images/depression/'
    path = '/app_pickfeel/static/app_pickfeel/images/depression/'

    files = [f for f in os.listdir(settings.BASE_DIR + path)
             if f[f.rfind("."):] in valid_extensions]

    print(random.sample(files, count))
    return [rand_dir + filename for filename in random.sample(files, count)]

pickfeel. html

    <!--Grid-->
    <div class="container-fluid my-container">

        {% random_images_category1 3 as images_normal %}
        <div class="row no-pad display-flex  my-row">
            {% for image in images_normal %}
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col- my-col my-col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 my-col">
                    <input class="img-thumbnail" type="image" id="image" alt="Image" src="{{ MEDIA_URL}}{{ image }}">
{#                  <img class="img-thumbnail" src="{{ MEDIA_URL}}{{ image }}">#}
                </div>
            {% endfor %}
        </div>

        {% random_images_category2 3 as images_depression %}
            <div class="row no-pad display-flex  my-row">
                {% for image in images_depression %}
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col- my-col my-col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 my-col">
                        <input class="img-thumbnail" type="image" id="image" alt="Image" src="{{ MEDIA_URL}}{{ image }}">
    {#                  <img class="img-thumbnail" src="{{ MEDIA_URL}}{{ image }}">#}
                    </div>
                {% endfor %}
            </div>

         {% random_images_category3 3 as images_mania %}
            <div class="row no-pad display-flex  my-row">
                {% for image in images_mania %}
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col- my-col my-col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 my-col">
                        <input class="img-thumbnail" type="image" id="image" alt="Image" src="{{ MEDIA_URL}}{{ image }}">
    {#                  <img class="img-thumbnail" src="{{ MEDIA_URL}}{{ image }}">#}
                    </div>
                {% endfor %}
            </div>


        <button type="button" class="btn btn-primary btn-lg btn-block">Finish</button>
    </div>