Bootstrap 5.3滚动模态框表单问题：提交按钮置footer后失效

核心思路是拆分表单结构：让<form>仅包裹modal-body内的所有表单控件，modal-footer里的提交按钮通过form属性关联到这个表单，既保留回车提交功能，又不破坏模态框的滚动和footer固定特性。

实现代码示例 #

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#longFormModal">
  打开长表单模态框
</button>

<!-- 滚动模态框 -->
<div class="modal fade" id="longFormModal" tabindex="-1" aria-labelledby="longFormModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable"> <!-- 启用滚动的模态框 -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="longFormModalLabel">长表单提交</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 表单仅包裹模态框内的表单控件 -->
        <form id="long-form" action="/your-submit-url" method="POST">
          <!-- 这里放长表单内容，示例多个输入框 -->
          <div class="mb-3">
            <label for="input1" class="form-label">输入项1</label>
            <input type="text" class="form-control" id="input1" name="input1" required>
          </div>
          <div class="mb-3">
            <label for="input2" class="form-label">输入项2</label>
            <input type="text" class="form-control" id="input2" name="input2" required>
          </div>
          <!-- 重复添加更多表单项模拟长内容 -->
          <div class="mb-3">
            <label for="input30" class="form-label">输入项30</label>
            <input type="text" class="form-control" id="input30" name="input30" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <!-- 提交按钮通过form属性关联到表单 -->
        <button type="submit" class="btn btn-primary" form="long-form">提交</button>
      </div>
    </div>
  </div>
</div>

方案说明 #

1. 滚动特性保留：使用modal-dialog-scrollable类让modal-body自动出现滚动条，form仅在body内部，不会干扰Bootstrap默认的滚动布局。
2. footer固定性：modal-footer保持Bootstrap默认的定位逻辑，不受form标签影响，始终固定在模态框底部。
3. 回车提交功能：所有表单控件都在<form>标签内，回车时会触发该表单的提交；footer里的按钮通过form="long-form"属性绑定到表单，点击按钮也能正常提交，完全不需要JavaScript。

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