表单中找回密码链接必须用原生，禁用button模拟；需设独立class确保可识别，容器加display:block和margin-top对齐布局；不加target="_blank"除非必要，且必须配rel="noopener"。
怎么在表单里加「找回密码」链接
直接加 @#@#@#@#@#@#@#@#@#@0，绝对不要套在 <button></button> 或 <input type="button"> 里
<form></form> 内部时，确保它不在 <input type="submit"> 的默认表单提交路径上——也就是别包在 <label></label> 里，也别加 formaction
a 样式（比如去掉了下划线、改了颜色），记得单独给这个链接加类名，比如 <a class="form-link" href="..."></a>，否则用户根本看不出它是可点击的为什么不能用 button 模拟链接
表面上看 <button onclick="location.href='/forgot-password'"></button> 能跳转，但实际埋了三个坑：不支持右键新标签页打开、无障碍阅读器无法识别为导航链接、SEO 不收录该路径。更重要的是，如果 JS 失效或未加载，这个按钮就彻底失效，而原生 <a></a> 始终可用。
- 搜索引擎只抓取
href属性，onclick里的路径不会被索引 - 屏幕阅读器对
<button></button>默认读作“按钮”，对<a></a>才读作“链接”，语义完全不同 - 移动端长按
<a></a>会弹出“在新标签页打开”等菜单，<button></button>没这行为
表单下方排版常见错位问题
链接紧贴输入框底部时，经常被误认为是按钮的一部分，或者因 margin/padding 计算错误导致换行错乱。本质是块级元素和行内元素的盒模型没对齐。
- 给包含链接的容器加
display: block和明确的margin-top（比如12px），别依赖父级<form></form>的默认间距 - 避免用
<br>换行——HTML5 已不推荐，且不同浏览器渲染高度不一致 - 如果表单用了 flex 布局，确保链接容器设了
align-self: flex-start，否则可能被拉伸或居中，破坏辅助操作的视觉层级
要不要加 rel="noopener" 或 target="_blank"
除非业务明确要求「找回密码页必须新开标签」，否则一律不用 target="_blank"。多数场景下，用户填完邮箱返回原登录页更自然；强行新开页反而增加跳出率，还可能被浏览器拦截。
- 如果真要新开页（比如 SSO 系统需跳转到独立认证域），必须加
rel="noopener"，否则新页面可通过window.opener访问原页面 DOM，有安全风险 -
rel="nofollow"不需要加——找回密码是合法导航路径，不是广告或用户生成内容 - 移动端 Safari 对
target="_blank"支持不稳定，部分版本会静默忽略，导致链接退化为当前页跳转
href 和视觉位置比样式细节更重要。很多人花半小时调按钮圆角，却忘了检查链接能否被键盘 Tab 到达——那才是真正的断裂点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
