表单提交失败主因是缺失name属性，required依赖name生效；label需用for/id关联控件以保障可访问性；422错误须显式处理并反馈校验信息；提交后应失焦、替换DOM而非alert。
required 属性必须配合 name 才生效
加了 required 却发现后端收不到字段？大概率是漏写了 name。浏览器只序列化带 name 的控件，id 或 class 对提交完全无效。
常见错误现象：<input id="email"> → 提交时这个字段根本不会出现在请求体里；<input name="email" required> → 正确，且原生校验会拦截空提交。
实操建议：
-
textarea和select同样需要name，否则值不参与提交 - 单选/复选框若要互斥或批量取值，必须同名（如
name="feedback_type"） -
required只校验是否为空，不校验格式——邮箱需额外加type="email"或pattern
label 与 for/id 关联不是可选项
没用 <label for="xxx"> 关联控件，屏幕阅读器就无法识别“意见内容”字段用途；移动端点击 label 也无法自动聚焦输入框，影响操作效率。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：仅靠 placeholder 提示、或用纯 div 模拟 label；视障用户听到“编辑文本”却不知该填什么。
实操建议：
- 每个
input、textarea、select都应有对应<label for="xxx">，且for值严格匹配控件id - 用
<fieldset><legend>分组（如“问题类型”单选），<legend>天然承担组描述作用，无需额外 ARIA - 避免只用视觉样式（如红色星号 *）表示必填，必须配合
required和语义化label
fetch 提交时 422 错误常被当成成功处理
后端返回 422 Unprocessable Entity，通常意味着字段格式不合法（如邮箱错、字数超限），但前端若只监听 response.ok === true 或 status >= 200 && status < 300，就会把 422 当作成功，导致用户以为提交完成，实际被服务端拒绝。
实操建议：
- 显式检查
response.status：对422解析响应体中的errors字段，并用setCustomValidity()绑定到对应控件，触发原生报错气泡 - 添加
signal: AbortSignal.timeout(8000)防止请求挂起，超时后显示“网络不稳定，请重试”，而非静默失败 - 禁用提交按钮后，务必在
finally块中恢复，否则错误后按钮永远不可点
移动端 textarea 提交后键盘不收起
iOS 上，textarea 输入完成后点击“提交”，键盘常不自动收起，用户看不到提交结果；安卓部分机型则焦点仍停留在输入框，软键盘遮挡成功提示。
实操建议：
- 提交前执行
document.activeElement?.blur()，强制当前焦点元素失焦 - 成功后用
innerHTML替换表单区域为确认文案（如<p>✅ 意见已收到，我们会在 3 个工作日内回复</p>），而非alert()或跳转 - 确保 DOM 替换不影响页面其他模块（如评论区）的事件监听器
name、for、required 这些基础属性，以及是否在 JS 中正确处理了 422 和焦点状态。最容易被忽略的，其实是提交后那一瞬间的 DOM 状态管理——它不炫技，但决定用户到底信不信你这个“反馈”是真的。 
