HTML 设置表单提交时的 action 属性

在本文中，我们将介绍如何通过 HTML 设置表单在提交时的 action 属性。HTML 提供了 <form> 元素，用于创建包含输入字段的表单。当用户填写表单并点击提交按钮时，表单将发送到指定的 URL，用于处理用户输入的数据。这个 URL 就是通过设置表单的 action 属性来指定的。

阅读更多：HTML 教程

HTML 表单的基本结构

在深入了解如何设置表单的 action 属性之前，我们先来看一下 HTML 表单的基本结构。以下是一个简单的表单示例：

<form action="提交处理的URL" method="提交方法">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>

  <input type="submit" value="提交">
</form>

在上面的示例中，<form> 元素是表单的容器，它包含了三个子元素。第一个子元素是一个 <label> 元素，它用于显示一个文本标签，标签的 for 属性与下面的输入字段的 id 属性相对应，以便将标签与输入字段关联起来。第二个子元素是一个 <input> 元素，用于接受用户的输入。type 属性定义了输入字段的类型，id 属性用于标识字段，name 属性用于在提交表单时识别字段的名称。最后一个子元素是一个 <input> 元素，其 type 属性被设置为 “submit”，以创建一个提交按钮。

设置表单的 action 属性

要设置表单的 action 属性，只需在 <form> 元素上使用 action 属性即可。这个属性的值应该是一个有效的 URL。当用户提交表单时，浏览器会将表单数据发送到这个 URL。以下是一个示例：

<form action="http://example.com/submit" method="post">
  <!-- 表单内容 -->
</form>

在上面的示例中，表单的 action 属性被设置为 “http://example.com/submit”，意味着当用户提交表单时，数据将被发送到这个 URL。

你还可以使用相对 URL，如下所示：

<form action="/submit" method="post">
  <!-- 表单内容 -->
</form>

在上面的示例中，表单的 action 属性被设置为 “/submit”，意味着提交时数据将被发送到当前页面所在的目录下的 “submit” 文件。

如果你不指定 action 属性，表单将会使用当前页面作为默认的提交 URL，也就是说表单数据将被发送到当前页面。

提交方法

除了设置 action 属性，你还需要设置表单的提交方法。提交方法定义了如何发送数据到指定的 URL。在 HTML 中，常用的提交方法有两种：GET 和 POST。

GET 方法

GET 方法将表单数据附加到 URL 的查询字符串中，并将数据显示在 URL 地址栏中。这种方法适用于获取数据的场景，例如搜索表单。以下是一个使用 GET 方法的示例：

<form action="/search" method="get">
  <input type="text" name="query" placeholder="查询关键词">
  <input type="submit" value="搜索">
</form>

在上面的示例中，当用户提交表单时，URL 将变为类似 “/search?query=关键词” 的形式。

POST 方法

POST 方法将表单数据作为请求正文发送，并且不会将数据显示在 URL 地址栏中。这种方法适用于提交数据的场景，例如用户注册。以下是一个使用 POST 方法的示例：

<form action="/register" method="post">
  <input type="text" name="username" placeholder="用户名" required>
  <input type="password" name="password" placeholder="密码" required>
  <input type="submit" value="注册">
</form>

在上面的示例中，当用户提交表单时，数据将以 POST 方法发送到 “/register” URL。

示例：使用 JavaScript 动态设置 action 属性

除了在 HTML 中设置 action 属性，你还可以使用 JavaScript 在运行时动态设置它。这对于根据用户的选择或特定条件来改变提交 URL 的场景非常有用。以下是一个示例：

<form id="myForm" action="" method="post">
  <label for="country">选择国家：</label>
  <select id="country" name="country">
    <option value="US">美国</option>
    <option value="CN">中国</option>
    <option value="JP">日本</option>
  </select>
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById("myForm");
  const countrySelect = document.getElementById("country");

  // 当选择框的值改变时，设置表单的 action 属性
  countrySelect.addEventListener("change", function() {
    form.action = "/submit/" + countrySelect.value;
  });
</script>

在上面的示例中，当用户选择不同的国家时，表单的 action 属性会根据选择的国家动态设置为不同的 URL。

这是一个简单的示例，你可以根据实际需求来扩展和改进该代码。

总结

通过设置 HTML 表单的 action 属性，我们可以指定表单数据提交时的 URL。我们可以使用绝对 URL 或相对 URL，还可以使用 GET 方法或 POST 方法来发送数据。此外，我们还学习了如何使用 JavaScript 在运行时动态设置表单的 action 属性。根据实际需求，我们可以灵活地使用这些知识来设计和实现各种功能强大的表单。

希望本文对你理解 HTML 表单的 action 属性有所帮助！