17370845950

HTML5表单默认提交会跳转页面，需用event.preventDefault()阻止并配合fetch()实现无刷新提交；formaction/formmethod支持多操作；编码类型由浏览器自动选择，后端须匹配解析。

表单默认提交会跳转页面，这是最常被忽略的起点

HTML5 表单本身没有新提交机制，

的提交行为沿用 HTML4 规范：触发 submit 事件 → 浏览器按 method 和 action 发起请求 → 页面跳转或刷新。这意味着，只要没阻止默认行为，就不可能“无刷新提交”。很多初学者卡在这一步，以为加了 type="submit" 就算“用上 HTML5 了”，其实只是用了语义化标签。

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

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

• 必须在 submit 事件监听器中调用 event.preventDefault()，否则页面仍会跳转
• FormData 对象能自动收集
  内所有带 name 的控件值，包括
• 注意 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，适合一个表单对应多个操作场景（如“保存草稿”和“正式提交”）。

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

  
  存草稿
  发布

服务端接收时，

application/x-www-form-urlencoded 和 multipart/form-data 的区别不能混

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

• 无 且无特殊字符：默认用 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 字段值。