监听 form 的 submit 事件并调用 preventDefault() 可阻止刷新、保留 fetch 响应；FormData 自动收集字段（含文件），JSON 提交需 Object.fromEntries 转换；select 清空需空 option 且用 value 赋值；number 输入需手动过滤非法字符；disabled 字段不提交，readonly 会提交。
怎么让表单提交不刷新页面又拿到响应
用 fetch 替代原生 submit 行为是最直接的解法，但别直接监听 click——容易漏掉回车提交、无障碍操作等场景。
正确做法是监听 submit 事件，调用 event.preventDefault() 阻止默认跳转：
document.querySelector('form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const res = await fetch('/api/login', {
method: 'POST',
body: formData
});
const data = await res.json();
});
-
FormData自动收集所有name属性存在的字段，包括<input type="file">，比手动拼JSON更稳妥 - 如果后端要求
Content-Type: application/json，得先用Object.fromEntries(formData)转对象再JSON.stringify，但注意文件字段会丢失 - 没加
event.preventDefault()是最常见失手点，一刷新页面，fetch结果就丢了
select 下拉框怎么默认选中又支持清空
HTML 原生 select 不支持空选项（除非显式加一个 <option value=""></option>），而且 selected 属性只在初始渲染时生效，JS 修改要用 .value 或 .selectedIndex。
- 想让下拉框可清空，必须提供一个空值
<option value="">请选择</option> - 设默认值别写
selected，改用 JS 赋值：selectEl.value = "2"，否则 SSR 或框架 hydrate 时可能错乱 - React/Vue 等框架里，绑定
value后直接改状态即可，但原生 JS 中改.value不会触发change事件，需手动dispatchEvent(new Event('change'))
input type="number" 为什么输入字母不报错还留着
type="number" 的校验是软性的：浏览器会阻止非数字字符输入（如中文、字母），但允许粘贴、拖拽、或通过 DevTools 修改 DOM 绕过限制。它不会自动清空非法值，也不会触发 invalid 事件，除非你显式调用 checkValidity()。
- 用户粘贴
"123abc"进去，浏览器通常只保留前面的"123"，但部分版本（尤其 Safari）可能整个留着——这时input.valueAsNumber会是NaN - 真要强校验，得监听
input事件 + 正则过滤：e.target.value = e.target.value.replace(/[^0-9.-]/g, '') - 别依赖
required和min/max做业务逻辑判断，它们只影响表单提交前的原生提示，后端仍需重复校验
disabled 和 readonly 对表单数据提交的影响差异
两者视觉上都让输入框变灰、不可编辑，但行为完全不同：disabled 字段根本不会出现在 FormData 或序列化结果里；readonly 字段会提交，只是用户不能改。
立即学习“前端免费学习笔记（深入）”；
- 后台接口报 “缺少字段” 错误？先检查是不是误用了
disabled——比如权限控制时该用readonly却写了disabled -
disabled元素不会触发任何事件（focus、input、change都不会），而readonly会触发focus和input（只是值不变） - 用 CSS 模拟禁用效果（
pointer-events: none; opacity: .6）+readonly，比直接disabled更可控，尤其需要保留字段参与提交时
