HTML 表单是 Web 开发中最常用的元素之一，它们允许用户向 Web 应用程序提交数据并与服务器进行交互。在表单中，我们通常使用 action 属性来定义表单提交的目标 URL，同时使用 onsubmit 属性来指定提交表单时执行的 JavaScript 函数。然而，这两个属性可能会带来一些意料之外的问题，本文将详细介绍这些问题，并提供相应的解决方案。
1. action 属性的作用
action 属性用于指定表单提交后要发送数据到哪个 URL。例如：
<form action="/submit-form" method="post"> <!-- 表单内容 --> </form>
当用户点击表单中的提交按钮时，浏览器会将表单数据打包成一个 HTTP 请求，其中包含了 action 属性中指定的 URL。服务器会接收到这个请求，并根据请求中的数据执行相应的操作。
需要注意的是，如果不指定 action 属性，表单默认会将数据提交到当前页面的 URL。这可能会导致一些问题，例如无法正确处理表单提交、重复提交等。
2. onsubmit 属性的作用
onsubmit 属性用于指定当表单提交时要执行的 JavaScript 函数。例如：
-- -------------------- ---- ------- ----- --------------------- ------------- ---------------- ---------------- ---- ---- --- ------- ------------------------- ------- -------- -------- -------------- - -- ------ - ---------
在这个例子中，当用户点击表单中的提交按钮时，浏览器会执行 validateForm() 函数进行表单验证。如果验证通过，validateForm() 函数需要返回 true，否则返回 false，防止表单提交。
需要注意的是，如果 onsubmit 函数返回 false，表单将不会被提交到服务器。这个特性可以用来防止无效的表单提交，但同样也可能导致一些问题。
3. 潜在的问题
在使用 action 和 onsubmit 属性时，有一些潜在的问题需要注意：
3.1 URL 不正确
如果 action 属性中指定的 URL 不正确，表单提交后将无法到达正确的目标地址。这可能会导致数据丢失、无法正确处理表单提交等问题。
3.2 验证失败导致表单无法提交
如果 onsubmit 函数中的表单验证逻辑有误，可能会导致表单始终无法提交。例如：
-- -------------------- ---- -------
----- --------------------- ------------- ---------------- ----------------
---- ---- ---
------- -------------------------
-------
--------
-------- -------------- -
--- ----- - --------------------------------
-- ------------ --- --- -
---------------
------ ----- -- ----
-
-
---------在这个例子中，如果用户没有填写表单中的 input 输入框，表单将无法提交，并提示输入不能为空。
3.3 多次提交
如果用户在表单提交后快速点击提交按钮，可能会导致多次提交同一个表单。这可能会导致数据重复、服务器负载过高等问题。
4. 解决方案
针对上述问题，我们可以采取以下解决方案：
4.1 使用绝对 URL
为避免 action 属性中指定的 URL 不正确，我们可以使用绝对 URL 来代替相对 URL。例如：
<form action="https://example.com/submit-form" method="post"> <!-- 表单内容 --> </form>
这样即使当前页面的 URL 发生变化，表单提交时也能顺利到
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27441