请教onsubmit与form action的区别及action的独特作用

先搞懂<form onsubmit="someFunction()" action="???">的基本流程 #

当用户点击表单的提交按钮（比如<button type="submit">）时，浏览器会按以下顺序执行：

1. 先触发执行onsubmit绑定的someFunction()
2. 如果函数返回true（或者没写return语句，默认返回true），浏览器会继续执行action指定的默认行为——把表单数据发送到action里的地址，随后页面会跳转到该地址的响应结果页面
3. 如果函数返回false，或者在函数内调用了event.preventDefault()，浏览器会直接中断提交流程，不会执行action的操作

action的核心作用 #

它是表单的「原生提交目标」，负责将表单数据发送到服务器，这是浏览器内置的原生能力，不需要依赖JavaScript就能正常工作。

action能实现但onsubmit不能/不应做的事 #

• 无JS环境下的保底提交：如果用户浏览器禁用了JavaScript，onsubmit绑定的函数根本无法执行，此时只有action能保证表单正常将数据提交到服务器，确保功能的基础可用性
• 原生数据编码与传输：浏览器会自动将表单内的输入项（如<input>、<select>）按照method（GET/POST）规则编码成标准格式（如application/x-www-form-urlencoded），无需手动编写JS代码拼接参数、处理编码，出错概率更低
• 减少冗余JS代码：如果只是简单的提交数据到服务器，使用action配合method就能完成，无需编写JS代码去收集数据、发送请求
• 便捷处理文件上传：上传文件时，浏览器原生支持通过enctype="multipart/form-data"配合action处理二进制文件的传输，若用JS手动处理文件上传会复杂得多，容易出现bug

若someFunction()已处理数据，action负责什么？ #

分三种常见场景：

1. 若你在someFunction()中使用AJAX（如fetch、axios）发送了请求，并且*返回false*或调用event.preventDefault()阻止了默认行为，那么action不会被触发，此时它可以留空或填写当前页面地址（规范上不建议随意填写无效地址）
2. 若someFunction()仅用于数据验证（比如检查输入是否为空、格式是否正确），验证通过后返回true，那么action会接手后续工作，负责将验证通过的数据发送到服务器，此时它是真正的「数据发送执行者」
3. 若你未阻止默认行为，即使someFunction()处理了数据，浏览器仍会执行action的提交操作，大概率会导致重复提交，因此JS处理完数据后一定要记得阻止默认行为

内容的提问来源于stack exchange，提问作者JVDS1069