表单必须包含<form>标签和method属性，且需设置action；input类型应按语义选择并正确关联label；必填字段加required，错误提示需兼顾无障碍；前端校验仅为体验优化，后端必须重新验证。
表单必须包含 <form> 标签和 method 属性
没有 <form> 标签，浏览器不会识别为可提交的表单；缺少 method（如 GET 或 POST）会导致提交行为不可控，甚至被某些框架或后端拒绝。
-
method="POST"适用于敏感数据（如登录、注册），默认不缓存、不书签化，且无长度限制 -
method="GET"适合搜索、筛选等只读操作，参数会拼在 URL 后，便于分享但有长度和可见性风险 - 务必设置
action属性，哪怕暂时指向"#"或"/api/submit"，否则点击提交可能刷新当前页或跳转空白页
<input> 类型要按语义选，别全用 type="text"
用错类型不仅影响用户体验（比如移动端弹不出数字键盘），还会绕过浏览器原生校验和无障碍支持。
- 邮箱用
<input type="email">：触发邮箱格式校验，iOS 键盘自动显示 @ 符号 - 密码用
<input type="password">：隐藏输入内容，禁用自动填充（除非显式加autocomplete="current-password"） - 数字范围控制用
<input type="number" min="1" max="100">：比type="text"+ JS 校验更轻量、更可靠 - 必填字段加
required属性，但注意：它只在提交时触发，不阻止用户离开页面
label 和 input 必须正确关联，否则屏幕阅读器无法读取
仅靠视觉对齐不能替代语义关联。未关联的 <label> 在辅助技术中会被忽略，也影响点击放大区域（尤其移动端）。
- 推荐写法：
<label for="username">用户名</label><input id="username" name="username"> - 嵌套写法也可行：
<label>邮箱<input type="email" name="email"></label>，但需确保 input 在 label 内部且无其他交互元素打断 - 避免只用 placeholder 当提示文字——它会在输入后消失，且不被所有读屏器识别
- 错误提示不要只靠颜色（如红字），要加
aria-live="polite"或显式role="alert"才能被读出
提交前校验别只依赖前端，但至少做基础拦截
前端校验是用户体验层的“减速带”，不是安全锁。后端永远要重新验证，但前端能立刻反馈，避免无意义请求。
立即学习“前端免费学习笔记（深入）”；
- 利用浏览器原生属性：
required、minlength、pattern（如pattern="[0-9]{6}"验证 6 位验证码） - 监听
submit事件时，用event.preventDefault()阻止默认提交，再执行自定义逻辑（如 AJAX 提交） - 禁用提交按钮防重复点击：
button.disabled = true，但记得提交失败后恢复可用状态 - 注意：Safari 对
pattern的正则语法支持较弱，复杂规则建议用 JScheckValidity()+setCustomValidity()补充
name 属性是否唯一、每个 id 是否匹配 for、每个 type 是否贴合语义，都会在真实场景里暴露出来——尤其是当用户用键盘 Tab 导航、用 VoiceOver 操作、或在低配安卓机上提交时。 
