Django循环嵌套form标签导致Chrome中主form提前闭合问题求助

问题原因 #

HTML 规范明确禁止 <form> 元素嵌套，浏览器遇到嵌套的 form 标签时会触发自动容错机制，提前闭合上层未闭合的 form 标签，这就是你看到主 form 在第一次循环后自动闭合的核心原因。

你当前的代码逻辑是把多个子 <form> 写在了主 <form> 内部，违反了嵌套规则，Chrome 解析到第一个循环里的 <form> 标签时，会自动把外层的主 form 先闭合，再渲染这个内部 form，后续的循环内容和提交按钮就都不在主 form 范围内了。

解决方案 #

如果你要实现单个按钮提交多组表单数据，完全不需要嵌套 form，调整逻辑如下：

• 直接去掉循环里的 <form> 和对应的 </form> 标签，所有表单字段都会渲染在主 form 内部，提交时会统一提交到主 form 的 action 地址
• 注意给每组表单的字段加上区分前缀，避免不同组的同名字段覆盖，你可以在 Django 生成 form 实例的时候给每个 form 指定前缀参数，比如 Form(prefix=f'hour_{hour}')，这样提交后后台可以按前缀区分不同组的表单数据

修正后的代码示例：

{% load crispy_forms_tags %}
<form method="POST" action="{% url 'App:Submit' %}">
    {% csrf_token %}
    {% for form in forms %}
    <h3>Hour {{ form.Hour }}: </h3>
    {% csrf_token %}
    {{ form|crispy }}
    <br>
    {% endfor %}
    <br>
    <div class="col text-center">
        <button class="btn btn-primary" type="submit">Send</button>
    </div>
</form>

内容的提问来源于stack exchange，提问作者Alberto Vona