单纯用包裹输入框不安全，因缺乏属性控制、语义标记与后端协作；需显式约束autocomplete、隔离敏感字段、正确设置type/name/autocomplete，并配合hidden字段与csrf token。
为什么不能只用 <form></form> 包裹输入框就叫“安全”
单纯用 HTML 构建表单结构，本身不提供任何安全性——autocomplete、autofill、明文传输、缺少校验提示，这些都可能让二次验证形同虚设。真正影响安全的是属性控制、语义标记和与后端协作的约定，而不是标签嵌套方式。
关键点在于：浏览器自动填充行为必须被显式约束，敏感字段要隔离，且每个字段需有明确的 name 和 autocomplete 值，否则密码管理器或恶意脚本可能误填/窃取。
-
autocomplete="one-time-code"是现代浏览器识别 TOTP/SMS 验证码的标准值，比"off"更可靠（后者常被忽略） -
inputmode="numeric"触发数字键盘，同时防止粘贴——但注意 iOS Safari 对该属性支持有限，需配合pattern="[0-9]*" - 禁用
autocapitalize和spellcheck，避免意外修正验证码 - 所有
<input>必须有id且与<label></label>正确关联，否则屏幕阅读器无法播报字段用途
input 的 type、name 和 autocomplete 怎么配才不翻车
常见错误是写成 <input type="text" name="code"> —— 这会让 Chrome 把它当普通文本框，可能触发密码保存提示；Safari 可能自动填充上一个登录密码。
正确组合如下：
<label for="otp">验证码</label>
<input id="otp" name="otp" type="text" inputmode="numeric" autocomplete="one-time-code" autocapitalize="none" spellcheck="false" pattern="[0-9]{6}" maxlength="6">
-
type="text"而非"number"：后者会触发上下箭头、科学计数法输入，且提交时转为数字类型，丢失前导零（如001234变成1234） -
name="otp"比"code"更明确，便于后端区分短信/邮件/TOTP 等不同通道 -
pattern="[0-9]{6}"是前端轻量校验，不替代后端验证，但能阻止非数字提交 - 不要加
required属性在 JS 动态显示的字段上——如果初始隐藏，部分浏览器会报错“no element with name X is focusable”
如何防止用户粘贴错误格式的验证码
用户习惯性 Ctrl+V 粘贴带空格、换行或连字符的验证码（比如从邮件里复制的 123 456 或 12-34-56），直接提交会导致 400 错误。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
纯 HTML 无法过滤粘贴内容，但可用极简 JS 补位：
<input id="otp" ... oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0,6)">
-
oninput比onpaste更稳妥：覆盖键盘输入、粘贴、拖入等多种场景 -
replace(/[^0-9]/g, '')清除所有非数字字符，包括全角数字、空格、破折号 -
slice(0,6)截断超长输入，避免maxlength在某些安卓键盘下失效 - 不要用
onchange：它只在失焦时触发，无法实时清理
为什么 hidden 字段和 CSRF token 不能省略
二次验证表单若没带 <input type="hidden"> 标识验证通道或请求来源，后端就无法判断这个 OTP 是用于重置密码，还是用于登录、支付——攻击者可复用同一张 OTP 请求绕过逻辑校验。
示例必须包含：
<input type="hidden" name="flow" value="password-reset"><input type="hidden" name="csrf_token" value="abc123...">
-
flow字段让后端路由到对应 handler，避免 OTP 校验逻辑被泛化滥用 -
csrf_token必须由服务端注入，且每次请求唯一；若前端用 JS 生成或硬编码，等于没防 CSRF - 不要把 token 放在 URL 参数里——会被浏览器历史、代理日志、Referer 泄露
- hidden 字段的
name值应与后端白名单严格一致，大小写敏感
最易被忽略的是：前端开发者常以为“表单没敏感操作就不需要 CSRF”，但密码重置本身就是高危操作，且 OTP 本身不携带上下文信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
