使用 HTML5 提交表单后如何指定响应页面？

在 HTML5 中，我们可以使用 action 属性来指定表单提交后所要响应的页面。当提交表单时，浏览器会发出一个 HTTP 请求，并将表单数据拼接在 URL 的查询参数中（GET 方法）或者在请求体中（POST 方法），然后服务器端会返回一个响应，以供浏览器显示或处理。

action 属性的用法

action 属性在 form 标签中使用，表示提交表单时所要请求的目标 URL 地址。其用法如下：

<form action="/submit-form.php" method="POST">
  <!-- 表单控件 -->
  <button type="submit">提交</button>
</form>

在上面的例子中，当用户点击提交按钮时，浏览器会向 /submit-form.php 发送一个 POST 请求，请求体中包含了表单中所有控件的值。然后服务器端会根据请求的数据进行处理，并返回一个响应。

如果 action 属性未指定，则默认为当前 URL 地址。如果当前页面与目标页面不在同一个域名下，则浏览器可能会拒绝提交表单，并显示一个安全警告。

target 属性的用法

target 属性表示提交表单后响应数据的显示位置，其可选值为 _self（默认值，表示在当前窗口中显示响应数据）、_blank（表示在新窗口中打开响应数据）或者一个指定窗口的名称。其用法如下：

<form action="/submit-form.php" method="POST" target="_blank">
  <!-- 表单控件 -->
  <button type="submit">提交</button>
</form>

在上面的例子中，当用户点击提交按钮时，浏览器会向 /submit-form.php 发送一个 POST 请求，并在新窗口中显示响应数据。如果将 target 属性设置为一个指定窗口的名称，则浏览器会将响应数据显示在该窗口中。

使用 JavaScript 进行自定义处理

有时候我们需要在表单提交后进行一些额外的处理，例如显示一个成功或错误的提示框，或者将响应数据显示在当前页面的某个位置上。在这种情况下，我们可以使用 JavaScript 进行自定义处理。

首先，在表单中添加一个 id 属性，方便我们在 JavaScript 中获取表单对象。例如：

<form id="my-form" action="/submit-form.php" method="POST">
  <!-- 表单控件 -->
  <button type="submit">提交</button>
</form>

然后，在 JavaScript 中使用 addEventListener 方法来监听表单的 submit 事件，并在事件处理函数中进行自定义处理。例如：

const myForm = document.getElementById('my-form');
myForm.addEventListener('submit', async (event) => {
  event.preventDefault();  // 阻止浏览器默认行为
  const formData = new FormData(myForm);  // 获取表单数据
  try {
    const response = await fetch('/submit-form.php', {
      method: 'POST',
      body: formData,
    });
    // 处理响应数据
  } catch (error) {
    // 处理异常错误
  }
});

在上面的例子中，当用户点击提交按钮时，JavaScript 代码会拦截表单的 submit 事件，阻止浏览器的默认行为。然后，它会使用 FormData API 获取表单中所有控件的值，并使用 fetch API 发送一个 POST 请求。最后，它会处理响应数据或者异常错误，并进行自定义处理。

结语

在 HTML5 中，使用 action 属性可以方便地指定表单提交后的响应页面，同时使用 target 属性可以方便地控制响应数据的显示位置。如果需要进行自定义处理，则可以使用 JavaScript 监听表单的 submit 事件，并使用相关 API 进行自定义处理。