对于位于 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 关联，以防可能需要不同的提交参数。

对于位于 Bootstrap 模态中的表单，提交按钮应该放在哪里？

Where should submit buttons be located for a form located in a Bootstrap modal?

javascript

forms

twitter-bootstrap

bootstrap-modal