HTMLフォームのサンプル

2024年6月8日2024年6月23日

以下は、提供された情報に基づいて説明を含んだHTMLフォームのサンプルです。日本語のラベルも対応しています。また、6番目以降のパラメーターについては、「他の入力項目を表示する」ボタンでアコーディオンで表示させています。

html
<form method="post" action="{% url 'tools:rakuten_price_search' %}" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="mb-3">
        <label for="files" class="form-label">ファイルを選択してください</label>
        <input type="file" class="form-control" id="files" name="files" multiple>
    </div>

    <!-- 1から5までのパラメーターを表示 -->
    {% for parameter in parameters|slice:":5" %}
        <div class="mb-3">
            <label for="{{ parameter.name }}" class="form-label">{{ parameter.label }}</label>
            <input type="text" class="form-control" id="{{ parameter.name }}" name="{{ parameter.name }}"
                   value="{{ request.POST.parameter.name }}">
        </div>
    {% endfor %}

    <!-- 6番目以降のパラメーターはアコーディオンで表示 -->
    <div class="accordion" id="additionalParametersAccordion">
        {% for parameter in parameters|slice:"5:" %}
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{ forloop.counter }}">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapse{{ forloop.counter }}" aria-expanded="true"
                            aria-controls="collapse{{ forloop.counter }}">
                        {{ parameter.label }}
                    </button>
                </h2>
                <div id="collapse{{ forloop.counter }}" class="accordion-collapse collapse"
                     aria-labelledby="heading{{ forloop.counter }}" data-bs-parent="#additionalParametersAccordion">
                    <div class="accordion-body">
                        <div class="mb-3">
                            <label for="{{ parameter.name }}" class="form-label">{{ parameter.label }}</label>
                            <input type="text" class="form-control" id="{{ parameter.name }}"
                                   name="{{ parameter.name }}" value="{{ request.POST.parameter.name }}">
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <button type="submit" class="btn btn-primary">調査開始</button>
</form>

このコードでは、parameters リストの各要素が辞書型で、name キーにはパラメーターの名前、label キーには日本語のラベルが入っているものとしています。適宜実際のデータに合わせて修正してください。