HTML5表单默认提交会跳转页面，需用event.preventDefault()阻止并配合fetch()实现无刷新提交；formaction/formmethod支持多操作；编码类型由浏览器自动选择，后端须匹配解析。
表单默认提交会跳转页面，这是最常被忽略的起点
HTML5 表单本身没有新提交机制，<form></form> 的提交行为沿用 HTML4 规范：触发 submit 事件 → 浏览器按 method 和 action 发起请求 → 页面跳转或刷新。这意味着，只要没阻止默认行为，就不可能“无刷新提交”。很多初学者卡在这一步，以为加了 type="submit" 就算“用上 HTML5 了”，其实只是用了语义化标签。
用 fetch() + event.preventDefault() 实现无刷新提交
这是当前最主流、兼容性足够（Chrome 42+、Firefox 39+、Safari 10.1+）的纯前端方案。关键在于拦截原生提交，并手动构造请求。
- 必须在
submit事件监听器中调用event.preventDefault()，否则页面仍会跳转 -
FormData对象能自动收集<form></form>内所有带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 新增的这几个属性允许按钮覆盖 <form></form> 的全局 action 和 method，适合一个表单对应多个操作场景（如“保存草稿”和“正式提交”）。
- 只对
<button type="submit"></button>或<input type="submit">生效 - 值为相对 URL 时，以当前页面为基准解析，不是以
<form></form>的action为基准 - 若按钮没写
formmethod，则继承<form></form>的method；但若写了空字符串formmethod=""，浏览器行为不一致（Chrome 当作get，Firefox 报错），应避免
<form id="myForm" action="/api/default" method="POST"> <input name="title" /> <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 字段值。
