表单需关注input类型、label绑定、防重复提交、textarea空白符处理及name属性等细节。type选错致验证失效；label须for关联或嵌套input；提交需禁用按钮+服务端幂等；textarea展示用pre-wrap；name属性不可缺。
表单不是写完就能用，关键在「用户一填就出错、一提交就丢数据、一换浏览器就样式崩」——这些问题全出在几个基础但容易被跳过的细节上。
input 类型选错，前端验证直接失效
很多人写 <input type="text"> 一把梭，结果手机号能输字母、邮箱里塞个「@qq」也过审。浏览器原生验证只认特定 type 值，且必须配合 required 和 pattern 才生效。
-
type="email"触发邮箱格式检查（但不校验域名是否存在） -
type="tel"不做格式限制，仅唤起手机数字键盘；真要校验请配pattern="[0-9]{11}" -
type="number"允许输入「e」「+」「-」等符号，需加step="1"+min/max控制范围 - 密码字段别用
type="text"+ JS 遮掩，必须用type="password"，否则 iOS 键盘不会隐藏明文
label 没包 input，屏幕阅读器和点击体验全崩
只写 <label>用户名</label><input>，等于放弃可访问性，也失去「点文字聚焦输入框」的交互。正确绑定只有两种方式：
- 用
for属性关联id：<label for="uname">用户名</label><input id="uname"> - 把
input直接嵌进label：<label>用户名<input name="uname"></label>（更简洁，兼容性无问题）
漏掉这个，测试时会被无障碍工具标红，移动端点击热区也小一半。
立即学习“前端免费学习笔记（深入）”；
form 提交前没防重复，用户狂点导致后端收到 5 条订单
HTML 默认不阻止连续提交。光靠 disabled 按钮还不够——如果用户刷新页面或禁用 JS，按钮又变可点了。
- 提交瞬间禁用按钮：
button.disabled = true，同时加 loading 文案（如「提交中…」） - 服务端必须做幂等：用
idempotency-key请求头或订单号去重，不能只靠前端锁按钮 - 别用
onsubmit="return false"拦截，会断掉原生验证提示；改用event.preventDefault()+ 手动收集数据
textarea 换行和空格丢失？那是没设 white-space
用户填的地址带换行、缩进，后端收到却变成一坨空格挤在一起。根本原因是 HTML 渲染默认折叠空白符，textarea 的值本身没错，错在展示时没保留。
- 提交前用
value.replace(/\s+/g, ' ').trim()是错的——这会破坏地址、诗歌等需要保留结构的内容 - 正确做法：后端接收原始字符串，前端展示时用
white-space: pre-wrapCSS 保持换行和空格 - 若需限制长度，用
maxlength属性（它按字符数算，含换行符），别用 JS 截断，否则用户看不到自己删了什么
最常被忽略的其实是 name 属性：没有它，字段根本不会随表单提交；同名多个 input（如多选 checkbox）才会打包成数组。别以为加了 id 或 class 就够了。
