HTML5表单提交方式全解析

用 fetch() + event.preventDefault() 实现无刷新提交

这是当前最主流、兼容性足够（Chrome 42+、Firefox 39+、Safari 10.1+）的纯前端方案。关键在于拦截原生提交，并手动构造请求。

• 必须在 submit 事件监听器中调用 event.preventDefault()，否则页面仍会跳转
• FormData 对象能自动收集 内所有带 name 的控件值，包括 <input type="file">
• 注意 fetch() 默认不发 cookie，如需登录态，得显式加 credentials: 'include'

document.querySelector('form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  try {
    const res = await fetch(this.action, {
      method: this.method || 'GET',
      body: this.method === 'GET' ? undefined : formData,
      credentials: 'include'
    });
    const data = await res.json();
    console.log('提交成功:', data);
  } catch (err) {
    console.error('提交失败:', err);
  }
});

formaction 和 formmethod 属性让单页多提交成为可能

HTML5 新增的这几个属性允许按钮覆盖 的全局 action 和 method，适合一个表单对应多个操作场景（如“保存草稿”和“正式提交”）。

• 只对 或 <input type="submit"> 生效
• 值为相对 URL 时，以当前页面为基准解析，不是以 的 action 为基准
• 若按钮没写 formmethod，则继承 的 method；但若写了空字符串 formmethod=""，浏览器行为不一致（Chrome 当作 get，Firefox 报错），应避免

<form id="myForm" action="/api/default" method="POST">
  &lt;input name=&quot;title&quot; /&gt;
  <button type="submit" formaction="/api/draft" formmethod="POST">存草稿</button>
  <button type="submit" formaction="/api/publish" formmethod="PUT">发布</button>
</form>

服务端接收时，application/x-www-form-urlencoded 和 multipart/form-data 的区别不能混

浏览器自动根据表单内容选择编码类型，但后端解析逻辑必须匹配，否则拿不到数据。这个细节常被前端忽略，导致“明明传了文件却收不到”。

• 无 <input type="file"> 且无特殊字符：默认用 application/x-www-form-urlencoded（键值对 URL 编码）
• 含文件上传：强制用 multipart/form-data（分段传输，每个字段一个 part）
• Node.js 的 express 需配合 body-parser（仅支持 urlencoded）或 multer（支持 multipart）；Python Flask 默认只解析 urlencoded，文件需用 request.files

检查方式很简单：打开浏览器 DevTools → Network → 点击提交后的请求 → 查看 Headers → 找 Content-Type 字段值。

终于介绍完啦！小伙伴们，这篇关于《HTML5表单提交方式全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！