对于位于 Bootstrap 模式中的表单，提交按钮应位于何处？

Question

下面是直接来自the docs 的示例HTML，除了我在表单元素中添加了id。为什么他们在表单之外显示按钮？它们不应该位于表单中，以便在单击时提交表单吗？请在底部查看我的典型 JavaScript。如果没有，是否需要将事件附加到button.btn-primary，然后将其提交表单，或者甚至不使用此事件并仅在单击主按钮事件中完成工作？

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="my-form">
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

我的典型 JS 应该是这样的：

const form = document.getElementById( "my-form" );
form.addEventListener( "submit", function ( event ) {
    event.preventDefault();
    // Make a XMLHttpRequest as necessary
} );

Answer 1

button 元素有一个可选的form attribute，用于将其与form 相关联。这允许将button 定位在任何位置，而不必位于form 元素内。在可能需要不同提交参数的情况下，它还允许多个 button 元素与单个 form 相关联。