これにフォーム追加して

2024年6月8日

もちろんです。以下はフォームを含む完全なHTMLコードの例です。

html
<form method="post" action="" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row">
        {% for parameter in parameters %}
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="{{ parameter }}" class="form-label">{{ parameter }}</label>
                    <input type="text" class="form-control" id="{{ parameter }}" name="{{ parameter }}"
                           value="{{ request.POST.parameter }}">
                </div>
            </div>
            {% if forloop.counter|divisibleby:3 and not forloop.last %}
    </div>
    <div class="row">
            {% endif %}
        {% endfor %}
    </div>

    <!-- アコーディオン -->
    <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                            aria-expanded="true" aria-controls="collapseOne">
                        追加項目を表示
                    </button>
                </h5>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-bs-parent="#accordion">
                <div class="card-body">
                    {% for parameter in parameters|slice:"6:" %}
                        <div class="mb-3">
                            <label for="{{ parameter }}" class="form-label">{{ parameter }}</label>
                            <input type="text" class="form-control" id="{{ parameter }}" name="{{ parameter }}"
                                   value="{{ request.POST.parameter }}">
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- フォームの送信 -->
    <button type="submit" class="btn btn-primary" style="height: 60px;">調査開始</button>
</form>

このコードでは、フォームが最初の row 内に配置されており、アコーディオン部分も3カラムのデザインに組み込まれています。フォームを追加する場合は、その部分を適切に拡張してください。