HTML 表单和 action=””

在本文中，我们将介绍HTML表单的用法，并重点讲解action=””属性的应用。

阅读更多：HTML 教程

HTML 表单的基本用法

HTML表单用于收集用户输入的数据，它使用一系列的表单元素，如输入框、下拉列表、复选框等来构建。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

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

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

上述示例代码创建了一个简单的表单，包含了一个姓名输入框和一个邮箱输入框，以及一个提交按钮。每个输入元素都有一个name属性，用于在提交表单时标识输入的数据。

action=”” 属性的作用

在HTML表单中，action属性用于指定表单数据的提交目标URL。当用户点击提交按钮时，表单数据将被发送到action指定的URL上。

示例代码：

<form action="/submit-form" method="post">
  <!-- 表单元素 -->
</form>

上述代码中，action属性被设置为”/submit-form”，表示表单数据将被提交到服务器上的”/submit-form”路径。这个路径可以是一个相对路径或绝对路径。

如果将action属性设置为空字符串(“”)，表单数据将会被发送到当前URL，即当前页面的URL。这在某些场景下非常有用，比如数据的前端验证。

action=”” 的应用场景

前端验证

在某些情况下，我们希望在提交表单前对输入的数据进行前端验证，以减轻服务器的压力。可以使用JavaScript来实现这一功能。

示例代码：

<script>
function validateForm() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;

  if (name === "" || email === "") {
    alert("姓名和邮箱不能为空！");
    return false;
  } else {
    return true;
  }
}
</script>

<form action="" method="post" onsubmit="return validateForm()">
  <!-- 表单元素 -->
</form>

上述代码中，validateForm()函数用于验证表单数据是否为空。在表单元素的onsubmit事件中调用该函数，如果验证不通过则弹出一个警告框，并且返回false阻止表单的提交。

通过将action属性设置为空字符串，表单数据将仍然提交到当前URL，但在提交前会先执行前端的验证代码。

AJAX 提交

在一些Web应用中，我们希望在表单提交后不刷新整个页面，只刷新部分内容或不刷新任何内容。这时可以使用AJAX来实现异步提交。

示例代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function submitForm() {
  var formData = {
    name: ("#name").val(),
    email:("#email").val()
  };

  $.ajax({
    type: "POST",
    url: "/submit-form",
    data: formData,
    success: function(response) {
      // 处理请求成功后的响应
    },
    error: function() {
      // 处理请求失败的情况
    }
  });
}

</script>

<form action="" method="post" onsubmit="event.preventDefault(); submitForm();">
  <!-- 表单元素 -->
</form>