Django中如何拆分表单到多div且首个div含独立表单？

首先明确核心问题：HTML规范不允许<form>标签嵌套，浏览器会自动修正这种无效结构，导致你的第二个表单被合并到第一个表单中，这和Django无关，是原生HTML的限制。

以下是几种可行的解决方案：

方案1：独立表单+CSS布局模拟嵌套视觉效果 #

将两个表单设置为独立结构，通过CSS调整样式，让第二个表单视觉上嵌套在第一个div内，实际DOM结构为平级。

示例代码：

<!-- 第一个表单（黑色高亮） -->
<form method="post" id="form1" class="black-highlight">
    {% csrf_token %}
    <!-- 第一个橙色div容器 -->
    <div class="orange-highlight">
        <!-- 表单1的字段 -->
        <textarea name="form1_content"></textarea>
        <button type="submit" name="submit_form1">提交表单1</button>
        
        <!-- 独立的第二个表单（红色高亮） -->
        <form method="post" id="form2" class="red-highlight">
            {% csrf_token %}
            <textarea name="form2_content"></textarea>
            <button type="submit" name="submit_form2">提交表单2</button>
        </form>
    </div>
    <!-- 第二个橙色div容器 -->
    <div class="orange-highlight">
        <textarea name="form1_extra_content"></textarea>
    </div>
</form>

注意事项： #

• 两个表单都需要添加{% csrf_token %}以通过Django的CSRF验证
• 给提交按钮添加不同的name属性，在视图函数中通过判断request.POST.get('submit_form1')或request.POST.get('submit_form2')来区分提交逻辑
• 通过CSS调整.red-highlight的margin、padding等样式，让它看起来像是嵌套在第一个div内

方案2：AJAX提交第二个表单 #

移除第二个表单的<form>标签，用JavaScript监听提交按钮事件，通过AJAX异步提交数据，这样既能保持视觉上的嵌套结构，又不会和第一个表单冲突。

示例代码：

<form method="post" id="form1" class="black-highlight">
    {% csrf_token %}
    <div class="orange-highlight">
        <textarea name="form1_content"></textarea>
        <button type="submit">提交表单1</button>
        
        <!-- 第二个表单区域（红色高亮，无form标签） -->
        <div class="red-highlight">
            <textarea id="form2_content"></textarea>
            <button type="button" id="submit-form2">提交表单2</button>
        </div>
    </div>
    <div class="orange-highlight">
        <textarea name="form1_extra_content"></textarea>
    </div>
</form>

<script>
document.getElementById('submit-form2').addEventListener('click', function() {
    const content = document.getElementById('form2_content').value;
    fetch('/submit-form2/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `form2_content=${encodeURIComponent(content)}`
    })
    .then(response => response.json())
    .then(result => {
        // 根据返回结果处理交互，比如提示提交成功
        console.log(result);
    });
});
</script>

配套视图示例： #

from django.http import JsonResponse

def submit_form2(request):
    if request.method == 'POST':
        content = request.POST.get('form2_content')
        # 处理表单2的逻辑，比如保存到数据库
        return JsonResponse({'status': 'success', 'message': '提交成功'})
    return JsonResponse({'status': 'error', 'message': '请求方式错误'})

方案3：使用Django表单集（FormSet） #

如果两个表单是同类型的关联数据，可以使用Django的FormSet来管理，不过这种方案更适合批量处理同结构表单的场景，需要根据你的实际业务需求判断是否适用。

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