HTML表单常见问题源于浏览器默认行为与开发者预期错位：回车自动提交、required动态设置失效、select multiple跨平台不兼容、button隐式绑定表单等，均不报错但行为异常，需通过preventDefault、removeAttribute、改用checkbox、显式type声明等方式规避。
HTML表单看似简单，但实际交互中埋着大量浏览器默认行为与开发者预期错位的坑——多数失败不是代码写错了，而是没意识到浏览器在“悄悄做事”。
回车键自动提交：单文本框表单的静默刷新
当表单里只有一个可见的 type="text" 输入框时，按下回车会触发 submit 事件，页面刷新。这不是 bug，是 HTML 规范明确规定的默认行为。
- 即使其他
<input>被设为type="hidden"或display: none，只要它们在 DOM 中存在且未被disabled，仍可能被浏览器视为“非唯一字段”，但实践中多数浏览器仍按“仅一个可编辑文本框”逻辑处理 - 更隐蔽的是：表单里有个
<textarea></textarea>+ 一个隐藏<input>，回车照样提交——<textarea></textarea>也被算作“可编辑文本控件” - 解决方案不是禁用回车，而是显式拦截：
form.addEventListener('submit', e => e.preventDefault())，再交由 JS 控制后续流程
required 属性动态设置时的验证失效
用 JavaScript 给 <input> 动态加 required，不等于它就参与校验了——浏览器只在校验触发时（如点击 submit）检查该属性是否存在，但不会管它是否“视觉上合理”。
- 典型翻车场景：一个
type="radio"选中 “其他” 后显示配套文本框，并设textBox.required = true；但若用户之后取消选择，“其他”文本框display: none了，required却还挂着 → 提交被拦，无提示 -
required是布尔属性，设成false或删掉都得用removeAttribute('required')，直接赋值el.required = false不生效 - 安全做法是：每次校验前，用
el.checkValidity()主动检测，而不是依赖浏览器自动弹窗
select multiple 的跨平台操作断裂
<select multiple></select> 在不同设备上根本不是同一个东西：Windows 支持 Ctrl + 点击多选，Mac 是 Command + 点击，移动端则基本只允许单次点击切换选中状态（部分 Android 浏览器支持长按多选，iOS Safari 完全不支持）。
立即学习“前端免费学习笔记（深入）”；
- 别指望用户知道要按什么键——UI 上必须提供明确的多选引导，比如加个“按住 Ctrl/Cmd 多选”提示文字
- 移动端真实需求是“勾选多个选项”，应优先考虑改用
<input type="checkbox">组合，而非强撑multiple - 服务端接收时注意：name 为
city[]的<select multiple></select>，PHP 会解析为数组，但 Node.js 的urlencoded中默认只取最后一个值，需配置extended: true
button type="submit" 与表单作用域的隐式绑定
一个 <button type="submit"></button> 不一定只提交它“看起来在里面的那个表单”——如果它不在任何 <form></form> 内部，浏览器会往上找最近的 <form></form>；如果页面有多个表单，它可能提交错目标。
- 常见误判：把按钮放在表单外、用
form="myFormId"属性关联，但拼错了 ID 或 ID 对应的<form></form>尚未渲染完成 → 按钮点击后无反应或提交到action="" -
<button></button>默认type="submit"，不写type属性就是提交按钮——很多“点了没反应”的问题，其实是它偷偷提交了某个看不见的表单 - 最稳写法：明确写
<button type="button"></button>做纯 JS 操作，需要提交时用form.submit()显式调用
这些陷阱的共同点是：它们都不报错，也不抛异常，只是让行为和预期差那么一拍。调试时别急着查 JS，先看浏览器 DevTools 的 Elements 面板里，相关元素的属性、状态、父级表单结构是否真如你所想。
