有人可以解释一下 onsubmit 和 action 之间的区别吗？

Question

我无法理解表单操作的用途。看来我可以通过将 onsubmit 值设置为该函数来使用 Javascript 函数处理表单数据。我在网上看到很多不同的例子，这些例子让我更加困惑。

有人可以引导我了解这将做什么，也许给我一个例子，说明表单操作可以做什么，而“onsubmit”不能或不应该做什么？

<form onsubmit="someFunction()" action="???"> ... </form>

用户将在表单中输入信息，然后点击按钮“提交”该信息。someFunction() 会用这些信息做一些事情...那么，表单操作负责什么？我见过一些例子，看起来它只是指定一个页面的 URL，告诉用户“感谢提交”之类的内容。

如果这令人困惑，我很抱歉。我不知道如何询问我的困惑。我正在寻找一个非常简单的答案，您可以向孩子提供该行代码对用户以及输入表单的信息意味着什么。

Answer 1

这里的区别很微妙但很重要：

• onsubmit是一个事件属性，意味着其中的任何 JS 都将在事件上被调用submit。
• action当以 GET 或 POST 请求（默认情况下为 POST，除非属性另有指定method）提交表单时，告诉浏览器将表单内容发送到何处，然后使用所发送请求的结果重新加载页面。

该action属性的可定制性较差，因为它不会运行任何自定义 JavaScript，它所做的只是将数据发送到后端。另一方面，onsubmit运行您的自定义 JavaScript，它可以执行您想要的任何操作（包括将数据发送到后端）。如果您需要做的只是在提交表单时运行一些客户端 JavaScript，请使用onsubmit. 如果您需要在提交表单时将数据发送到服务器，请使用action.

一般来说，您不想同时使用两者，因为如果action将数据发送到后端，那么您的页面将重新加载。事实上，即使您不指定action属性，页面仍然会重新加载，因为这是默认行为。当提交表单时使用该onsubmit属性运行 JavaScript 时，您需要使用 覆盖此默认行为event.preventDefault()，因此大多数onsubmit处理程序如下所示：

function onsubmitHandler(event) {
    event.preventDefault()
    // ... rest of the code ...
}