HTML表单高频功能_HTML表单高频功能汇总【汇总】

监听 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 更可控，尤其需要保留字段参与提交时

表单里真正麻烦的从来不是“怎么写出来”，而是“什么时候该用哪个 API”“哪个属性表面一样实际行为割裂”“哪些校验浏览器帮你做了，哪些你得自己补”。这些边界，往往到联调或线上才暴露。