移动端表单必须用包裹且action不能为空，否则submit事件不触发、Network无请求；label需for/id关联以支持触控聚焦，onsubmit="return false"会丢失event.submitter。
移动端表单必须用 <form></form> 包裹，且 action 不能空
不套 <form></form>，点提交按钮根本没反应——Network 面板都看不到请求。哪怕只是前端存 localStorage，也得有 <form></form>，否则浏览器不认这是“一个提交单元”。action 必须显式写，比如 action="#" 或 action="/api/submit"；留空或省略会触发部分浏览器的降级行为，导致 submit 事件不触发或 event.submitter 丢失。
用 CSS Grid + minmax() 实现单列到双列的平滑过渡
别手写一堆 @media (max-width: 768px)，容易漏断点、难维护。直接在表单容器上设：
form {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr));
gap: 16px;
}
@media (max-width: 600px) {
form { grid-template-columns: 1fr; }
}
这样桌面端两列对齐、移动端自动收为一列，标签和输入框始终上下堆叠，不会出现文字被截断或输入框过窄的问题。注意：不要用 float 或 inline-block 做表单布局，它们在小屏下极易错位且无法响应式回流。
<label></label> 必须用 for/id 关联，且禁用 onsubmit="return false"
点击标签能聚焦输入框，这对手指粗、屏幕小的移动端极其关键。没关联的 <label></label> 就是纯文本，起不到任何作用。同时，onsubmit="return false" 会吞掉原生事件对象，导致你拿不到 event.submitter —— 比如区分“保存”和“重置”按钮就失效了。正确做法是监听 submit 事件后调 event.preventDefault()，再手动处理逻辑。
立即学习“前端免费学习笔记（深入）”；
input[type="number"] 在手机上输不了小数点？检查 step 和 min
这不是 bug，是 HTML 规范行为。Chrome/Edge 默认把 step 当成 1，没显式声明就拦截 . 和 - 键。要支持小数，必须写 step="0.1" 或更通用的 step="any"（兼容性已覆盖所有主流移动端浏览器）。如果还要允许负数，记得加 min="-999"，否则 - 依然被拦。
最常被忽略的是：移动端键盘类型由 type 决定，但语义和验证由 inputmode 和 pattern 补充。比如电话输入，光用 type="tel" 不够，还得加 inputmode="tel" 确保唤起数字键盘，再配 pattern="[0-9\s\-\(\)]+" 做轻量格式提示。这些细节不写，用户就得手动切键盘、反复删改。
